vuelidate

Vuelidate 是一个轻量级的表单验证库，专门为 Vue.js 设计，提供简单而灵活的方式来验证表单输入。它可以与 Vue2 和 Vue3 一起使用，并且支持各种常见的验证规则，例如必填字段、最小和最大长度、模式匹配等。

基本使用

首先安装这个库：

bash

npm install @vuelidate/core @vuelidate/validators

安装的版本信息：

"@vuelidate/core": "^2.0.3"
"@vuelidate/validators": "^2.0.4"

基础使用核心代码：

const v$ = useVuelidate(rules, state)

// 提交表单的处理函数
function submitForm() {
  v$.value.$touch()
  if (v$.value.$invalid) {
    console.log('Form is invalid')
  } else {
    console.log('Form is valid')
  }
}

重要的代码解释：

// 创建一个表单验证的实例对象
const v$ = useVuelidate(rules, state)

这行代码调用 useVuelidate 函数，将验证规则 rules 和验证状态 state 作为参数传入，并将返回的验证对象赋值给 v$ 变量。

v$ 是一个代理对象，包含了所有表单字段的验证状态，另外还有一系列的属性和方法，用于检查和操作验证状态。

// 触发验证
v$.value.$touch()

$touch( ) 方法用于标记所有验证规则为 “已触摸” 状态。这个方法通常在提交表单时调用，以触发所有字段的验证。

v$.value.$invalid

$invalid 用于表示整个表单是否无效。如果表单中有任何一个字段不符合验证规则，$invalid 属性将为 true。

有哪些规则？

required: 字段必须填写。
minLength: 字段值的最小长度。
maxLength: 字段值的最大长度。
minValue: 字段值的最小数值。
maxValue: 字段值的最大数值。
between: 字段值必须在指定的数值范围内。
alpha: 字段值只能包含字母。
alphaNum: 字段值只能包含字母和数字。
numeric: 字段值必须是数字。
integer: 字段值必须是整数。
decimal: 字段值必须是小数。
email: 字段值必须是有效的电子邮件地址。
ipAddress: 字段值必须是有效的 IP 地址。
macAddress: 字段值必须是有效的 MAC 地址。
url: 字段值必须是有效的 URL 地址。
sameAs: 字段值必须与另一个字段的值相同。
or: 多个验证规则中至少一个为 true。
and: 多个验证规则必须都为 true。
not: 验证规则必须为 false。
requiredIf: 字段必须在某个条件为 true 时填写。
requiredUnless: 字段必须在某个条件为 false 时填写。

你可以在 Vuelidate官方文档看到每一条规则的说明。

实战案例

用户注册的实战案例，在这个案例里面，尽可能多的用到 Vuelidate 里面的验证规则，并且显示自定义中文提示。

其他细节

1. 使用正则

在 Vuelidate 里面可以通过 helpers.regex 来创建一个自定义的正则验证器。

const phoneNumberWithMessage = helpers.withMessage(
  '必须是一个有效的电话号码',
  helpers.regex(/^1[3-9]\d{9}$/)
)

const rules = {
  phoneNumber: {
    required: requiredWithMessage,
    numeric: numericWithMessage,
    phoneNumber: phoneNumberWithMessage
  },
}

2. 自定义验证规则

通过 helpers 可以自定义验证规则。

更多进阶用法可以参阅官方文档：https://vuelidate-next.netlify.app/advanced_usage.html

-EOF-

vuelidate ​

vuelidate