Comment traiter les formulaires dans Vue ?

Avec la popularité des applications Web, les formulaires sont devenus un élément important de l'interaction des utilisateurs. Dans Vue.js, nous pouvons utiliser les instructions et les méthodes qu'il fournit pour traiter les formulaires, ce qui rend le développement plus pratique. Cet article présentera le traitement des formulaires dans Vue, y compris la liaison, la vérification, la soumission, etc.

1. Liaison de formulaire

Vue utilise la directive v-model pour réaliser une liaison bidirectionnelle des champs et des données du formulaire. Nous pouvons utiliser cette directive sur un élément de formulaire pour lier la valeur du formulaire aux données du composant. Comme indiqué ci-dessous :

<template>
  <div>
    <input type="text" v-model="inputValue" placeholder="请输入...">
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

Dans le code ci-dessus, nous lions l'attribut value de l'élément d'entrée aux données inputValue du composant, obtenant ainsi une liaison bidirectionnelle. Lorsque l'utilisateur modifie la valeur du formulaire via la zone de saisie, Vue mettra automatiquement à jour les données du composant. De même, les vues sont automatiquement mises à jour lorsque les données des composants sont modifiées.

2. Vérification du formulaire

Avant de soumettre le formulaire, nous devons généralement vérifier les données du formulaire pour nous assurer que les données sont légales et complètes. Dans Vue.js, vous pouvez également utiliser le plug-in de validation fourni pour valider les données du formulaire. Parmi eux, le plug-in de vérification le plus courant est Vuelidate.

Vuelidate fournit une variété de règles et de méthodes de vérification qui peuvent être utilisées pour vérifier les valeurs saisies dans le formulaire. Certaines règles de validation couramment utilisées sont les suivantes :

• obligatoire : La valeur doit exister.
• minLength : La longueur de la valeur doit être supérieure ou égale à la longueur spécifiée.
• maxLength : La longueur de la valeur doit être inférieure ou égale à la longueur spécifiée.
• e-mail : la valeur doit être dans un format d'e-mail valide.

Nous pouvons appliquer ces règles aux valeurs du formulaire et les vérifier avant la soumission du formulaire. Comme indiqué ci-dessous :

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required, minLength: minLength(6) },
    password: { required, minLength: minLength(8) }
  },
  methods: {
    submitForm() {
      if (this.$v.$invalid) {
        console.log('表单校验失败')
        return
      }
      console.log('表单校验通过')
    }
  }
}
</script>

Dans le code ci-dessus, nous lions la valeur de l'élément de formulaire aux données du composant et utilisons les règles de vérification fournies par Vuelidate pour vérifier la valeur. Après avoir défini les règles de validation dans l'option validations du composant, nous pouvons appeler l'attribut $v lorsque le formulaire est soumis pour déterminer si les données du formulaire sont légales. Si l'attribut $v.$invalid est vrai, la validation du formulaire échoue. Sinon, les données du formulaire peuvent être soumises.

3. Soumission du formulaire

Une fois la vérification du formulaire réussie, nous devons soumettre les données du formulaire au serveur pour traitement. Dans Vue, nous pouvons soumettre des données de formulaire via AJAX. Par exemple, l'exemple de code pour soumettre les données d'un formulaire à l'aide de la bibliothèque Axios est le suivant :

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
        .then(response => {
          console.log('表单提交成功')
        })
        .catch(error => {
          console.log('表单提交失败')
        })
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la méthode post de la bibliothèque Axios lors de la soumission du formulaire. Cette méthode envoie une requête POST au serveur et envoie les données du formulaire comme corps de la requête. Une fois la requête réussie ou échouée, nous pouvons effectuer le traitement correspondant dans la méthode then ou catch.

Résumé

Le traitement des formulaires dans Vue.js nécessite des opérations telles que la liaison de données, la vérification et la soumission. Vue fournit des directives de modèle V et des données de composants pour implémenter la liaison de données, et vous pouvez également utiliser des plug-ins de validation pour valider les données du formulaire. Une fois les données du formulaire vérifiées, nous pouvons utiliser la technologie AJAX pour soumettre les données du formulaire au serveur pour traitement. Ce qui précède est le résumé de cet article. J'espère qu'il sera utile à tout le monde de comprendre le traitement des formulaires Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!