简介
dg-form-validator 是一款针对前端表单数据校验的 npm 包，支持常见数据类型的校验和自定义校验规则。在前端项目中，表单数据校验是常见需求，dg-form-validator 可以帮助开发者快速地创建表单校验规则，提高开发效率。
安装
使用 npm 进行安装：
npm install dg-form-validator --save
使用方法
dg-form-validator 提供了两种使用方法：函数式调用和对象式调用。下面分别介绍这两种用法。
函数式调用
函数式调用是将校验规则定义成一个函数，再将需要校验的数据作为参数传入，返回校验结果。函数的第一个参数是需要校验的数据，第二个参数是一个校验规则对象。校验规则对象的属性和值都为字符串类型，其中属性为需要校验的数据类型，值为校验规则，用竖线分隔多个规则。
-- -------------------- ---- ------- ----- - -------- - - ----------------------------- -------- ---------------------- - ----- ----- - - --------- ------------------------ --------- ----------------------- -- ----- -------- - - -------------------- ---------- --------------- ---------------- --------------- ----------------- -------------------- --------- --------------- --------------- --------------- --------------- -- ----- ------ - ------------------ ------ ---------- -- -------- - -- ------ - ---- - -- ---- - -展开代码
这里定义了一个 validateForm 函数，函数的参数是表单数据 formData。在函数内部，首先定义了校验规则 rules，其中有两个属性，分别为 username 和 password，值为校验规则字符串。在定义校验规则时，可以用竖线分隔多个规则，每个规则的含义如下：
- required：必填
- email：邮箱
- url：URL
- numeric：数字
- alpha：字母
- alphaNum：字母或数字
- min:length：长度不能小于规定的值
- max:length：长度不能大于规定的值
校验规则后面还可以跟上自定义错误消息，用竖线分隔。例如：
const rules = { username: 'required|min:6|max:20|项不能为空|用户名长度不能小于6个字符|用户名长度不能大于20个字符', password: 'required|min:8|max:20|项不能为空|密码长度不能小于8个字符|密码长度不能大于20个字符' };
校验规则定义完成后，需要定义错误提示信息 messages，其中的属性名是校验规则和字段名的组合，属性值是错误提示信息。
最后调用 validate 函数，将 formData、rules 和 messages 作为参数，返回校验结果，即表单数据中存在错误时返回一个对象，否则返回 null。
对象式调用
对象式调用是将校验规则定义成一个包含字段名、校验规则和错误提示信息的对象，再将需要校验的数据作为参数传入，返回校验结果。校验规则对象的属性是需要校验的字段名，值为包含校验规则和错误提示信息的对象。其中校验规则和错误提示信息的定义同函数式调用。
-- -------------------- ---- ------- ----- - --------- - - ----------------------------- -------- ---------------------- - ----- --------- - --- ----------- --------- - ------ ------------------------ --------- - ----------- ---------- ------ ---------------- ------ ---------------- - -- --------- - ------ ------------------------ --------- - ----------- --------- ------ --------------- ------ --------------- - - --- ----- ------ - ----------------------------- -- -------- - -- ------ - ---- - -- ---- - -展开代码
这里同样定义了一个 validateForm 函数，函数的参数是表单数据 formData。在函数内部，首先创建了一个 Validator 对象，通过传入规则对象来定义校验规则和错误提示信息。
最后调用 validate 方法将 formData 作为参数传入，返回校验结果，与函数式调用方式一样，表单数据中存在错误时返回一个对象，否则返回 null。
示例代码
下面给出一个完整的示例代码，演示 dg-form-validator 的使用方法：
-- -------------------- ---- ------- ----- - --------- --------- - - ----------------------------- -------- ------------------------------- - ----- ----- - - ------ ----------------- --------- ----------------------- -- ----- -------- - - ----------------- --------- -------------- ---------- -------------------- --------- --------------- --------------- --------------- --------------- -- ----- ------ - ------------------ ------ ---------- -- -------- - -------------------- - ---- - -------------------- - - ----------------------- ------ -------------- --------- ---------- --- -------- ----------------------------- - ----- --------- - --- ----------- ------ - ------ ----------------- --------- - ----------- --------- -------- --------- - -- --------- - ------ ------------------------ --------- - ----------- --------- ------ --------------- ------ --------------- - - --- ----- ------ - ----------------------------- -- -------- - -------------------- - ---- - -------------------- - - --------------------- ------ -------------- --------- ---------- ---展开代码
这里定义了两个测试函数，分别是 testFunctionValidator 和 testObjectValidator。这两个函数分别演示了 dg-form-validator 的函数式调用和对象式调用两种使用方法。在两个函数内部，均定义了校验规则和错误提示信息，并用 validate 函数或 Validator 对象的 validate 方法进行了校验，输出了验证结果。
总结
dg-form-validator 是一款方便实用的校验库，能够帮助开发者减轻表单验证带来的工作量，提高开发效率。在实际项目中，开发者可以结合实际情况，根据自己的需要选择函数式调用和对象式调用这两种使用方法，能够满足不同的校验需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668ead9381d61a3540c20
