如何使用VeeValidate在Vue.js中进行表单验证

DebugUsery
1,126 阅读10分钟

使用VeeValidate在Vue.js中进行表单验证

随着技术的发展，我们面临着创建现代解决方案的挑战。在浏览器中验证你的表单是最基本的。这可以节省应用资源并改善用户体验。

Vue有其内置的验证功能，但也推荐一些库，如Vee Validate ，经过测试可以在所有的浏览器上运行。

在本教程中，我们将讨论并设置使用vee-validate库进行表单验证。

前提条件

要跟上这篇文章，最好具备以下条件。

  • 安装了[Node]
  • 安装了[Vue]
  • [纱线]
  • 有JavaScript编程的基本知识。
  • Vue的基本知识和实践。
  • 安装了文本编辑器。最好是[VS Code]

为什么要进行客户端验证

客户端验证是必不可少的，因为它为用户提供了即时反馈，从而提高了用户体验。

这反过来又节省了应用程序的资源，因为它消除了响应请求周期过程，从而节省了带宽和时间。

这并不是说服务器端验证不应该在应用程序上执行，客户端验证可以在浏览器中禁用，在客户端和服务器上都执行验证是明智的。

项目设置

确保你的机器上配置了Vue 。用上述命令创建一个新的Vue应用程序。

vue create vue-form-validation

我们将从安装tailwind开始，并设置一个演示模板进行练习。安装tailwind插件

在新创建的资源库中，使用下面的命令安装该插件。

vue add tailwind

让我们创建一个新的组件并设置tailwind模板。从这支笔中复制模板（Tailwind Form Template）的主体元素。

启动服务器并导航到本地端口，你将有一个注册表格。请自由地按照你的喜好来定制它。

介绍一下VeeValidate

VeeValidate是一个有效的验证库。在我们开始使用该库之前，让我们先来探讨一下它。

上述库为我们提供了两种表单验证的方式，即组件和组合API。在本教程中，我们将采用组件的方式。

我们获得了上述组件。

  • 表单组件渲染了一个表单，并包装了所有的表单元素。
  • Field组件代表表单输入并显示任何HTML元素。
  • ErrorMessage组件显示一个字段的错误信息。

让我们定义一下验证过程，看看它与上述组件的关系。

  1. 用Form组件包住你的表单，覆盖默认的表单元素。
  2. 用Field组件替换输入元素，并为该组件添加一个标识符名称。
  3. 添加验证规则。
  4. 处理验证错误。

现在你对库有了基本的了解，让我们深入了解一下验证是如何工作的。

安装Vee Validate库。

yarn add vee-validate@next

安装后，在src文件夹中创建一个空的文件夹插件来设置验证器。

在创建的文件夹中，添加一个新文件。

validation.js

配置该插件。

import { Form as VeeForm, Field as VeeField } from "vee-validate";

export default {
  install(app) {
    app.component("VeeForm", VeeForm);
    app.component("VeeField", VeeField);
  },
};

我们正在导入和注册来自vee-validate库的组件，给它们加上别名，以便不与HTML元素发生冲突。

我们需要让Vue知道我们在使用vee-validate库，更新main.js文件以匹配。

import { createApp } from "vue";
import VeeValidatePlugin from "./plugin/validation";
import App from "./App.vue";
import "./assets/tailwind.css";

const app = createApp(App);

app.use(VeeValidatePlugin);

app.mount("#app");

在我们的模板中，用vee-form组件替换表单元素。

刷新浏览器，看到我们的控制台中没有错误信息，vee-validate已经成功安装。

表单验证

我们要验证我们的第一个输入字段，用户名。

我们应该把我们的输入元素改为vee-field组件，并为我们的Field组件提供一个名称标识符。这个标识符可以帮助我们将该组件与错误信息相匹配。

我们的元素应该匹配。

<vee-field
  name="username"
  id="username"
  class="bg-transparent border-b m-auto block border-gray-500 w-full mb-6text-gray-700 pb-1"
  type="text"
  placeholder=""
/>

由于我们已经完成了表单验证的前两个过程，让我们添加我们的规则。

我们将在全局范围内注册规则，以避免代码重复，但在此之前，我们要导入vee-validate-rule库。

yarn add @vee-validate/rules

规则提供了一个值必须满足的标准列表，它是一个接受输入过程并输出错误信息的函数。我们在我们的validation.js文件中配置这个库。

import {
  Form as VeeForm,
  Field as VeeField,
  defineRule,
  ErrorMessage,
} from "vee-validate";

import { required } from "@vee-validate/rules";

