Comment utiliser vue et Element-plus pour implémenter la validation dynamique et les invites de formulaires

Comment utiliser Vue et Element Plus pour implémenter la vérification dynamique et les invites des formulaires

Introduction :
Les formulaires sont l'une des méthodes d'interaction courantes dans les pages Web, et la vérification des formulaires et les invites sont la clé pour garantir la légalité des données et l'expérience utilisateur . Vue est un framework JavaScript populaire et Element Plus est la bibliothèque de composants d'interface utilisateur de Vue. Leur combinaison peut grandement simplifier la validation des formulaires et les invites. Cet article expliquera comment utiliser Vue et Element Plus pour implémenter la validation dynamique et les invites de formulaires, et fournira des exemples de code correspondants.

1. Installez Vue et Element Plus
Avant de commencer, nous devons d'abord installer Vue et Element Plus. Si vous ne les avez pas encore installés, vous pouvez suivre les étapes ci-dessous pour le faire.

1. Installer Vue
   Vous pouvez utiliser npm ou Yarn pour installer Vue. Ouvrez le terminal et exécutez la commande suivante :

   npm install vue

   Copier après la connexion

   ou

   yarn add vue

   Copier après la connexion

2. Install Element Plus
   Utilisez également npm ou Yarn pour installer Element Plus. Exécutez la commande suivante :

   npm install element-plus

   Copier après la connexion

   ou

   yarn add element-plus

   Copier après la connexion

2. Créer des composants de formulaire
Dans Vue, nous construisons des applications en créant des composants. Voici un exemple de composant de formulaire utilisant Element Plus :

<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单处理
        } else {
          // 验证不通过
          return false;
        }
      });
    },
  },
}
</script>

Dans ce code, nous utilisons le el-form et le el-form-item fournis par Element Plus. Composants pour construire le formulaire. Grâce à la directive v-model et à l'objet de données formData, une liaison bidirectionnelle des données du formulaire peut être réalisée. En parallèle, nous avons défini l'objet rules pour spécifier les règles de validation des éléments du formulaire. el-form和el-form-item组件来构建表单。通过v-model指令和formData数据对象，可以实现对表单数据的双向绑定。同时，我们定义了rules对象来指定表单项的验证规则。

三、表单验证和提示
在上述代码中，我们使用了Vue的表单验证机制来实现表单的动态验证和提示。在点击提交按钮时，通过调用this.$refs.form.validate方法进行表单验证。如果验证通过，可以执行表单提交的逻辑；如果验证不通过，可以给用户相应的提示。

在验证的规则中，我们可以指定验证的方式（例如：blur表示失去焦点时验证）、错误提示信息、以及其他验证选项。当用户输入表单时，验证规则会被实时触发，如果不满足规则要求，则会出现相应的错误提示。

四、使用其他验证方式
除了上述示例中使用的blur方式之外，我们还可以通过其他方式来进行表单验证。下面是一些常用的验证方式：

• change：输入内容改变时验证。
• submit：表单提交时验证。
• input：实时验证，每次输入内容时都会触发验证。

在验证规则的trigger

Dans le code ci-dessus, nous utilisons le mécanisme de validation de formulaire de Vue pour implémenter la vérification dynamique et les invites du formulaire. Lorsque vous cliquez sur le bouton Soumettre, la validation du formulaire est effectuée en appelant la méthode this.$refs.form.validate. Si la vérification réussit, la logique de soumission du formulaire peut être exécutée ; si la vérification échoue, l'utilisateur peut recevoir des invites correspondantes.

🎜change : vérifiez lorsque le contenu d'entrée change. 🎜🎜submit : Vérifiez quand le formulaire est soumis. 🎜🎜input : Vérification en temps réel, la vérification sera déclenchée à chaque fois que vous saisirez du contenu. 🎜

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!