méthode de validation en vue

La méthode Validator est la méthode de validation intégrée de Vue.js, utilisée pour écrire des règles de validation de formulaire personnalisées. Les étapes d'utilisation comprennent : l'importation de la bibliothèque Validator ; la création de règles de validation ; l'instanciation de Validator ; l'ajout de règles de validation et l'obtention de résultats de validation ;

Méthode Validator dans Vue

La méthode Validator est une méthode de validation intégrée dans Vue.js, utilisée pour écrire des règles de validation de formulaire personnalisées. Il peut être utilisé pour valider la saisie de l'utilisateur, garantissant ainsi la validité des données avant de soumettre le formulaire.

Comment utiliser la méthode Validator

Pour utiliser la méthode Validator, veuillez suivre ces étapes :

1. Importer la bibliothèque Validator :

   <code class="javascript">import { Validator } from 'vee-validate';</code>

2. Créer des règles de validation :

   <code class="javascript">const rules = {
     required: value => !!value,
     minLength: value => value.length >= 6,
   };</code>

3. Validateur d'instanciation :

   <code class="javascript">const validator = new Validator();</code>

4. Ajouter des règles de validation :

   <code class="javascript">validator.extend('required', rules.required);
   validator.extend('minLength', rules.minLength);</code>

5. Valider l'entrée :

   <code class="javascript">const result = await validator.validate({
     name: 'John',
     email: 'john@example.com',
   });</code>

6. Obtenir les résultats de validation :

   <code class="javascript">if (result.failed) {
     // 验证失败
   } else {
     // 验证成功
   }</code>

Exemple

L'exemple suivant montre comment Valider le formulaire en utilisant la méthode Validator :

<code class="html"><template>
  <form @submit.prevent="submit">
    <input type="text" v-model="name" />
    <input type="email" v-model="email" />

    <button type="submit">提交</button>
  </form>
</template>

<script>
import { Validator } from 'vee-validate';

export default {
  data() {
    return {
      name: '',
      email: '',
    };
  },
  methods: {
    async submit() {
      const rules = {
        required: value => !!value,
        minLength: value => value.length >= 6,
        email: value => /\S+@\S+\.\S+/.test(value),
      };

      const validator = new Validator();
      validator.extend('required', rules.required);
      validator.extend('minLength', rules.minLength);
      validator.extend('email', rules.email);

      const result = await validator.validate({
        name: this.name,
        email: this.email,
      });

      if (result.failed) {
        // 处理验证失败
      } else {
        // 表单数据有效，提交表单
      }
    },
  },
};
</script></code>

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!