export default {
  install(app) {
    app.component("VeeForm", VeeForm);
    app.component("VeeField", VeeField);
    app.component("ErrorMessage", ErrorMessage);

    defineRule("required", required);
  },
};

为了避免在文件中来回走动，我们从vee-validate导入defineRule和ErrorMessage。这分别用于定义规则和设置错误信息。

我们注册ErrorMessage组件并定义一个必要的规则，该规则确保输入元素必须存在。

defineRule是一个由全局验证器提供的函数。它需要两个参数；一个标识符（这是一个规则名称），和一个用于验证字段值的验证器函数。

让我们回到定义我们的规则。我们将使用被称为schema的ve-validate属性。这将使我们能够把我们的规则外包给一个外部对象。

在你粘贴了tailwind模板的组件中，定义一个模式对象。

<script>
export default {
  name: 'ComponentName', // replace with component-name
  data() {
    return {
      schema: {
        username: 'required'
      }
    }
  }
}
</script>

我们现在可以将我们的对象绑定到表单组件上。

<vee-form :validation-schema="schema">

我们已经完成了第3步。接下来，我们将设置错误组件。

在字段组件下面定义ErrorMessage组件，用一些基本的样式和名称标识符，如下所示。

<ErrorMessage class="text-red-600" name="username" />

注意，组件中的名称必须与模式对象和字段组件中定义的名称一致。

让我们添加一个防护，只在表单提交时启用验证。添加一个由vee-validate提供的提交事件，然后更新表单组件以匹配。

<vee-form :validation-schema="schema" @submit="register" >

我们已经在表单组件中发出了一个注册函数。让我们来定义它。

methods: {
  register(values){
    console.log(values);
  },
};

values参数是由vee-validate库提供的，它存储了表单输入的所有值。当验证返回一个Truthy时，这些值将被记录在控制台中。

在表单中填写用户名元素并提交表单。表单的值应该在控制台中返回。如果你试图让它为空，将返回一个验证错误。

现在我们已经熟悉了验证和ve-validate，让我们来验证其他输入元素。

导入并注册将在我们的表单中使用的规则。更新validation.js文件以匹配。

import {
  Form as VeeForm,
  Field as VeeField,
  defineRule,
  ErrorMessage,
} from "vee-validate";
import {
  required,
  min,
  max,
  alpha_spaces as alphaSpaces,
  email,
  min_value as minVal,
  max_value as maxVal,
  not_one_of as excluded,
  confirmed,
} from "@vee-validate/rules";

export default {
  install(app) {
    app.component("VeeForm", VeeForm);
    app.component("VeeField", VeeField);
    app.component("ErrorMessage", ErrorMessage);

    defineRule("required", required);
    defineRule("min", min);
    defineRule("max", max);
    defineRule("alpha_spaces", alphaSpaces);
    defineRule("email", email);
    defineRule("min_value", minVal);
    defineRule("max_value", maxVal);
    defineRule("excluded", excluded);
    defineRule("country_excluded", excluded);
    defineRule("password_mismatch", confirmed);
  },
};

我们的一些规则都有别名，apha_spaces 和not_one_of 。这样做是为了逃避打针，提高可读性。

现在我们的规则已经到位，打开模板文件并更新input fields 和schema object 。为了更新模式对象，多个规则将用一个管道字符分开。

schema: {
  username: 'required|min:3|max:50|alpha_spaces',
  email: 'required|min:3|max:20|email',
  age: 'required|min_value:1|max_value:100',
  password: 'required',
  password_confirmation: 'password_mismatch:@password',
  country: 'required|country_excluded:Africa',
}

我们可以更新我们的输入元素和ErrorMessage，如上面的用户名例子所示。我们的表单现在应该被验证了。

在更新输入元素时，你会遇到下拉字段的问题。这将给我们一个机会来探索另一个字段的属性；as属性。

它默认为一个输入元素，但允许我们渲染一个根节点。我们更新Country字段来匹配。

<div>
  <label id="country" class="text-xs text-gray-500">
    Country
  </label>
  <vee-field
    as="select"
    name="country"
    class="bg-transparent w-full py-1.5 px-3 text-gray-800 border-b border-gray-500
    transition duration-500 focus:outline-none focus:border-black rounded"
  >
    <option value="USA">USA</option>
    <option value="Mexico">Mexico</option>
    <option value="Germany">Germany</option>
    <option value="Africa">Africa</option>
  </vee-field>
  <ErrorMessage class="text-red-600" name="country" />
</div>

当你检查源中的元素时，它将有一个选择元素属性。我们已经用as属性覆盖了默认的输入元素。

