Comment utiliser Vue et Element-UI pour implémenter une logique de validation complexe de formulaires

Comment utiliser Vue et Element-UI pour implémenter une logique de validation complexe de formulaires

Introduction :
Dans le développement d'applications Web, la validation de formulaire est une exigence fréquente. La validation des formulaires peut garantir que les données saisies par l'utilisateur sont conformes à des formats ou à des règles spécifiques, améliorant ainsi la précision des données et la stabilité de l'application. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter une logique de validation complexe de formulaires et fournira aux lecteurs des exemples de code pertinents.

1. Introduction à Element-UI
Element-UI est une bibliothèque de composants de bureau développée sur la base de Vue.js. Elle fournit une série de composants d'interface utilisateur faciles à utiliser, tels que des tableaux, des formulaires, des boutons, etc. Element-UI possède de nombreuses fonctions de vérification de formulaire intégrées, qui peuvent facilement implémenter une logique de vérification simple.

2. Principe de base de la vérification de formulaire
Le principe de base de la vérification de formulaire est d'obtenir la valeur saisie par l'utilisateur en surveillant l'événement de modification de l'élément de formulaire, puis de la vérifier selon une série de règles prédéfinies. Si la vérification réussit, le statut de l'élément de formulaire sera modifié en « Vérification réussie », sinon un message d'erreur s'affichera et le statut de l'élément de formulaire sera modifié en « Échec de la vérification ».

3. Utilisez Element-UI pour une vérification simple du formulaire
Tout d'abord, nous devons introduire les composants Form et FormItem d'Element-UI, puis utiliser ces composants dans le modèle Vue pour créer le formulaire. Dans l'élément de formulaire spécifié, vous pouvez définir des règles de validation en définissant l'attribut règles, comme indiqué ci-dessous :

L'objet formulaire dans les données stocke la valeur de chaque zone de saisie dans le formulaire, et l'objet règles définit chaque entrée Règles de validation des trames.

Dans les données de Vue, nous pouvons définir les objets formulaire et règles comme suit :

data() {
return {

form: {
  username: '',
  password: ''
},
rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ]
}

}
}
Dans l'objet règles, nous pouvons définir plusieurs règles de vérification, telles que les restrictions obligatoires et de longueur. , etc. L'attribut message définit le message d'erreur et l'attribut trigger définit l'événement déclenché par la vérification.

Dans les méthodes de Vue, nous pouvons définir la méthode validateForm pour valider le formulaire :

methods : {
validateForm() {

this.$refs.myForm.validate((valid) => {
  if (valid) {
    this.$message({
      type: 'success',
      message: '表单校验通过'
    })
  } else {
    this.$message.error('表单校验失败')
    return false
  }
})

}
}
Dans la méthode validateForm, nous appelons cela.$ refs. méthode myForm.validate() pour déclencher la validation du formulaire. Le résultat de la vérification est transmis via la fonction de rappel valide. Si la vérification réussit, un message de réussite sera affiché, sinon un message d'échec sera affiché.

4. Implémenter une logique de vérification complexe
Parfois, nous devons implémenter une logique de vérification plus complexe, comme comparer si les valeurs de deux zones de saisie sont égales, vérifier les adresses e-mail, vérifier les numéros de téléphone portable, etc. Dans ce cas, nous pouvons utiliser des règles de validation personnalisées.

Tout d'abord, dans les données de Vue, nous pouvons définir des règles de validation personnalisées, comme indiqué ci-dessous :

data() {
return {

rules: {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: this.validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: this.validateConfirmPassword, trigger: 'blur' }
  ]
}

}
}
Dans l'objet Rules, nous pouvons définir des règles de validation personnalisées, où le validateur L'attribut définit la fonction de validation.

Ensuite, dans les méthodes de Vue, nous pouvons définir une fonction de validation personnalisée comme suit :

méthodes : {
validatePassword(rule, value, callback) {

if (value.length < 6 || value.length > 20) {
  callback(new Error('密码长度在6到20个字符'))
} else {
  callback()
}

},
validateConfirmPassword(rule, value, callback) {

if (value !== this.form.password) {
  callback(new Error('两次输入的密码不一致'))
} else {
  callback()
}

}
}
Dans la fonction de vérification personnalisée, nous pouvons transmettre le résultat de la vérification en appelant la fonction de rappel. Si la vérification réussit, callback() est appelé, sinon callback(new Error('error message')) est appelé.

Enfin, utilisez les règles de validation personnalisées dans le modèle Vue, comme indiqué ci-dessous :

< type="password" v-model="form.password">




en personnalisation Parmi les règles de vérification , nous pouvons utiliser l'attribut type pour spécifier les règles de vérification intégrées par Element-UI. Par exemple, la règle de courrier électronique peut être implémentée en définissant l'attribut type sur « email ».

Résumé :
Cet article explique comment utiliser Vue et Element-UI pour implémenter une logique de validation complexe de formulaires. Grâce aux composants Form et FormItem fournis par Element-UI, nous pouvons facilement créer des formulaires et définir des règles de validation en définissant l'attribut Rules. Pour une logique de vérification complexe, nous pouvons la mettre en œuvre en personnalisant les règles de vérification et les fonctions de vérification. J'espère que cet article sera utile à tout le monde pour comprendre et utiliser Vue et Element-UI pour la vérification des formulaires.

Exemple de code :
Voici un exemple de code complet :

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' } ] } }</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>validateForm() { this.$refs.myForm.validate((valid) =&gt; { if (valid) { this.$message({ type: 'success', message: '表单校验通过' }) } else { this.$message.error('表单校验失败') return false } }) }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>

以上就是使用Vue和Element-UI实现表单的复杂校验逻辑的一些简单介绍和代码示例。希望本文对于读者能够有所帮助，对于Vue和Element-UI有更深层次的理解和应用。谢谢阅读！

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!