VUE 表单验证进阶指南：将表单提升至新高度

2024-02-24 13:13

短信预约 -IT技能 免费直播动态提醒

1. 使用 VUE 内置的表单验证库

VUE 提供了一个内置的表单验证库，您可以使用它来轻松验证表单数据。要使用此库，您需要在您的 VUE 项目中安装 vee-validate 包。安装完成后，您可以在您的组件中使用 vee-validate 指令来验证表单字段。

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="name" type="text" placeholder="姓名" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { defineComponent } from "vue";
import { useVeeValidate, useField } from "vee-validate";

export default defineComponent({
  setup() {
    const { validate, isSubmitting } = useVeeValidate();
    const { value, errorMessage } = useField("name");

    const onSubmit = async (e) => {
      e.preventDefault();

      const isValid = await validate();
      if (isValid) {
        // 表单数据有效，提交表单
        console.log(value);
      } else {
        // 表单数据无效，显示错误信息
        console.error(errorMessage);
      }
    };

    return { validate, isSubmitting, value, errorMessage, onSubmit };
  },
});
</script>

在这个组件中，我们使用 v-model 指令将 name 输入框与 name 数据属性绑定在一起，并使用 vee-validate 指令来验证 name 输入框。当用户提交表单时，我们会调用 validate() 方法来验证表单数据。如果表单数据有效，我们会提交表单，否则我们会显示错误信息。

2. 创建自定义验证规则

VUE 内置的表单验证库提供了一些常用的验证规则，但您也可以创建自己的自定义验证规则。要创建自定义验证规则，您需要使用 defineRule 方法。

import { defineRule } from "vee-validate";

defineRule("my-custom-rule", (value) => {
  return value.length > 5;
});

在这个示例中，我们创建了一个名为 my-custom-rule 的自定义验证规则。此规则检查值是否大于 5 个字符。您可以使用此规则来验证密码或其他要求长度的字段。

要使用自定义验证规则，您需要在 rules 选项中指定该规则。

<input v-model="password" type="password" placeholder="密码" :rules="passwordRules" />

import { defineComponent } from "vue";
import { useVeeValidate, useField } from "vee-validate";

export default defineComponent({
  setup() {
    const { validate, isSubmitting } = useVeeValidate();
    const { value, errorMessage } = useField("password");

    const passwordRules = {
      required: true,
      min: 6,
      max: 12,
      "my-custom-rule": true,
    };

    const onSubmit = async (e) => {
      e.preventDefault();

      const isValid = await validate();
      if (isValid) {
        // 表单数据有效，提交表单
        console.log(value);
      } else {
        // 表单数据无效，显示错误信息
        console.error(errorMessage);
      }
    };

    return { validate, isSubmitting, value, errorMessage, passwordRules, onSubmit };
  },
});

3. 错误处理

当表单验证失败时，您需要向用户显示错误信息。您可以使用 vee-validate 内置的错误处理组件来轻松实现此目的。

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="name" type="text" placeholder="姓名" />
    <ValidationProvider rules="required" v-slot="{ errors }">
      <input v-model="email" type="email" placeholder="邮箱" />
      <span v-if="errors" class="error">{{ errors[0] }}</span>
    </ValidationProvider>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { defineComponent } from "vue";
import { useVeeValidate } from "vee-validate";

export default defineComponent({
  setup() {
    const { validate, isSubmitting } = useVeeValidate();

    const onSubmit = async (e) => {
      e.preventDefault();

      const isValid = await validate();
      if (isValid) {
        // 表单数据有效，提交表单
        console.log(value);
      }
    };

    return { validate, isSubmitting, onSubmit };
  },
});
</script>

在这个组件中，我们使用 ValidationProvider 组件来包裹 email 输入框。ValidationProvider 组件会自动向 errors 槽传递一个数组，其中包含了所有错误信息。然后，我们可以在 errors 槽中使用 v-if 指令和 span 元素来显示错误信息。

4. 表单提交

当您验证了表单数据并确保其有效后，您就可以提交表单了。您可以使用 submit 事件来提交表单。

<form @submit.prevent="onSubmit">
  <!-- 表单字段 -->
  <button type="submit">提交</button>
</form>

import { defineComponent } from "vue";
import { useVeeValidate } from "vee-validate";

export default defineComponent({
  setup() {
    const { validate, isSubmitting } = useVeeValidate();

    const onSubmit = async (e) => {
      e.preventDefault();

      const isValid = await validate();
      if (isValid) {
        // 表单数据有效，提交表单
        console.log(value);
      }
    };

    return { validate, isSubmitting, onSubmit };
  },
});

在 onSubmit 方法中，我们会首先调用 validate() 方法来验证表单数据。如果表单数据有效，我们会使用 console.log() 方法来打印表单数据。您也可以使用其他方法来提交表单，例如使用 Axios 库来发送 AJAX 请求。