当仍然在国家字段上时，让我们探索一下我们可以用库做什么。从下拉菜单中为该字段设置一个默认选项。

这是通过使用initialValues属性实现的。它发送了一个包含字段名作为键和它们的值的对象。

在我们的模式对象之后定义一个对象userData。

userData: {
  country: 'USA',
},

更新ve-form组件以匹配上述内容。

<vee-form :validation-schema="schema" @submit="register" :initial-values="userData" >

请注意，我们正在将初始值绑定到包含键值属性的对象userData上。该对象的值将被设置为下拉菜单中的默认选择元素。

自定义错误信息

Vee-validate为我们提供了其默认的错误信息，但我们可以覆盖它以匹配我们的自定义信息。configure函数将帮助我们实现这一任务。

安装该函数。

import {
  Form as VeeForm,
  Field as VeeField,
  defineRule,
  ErrorMessage,
  configure,
} from "vee-validate";

现在让我们创建我们的自定义规则，在用defineRule注册的最后一条规则之后，添加configure函数。

configure({
  generateMessage: (context) => {
    const messages = {
      required: `This field ${context.field} is required.`,
      min: `This field ${context.field} is too short.`,
      max: `This field ${context.field} is too long.`,
      alpha_spaces: `This field ${context.field} can only contain letters and spaces.`,
      email: `This field ${context.field} is not a valid email.`,
      min_value: `This field ${context.field} is too low.`,
      max_value: `This field ${context.field} is too high.`,
      excluded: "This field is not allowed.",
      country_excluded: "We do not allow users from this location",
      password_mismatch: `This field ${context.field} does not match.`,
    };
    const message = messages[context.rule.name]
      ? messages[context.rule.name]
      : `The field ${context.field} is invalid`;
    return message;
  },
});

configure functions ，接受一个参数context并存储一个消息，该消息覆盖了默认的错误信息。上下文参数存储输入名称。

我们有三元运算符，可以返回自定义的错误信息。

验证触发器

验证发生在某些触发器上。

在configure函数中的generateMessage对象之后注册它。这也是由configure函数提供的。

  • ValidateOnBlur发生在输入元素的模糊事件之后。
  • ValidationOnChange发生在变化事件之后。
  • ValidationOnInput发生在一个字段值被改变之后。
  • ValidationOnModelUpdate发生在表单提交之后。

在configure函数中，在generateMessage对象之后，添加下面的代码。

validateOnBlur: true,
validateOnChange: true,
validateOnInput: false,
validateOnModelUpdate: true,

你可以通过设置你的自定义布尔输入来自由地定制验证触发器，这只是我的偏好。

添加一个警报信息

禁止客户提交垃圾表单是一个最佳做法。一个用户不应该多次提交一个表单。

在我们的组件中，用上述属性更新我们的数据。在userData对象后面添加属性。

reg_in_submission: false,
reg_show_alert: false,
reg_alert_variant: 'bg-indigo-500',
reg_alert_message: 'Please wait! Account is being registered.',

这些是我们设置的属性，当表单处于验证过程中时，禁止警告元素的显示。用定义的属性更新警报元素。

<div class="shadow-lg mt-3 pt-3 pb-3 w-full text-white text-center
  hover:bg-indigo-400 rounded-full cursor-pointer"
  v-if="reg_show_alert"
  :class="reg_alert_variant"
>
  {{ reg_alert_msg }}
</div>

我们使用v-if 指令来切换警报信息（如果设置为布尔值）和v-bind来显示我们的tailwind属性。在register函数中定义属性，更新它以匹配。

register(values) {
  this.reg_show_alert = true;
  this.reg_in_submission = true;
  this.reg_alert_variant = 'bg-indigo-500';
  this.reg_alert_msg = 'Please wait! Your account is being created.';

  this.reg_alert_variant = 'bg-blue-500';
  this.reg_alert_msg = 'Success! Your account has been created.';

  console.log(values);
},

我们已经定义了警报属性和消息，但没有把它包含在我们的表单中。更新我们的按钮元素以匹配。

<button
  :disabled="reg_in_submission"
  class="shadow-lg mt-3 pt-3 pb-3 w-full text-white bg-indigo-500
  hover:bg-indigo-400 rounded-full cursor-pointer "
  type="submit"
  value="Create account"
  >
  Create Account
</button>

在提交时，表单将被禁用，以避免多次提交表单，并将显示一个警报信息。表单的输入值也将作为一个对象被记录在控制台中。

总结

我们已经了解了vue中的表单验证，以及如何使用vee-validate库来实现它。

avatar
文章
阅读
粉丝