在前后端分离的应用架构中，表单验证是必不可少的一步。在 Vue 的单页面应用中，使用插件或者自己手写验证逻辑都是可行的方式。本文将详细介绍如何使用 Vuelidate 插件进行表单数据的校验。
Vuelidate 简介
Vuelidate 是一个轻量级的表单验证插件，能够与 Vue.js 紧密结合，根据表单的值和状态生成错误消息。它不依赖任何第三方库，体积小巧，易于使用。
安装 Vuelidate
使用 npm 安装 Vuelidate：
npm install vuelidate --save
然后，我们需要在 main.js 中导入 Vuelidate：
import Vuelidate from 'vuelidate' Vue.use(Vuelidate)
在 Vue 组件中使用 Vuelidate
Vuelidate 会在 Vue 组件中添加 $v 属性，该属性包含了表单验证的状态和错误信息。在表单中使用 Vuelidate 需要两个步骤：
在 data 中定义表单中的数据，例如：
data () { return { name: '', age: '' } }在 computed 中定义每一个数据的验证规则，例如：
-- -------------------- ---- ------- --------- - ---------- -- - ----- ------ - -- -- ---------------------- ------ ------ ---------------------- -- --------------------- ----------------------- -- ------------------------- ------ ------ -- --------- -- - ----- ------ - -- -- --------------------- ------ ------ --------------------- -- --------------------- -------------------- -- ---------------------- --------------------- -- ------------------------- ------ ------ - --在上述代码中，我们使用了 $dirty 属性来判断每一个数据是否已经被触摸，如果没有被触摸，则不会显示错误信息。同时，我们还定义了每个数据的具体验证规则，并通过 push() 方法将错误信息放入数组中返回。
在 template 中编写表单，并引用 computed 中的错误信息，例如：
-- -------------------- ---- ------- ----- ------ --------------------- ------ --------- ------------------------------ ---- ------------------------ ---------------------- ---- ------------ -- ----------- ------------- -- ----- -- ------ ------ ------ ----- ------ -------------------- ------ -------- ------------------------------- ---- ----------------------- ---------------------- ---- ------------ -- ---------- ------------- -- ----- -- ------ ------ ------在上述代码中，我们使用了 v-model.trim 和 v-model.number 来限制用户输入的内容并转换为正确的数据类型。同时，我们将 computed 中的错误信息通过 v-for 循环遍历来输出错误信息。
Vuelidate 常用的验证规则
Vuelidate 内置了许多常用的表单验证规则，例如：
- required - 必填项
- minLength - 最小长度
- maxLength - 最大长度
- minValue - 最小值
- maxValue - 最大值
- numeric - 数值类型
- email - 电子邮件格式
- alpha - 纯字母格式
- alphaNum - 字母或数字格式
详情请参考官方文档（https://vuelidate.js.org）。
总结
Vuelidate 是一个强大的表单验证插件，能够简化表单验证的代码，提高开发效率，让我们的表单更加规范和安全。希望本文能够帮助读者更好地理解 Vuelidate 的使用方法，并应用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a55aa448841e98941e6795