Comment implémenter la validation de formulaire dynamique via Vue

Avec le développement rapide du développement front-end, la validation de formulaire est devenue une compétence essentielle pour le développement front-end. En tant que l'un des frameworks front-end grand public actuels, Vue fournit également une solution très pratique et efficace en matière de validation de formulaire. Cet article présentera comment implémenter la vérification dynamique de formulaire via Vue sous les trois aspects suivants.

1. Le principe de validation de formulaire dans Vue

Le principe de validation de formulaire dans Vue est principalement implémenté via le v-model et les attributs calculés. v-model est utilisé pour implémenter la liaison bidirectionnelle du formulaire, et l'attribut calculé peut générer dynamiquement des règles de validation basées sur les données liées au contrôle de formulaire par v-model. Lorsque les données de contrôle du formulaire changent, la propriété calculée sera également recalculée et mise à jour, et les règles de validation seront régénérées et prendront effet.

2. Méthodes de validation de formulaire dans Vue

Vue fournit une variété de méthodes pour implémenter la validation de formulaire, y compris des validateurs personnalisés et des serveurs de validation intégrés et plug-ins tiers, etc.

(1) Validateur personnalisé

En définissant une méthode, la méthode doit renvoyer vrai ou faux pour indiquer si la vérification du formulaire est réussie, comme indiqué ci-dessous : #🎜🎜 #

methods: {
  validateEmail(email) {
    // 正则表达式验证邮箱格式是否正确
    const reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
    return reg.test(email);
  }
}

Liez cette méthode au contrôle de formulaire et ajoutez l'instruction v-show pour implémenter la validation du formulaire, comme indiqué ci-dessous :

<input v-model="email" />
<span v-show="!validateEmail(email)">邮箱格式不正确</span>

(2) Validateur intégré

# 🎜🎜 Les validateurs intégrés de #Vue incluent obligatoire, email, numérique, etc. Ces validateurs peuvent être utilisés directement sur le contrôle de formulaire, comme indiqué ci-dessous :

<input type="text" v-model="name" required />
<span v-show="$v.name.$error">姓名不能为空</span>

<input type="email" v-model="email" />
<span v-show="$v.email.$error">邮箱格式不正确</span>

<input type="number" v-model="age" />
<span v-show="$v.age.$error">年龄必须是数字</span>

(3) Plug-in tiers

#🎜 🎜#Vue dispose également de plusieurs plug-ins tiers pour la validation des formulaires, tels que le plug-in VeeValidate. VeeValidate peut grandement simplifier la complexité de la validation des formulaires et peut également prendre en charge des fonctions avancées telles que i18n et les messages personnalisés.

Exemple de validation de formulaire dans Vue

3. Ce qui suit est un exemple d'implémentation de la vérification du formulaire d'inscription d'un utilisateur. Cet exemple utilise le plug-in VeeValidate pour. implémentez la vérification du nom, de l'e-mail et du mot de passe :

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>姓名:</label>
      <input type="text" v-model="name" v-validate="'required'" />
      <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
       
      <label>邮箱:</label>
      <input type="text" v-model="email" v-validate="'required|email'" />
      <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
       
      <label>密码:</label>
      <input type="password" v-model="password" v-validate="'required'" />
      <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
      
      <button type="submit" :disabled="errors.any()">提交</button>
    </form>
  </div>
</template>

<script>
import { required, email } from 'vee-validate/dist/rules';
import { extend, ValidationProvider, ValidationObserver, setInteractionMode } from 'vee-validate';

setInteractionMode('eager');

extend('required', required);
extend('email', email);

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },

  data() {
    return {
      name: '',
      email: '',
      password: '',
    };
  },

  methods: {
    submitForm() {
      alert('表单验证通过，开始提交数据');
    },
  },
};
</script>

Dans l'exemple ci-dessus, nous avons introduit le plug-in VeeValidate et étendu les règles de vérification requises et par e-mail via la méthode d'extension. Dans le modèle, nous avons défini des instructions v-validate pour les contrôles de nom, d'e-mail et de mot de passe respectivement, et ajouté des règles de vérification correspondantes. Nous définissons également une formule de jugement pour le bouton de soumission afin de déterminer s'il y a une erreur dans le formulaire. S'il y a une erreur, le bouton de soumission sera désactivé.

À travers les exemples ci-dessus, nous pouvons voir que le plug-in VeeValidate peut grandement simplifier la complexité de la validation des formulaires, tout en fournissant des règles de validation riches et des fonctions avancées, rendant la validation des formulaires plus pratique et plus rapide.

En bref, Vue propose une variété de façons d'implémenter la vérification de formulaire, et les développeurs peuvent choisir la méthode de vérification qui leur convient en fonction de besoins spécifiques. Quelle que soit la méthode utilisée, une bonne validation des formulaires peut améliorer l’expérience utilisateur et la sécurité des données, ainsi que la stabilité et la fiabilité des applications Web.

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!