Comment implémenter la validation de formulaire et la vérification des données dans uniapp

Comment implémenter la validation de formulaire et la validation des données dans uniapp

Résumé : Dans le développement d'uniapp, la validation de formulaire et la validation des données sont une partie essentielle. Cet article présentera en détail comment implémenter la validation de formulaire et la vérification des données dans uniapp, et fournira des exemples de code spécifiques.

1. Présentation du plug-in uni-validate

uni-validate est un plug-in de vérification de formulaire officiellement fourni par uniapp, qui peut facilement implémenter la vérification de formulaire et la vérification des données. Tout d'abord, ajoutez le code d'introduction du plug-in uni-validate dans les dépendances du fichier package.json dans le répertoire racine du projet uniapp :

"dependencies": {
...
"uni-validate": "^1.0.0 "
}

Ensuite, exécutez la commande npm install dans le répertoire racine du projet pour installer le plug-in :

npm install uni-validate --save

Deuxièmement, introduisez et utilisez le plug uni-validate -in dans la page

Lorsque vous devez utiliser la validation du formulaire et dans la page de vérification des données, introduisez d'abord le plug-in uni-validate :

importez uniValidate depuis '@/uni_modules/uni-validate/index.js'

Créez ensuite un objet règle de validation de formulaire dans les données de la page, par exemple :

data() {
return {

formRules: {
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    ...
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    ...
  ],
  ...
},
formData: {
  username: '',
  password: '',
  ...
},

}
},

Ensuite, ajoutez une méthode de validation de formulaire dans les méthodes de la page :

méthodes : {
// Soumission du formulaire
formSubmit() {

this.$refs['form'].validate(valid => {
  if (valid) {
    // 表单验证通过，执行表单提交操作
    ...
  } else {
    // 表单验证不通过，弹出提示
    uni.showToast({
      title: '请填写必填项',
      icon: 'none'
    })
  }
})

}
}

Enfin, dans le modèle de la page, ajoutez les règles de validation correspondantes sur le composant d'entrée qui nécessite la validation du formulaire, par exemple :

Soumettre dans le formulaire Ajoutez un événement de clic sur le composant bouton :

Soumettre

3. Exemple de code

Ce qui suit est un exemple de code complet, montre comment utiliser le plug-in uni-validate pour implémenter la validation de formulaire et la vérification des données dans uniapp :

// index.vue

<input v-model="formData.username" :rules="formRules.username" placeholder="请输入用户名" />
<input v-model="formData.password" :rules="formRules.password" placeholder="请输入密码" />
<button form-type="submit" @click="formSubmit">提交</button>

<script><br>importer uniValidate depuis '@/uni_modules/uni-validate/index.js'</script>

export default {
data() {

return {
  formRules: {
    username: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
  },
  formData: {
    username: '',
    password: '',
  },
}

},
méthodes : {

// 表单提交
formSubmit() {
  this.$refs['form'].validate(valid => {
    if (valid) {
      // 表单验证通过，执行表单提交操作
      console.log('表单验证通过')
    } else {
      // 表单验证不通过，弹出提示
      uni.showToast({
        title: '请填写必填项',
        icon: 'none'
      })
    }
  })
}

}
}

Résumé : En introduisant le plug-in uni-validate et en le combinant avec l'objet de règle de validation de formulaire , les fonctions de validation de formulaire et de vérification des données peuvent être facilement implémentées dans uniapp. Grâce aux exemples de code ci-dessus, vous pouvez appliquer rapidement et ajuster de manière flexible les fonctions de validation de formulaire et de validation de données dans votre projet Uniapp.

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!