Comment utiliser Vue et Element-UI pour la vérification des données et la validation des formulaires

Comment utiliser Vue et Element-UI pour la vérification des données et la validation des formulaires

Introduction :
Dans le processus de développement d'applications Web, la validation des formulaires est une partie très importante. Il garantit que les données saisies par l'utilisateur sont conformes au format et aux exigences attendus, améliorant ainsi la stabilité de l'application et la précision des données. Vue.js est actuellement un framework JavaScript très populaire, et Element-UI est un ensemble de bibliothèques de composants d'interface utilisateur basées sur Vue.js, qui fournit une multitude de composants de formulaire et de méthodes de vérification pour faciliter la vérification des formulaires par les développeurs. Cet article expliquera comment utiliser Vue et Element-UI pour la vérification des données et la validation des formulaires, et joindra des exemples de code correspondants.

1. Installez Element-UI et configurez le projet Vue
Tout d'abord, nous devons installer Element-UI et configurer le projet Vue. Element-UI peut être installé via la commande suivante :

npm install element-ui --save

Ensuite, introduisez Element-UI dans le fichier main.js :

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Utilisation de base de la vérification de formulaire
Element-UI fournit une série de méthodes et d'instructions de vérification. La validation du formulaire peut être effectuée facilement. Ce qui suit est un exemple simple montrant comment utiliser Element-UI pour la validation de formulaire de base :

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <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="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
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: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单
          console.log('表单验证通过');
        } else {
          // 表单验证不通过
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

Dans le code ci-dessus, nous utilisons le composant el-form pour envelopper deux composants el-form-item, où el-input est Element - Composant de zone de saisie fourni par l'interface utilisateur. Grâce à la liaison bidirectionnelle de l'instruction v-model et des données du formulaire, la mise à jour synchrone de la zone de saisie et des données du formulaire est réalisée.

Dans l'option données, nous définissons les données et les règles de validation du formulaire. Les règles de validation sont transmises au composant el-form via l'attribut Rules, spécifiant les règles de validation pour chaque champ. Dans l'exemple ci-dessus, nous avons défini les règles requises et les règles de longueur pour les champs nom d'utilisateur et mot de passe.

Dans la méthode submitForm, nous appelons la méthode this.$refs.form.validate pour la vérification du formulaire. Cette méthode renverra une valeur booléenne indiquant si la validation du formulaire réussit. Si la vérification réussit, nous pouvons soumettre les données du formulaire ; si la vérification échoue, nous pouvons empêcher la soumission du formulaire.

Dans la méthode resetForm, nous utilisons la méthode this.$refs.form.resetFields pour réinitialiser les données du formulaire.

Ce qui précède est l'utilisation de base de l'utilisation d'Element-UI pour la validation de formulaire.

3. Règles de vérification personnalisées
En plus d'utiliser les règles de vérification fournies par Element-UI, nous pouvons également personnaliser les règles de vérification. Voici un exemple de règle de vérification de numéro de téléphone mobile personnalisée :

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: this.validatePhone, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      const reg = /^1[3|4|5|7|8][0-9]d{8}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('手机号码格式不正确'));
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单
          console.log('表单验证通过');
        } else {
          // 表单验证不通过
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

Dans le code ci-dessus, nous spécifions la méthode de vérification validatePhone à l'aide de l'attribut validateur en ajoutant une règle de vérification personnalisée. Dans la méthode validatePhone, nous utilisons des expressions régulières pour déterminer si le numéro de téléphone mobile répond aux exigences. Si la vérification réussit, nous appelons callback(); si la vérification échoue, nous appelons callback(new Error('Le format du numéro de téléphone mobile est incorrect). ')).

Grâce aux exemples de code ci-dessus, nous pouvons voir que Vue et Element-UI fournissent un mécanisme complet de vérification de formulaire qui peut répondre à la plupart des besoins de vérification. L'utilisation de Vue et Element-UI pour la vérification des données et la validation des formulaires peut rendre notre travail de développement plus efficace et plus simple. J'espère que cet article pourra vous aider, merci d'avoir lu !

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!