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 :

d477f9ce7bf77f53fbcf36bec1b69b7a
a51093cfdf79e73df1581bd23e14a5ff

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2
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 :

d54d53f6a5c7f336aa11f639e29f6cfc
f498470e5795abbb811a5ba58e19a1153950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
188bc5ba182c1014d86fa43f3b857446
0fef7dbb813f9e81977b6ba14582c5ba3950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
c2f8c4c8a4cbc94386c40c1635daeccb
8f4226748e5b021d2e67e8e4541dcc883950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
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 :

d477f9ce7bf77f53fbcf36bec1b69b7a

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
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' }
    ]
  }
}

},
methods: {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

以上就是使用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!