Vue et PHP se combinent pour obtenir une vérification et une soumission de forme efficaces

Implémentation de la structure de formulaire à l'aide de composants Vue

Dans le développement Web, la vérification du formulaire est un lien clé pour assurer la validité et la sécurité des données. Le framework VUE offre une commodité pour créer des formulaires interactifs avec sa syntaxe de modèle flexible et ses puissantes capacités de liaison des données. Nous créons d'abord un composant VUE, y compris les cases d'entrée de nom et de boîte aux lettres, utilisons le modèle V pour implémenter la liaison des données et spécifiés des éléments requis via l'attribut requis.

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Nom:</label>
      <input type="text" id="name" v-model="name" required>
      <span>{{errors.name}}</span>
    </div>
    <div>
      <label for="email">Mail:</label>
      <input type="email" id="email" v-model="email" required>
      <span>{{errors.email}}</span>
    </div>
    <div>
      <button type="submit">soumettre</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      errors: {}
    };
  },
  methods: {
    submitForm() {
      // La vérification et la soumission du formulaire sont effectuées ici
    }
  }
};
</script>

Ajouter la logique de vérification du formulaire

Avant de soumettre le formulaire, vous devez vérifier que le contenu entré par l'utilisateur répond aux exigences. Nous pouvons implémenter la logique de vérification via les propriétés de calcul de VUE et stocker les informations d'erreur dans l'objet Erreurs pour un affichage facile dans l'interface.

 // ...

calculé: {
  isValid () {
    this.errors = {};

    if (! this.name) {
      this.errors.name = 'Le nom ne peut pas être vide';
    }

    if (! this.email) {
      this.errors.email = 'La boîte aux lettres ne peut pas être vide';
    } else if (! this.validateemail (this.email)) {
      this.errors.email = 'Le format de boîte aux lettres est incorrect';
    }

    return object.keys (this.errors) .length === 0;
  }
},
Méthodes: {
  soumisForm () {
    if (this.isvalid) {
      // Soumission de formulaire ici}
  },
  validerEmail (e-mail) {
    // Vérifiez le format de la boîte aux lettres en utilisant des expressions régulières}
}

// ...

Mettre en œuvre la soumission du formulaire et le traitement PHP

Une fois la vérification passée, les données de formulaire sont soumises au serveur via une demande de poste à l'aide de la bibliothèque Axios. Le côté serveur utilise PHP pour recevoir et traiter les données, tels que les enregistrer dans une base de données ou l'exécution d'une autre logique métier, puis renvoyant une réponse au format JSON à l'avant.

 soumisForm () {
  if (this.isvalid) {
    const FormData = new FormData ();
    formdata.append ('name', this.name);
    formdata.append ('e-mail', this.email);

    axios.post ('/ soumed.php', formdata)
      .Then (réponse => {
        // traite la réponse du serveur})
      .Catch (error => {
        // gérer l'erreur});
  }
}

Code d'échantillon côté PHP

<?php
$name = $_POST['name'];
$email = $_POST['email'];

// Traitement des données de formulaire ici，Par exemple, enregistrer dans la base de données

// Réponse de retour
$response = ['success' => vrai];
echo json_encode ($ réponse);
?>

Résumer

En combinant les fonctionnalités réactives de VUE et les capacités de traitement côté serveur de PHP, nous pouvons facilement implémenter un processus complet de vérification de formulaire et de soumission des données. Vue est responsable des invites de vérification et d'erreur en temps réel, et PHP est responsable de la réception et du traitement en toute sécurité des données. Cette division claire du travail entre les extrémités avant et arrière améliore non seulement l'expérience utilisateur, mais assure également la sécurité des données. Vous pouvez davantage développer et optimiser cette solution en fonction des besoins réels.