简介
dg-form-validator 是一款针对前端表单数据校验的 npm 包，支持常见数据类型的校验和自定义校验规则。在前端项目中，表单数据校验是常见需求，dg-form-validator 可以帮助开发者快速地创建表单校验规则，提高开发效率。
安装
使用 npm 进行安装：
--- ------- ----------------- ------
使用方法
dg-form-validator 提供了两种使用方法：函数式调用和对象式调用。下面分别介绍这两种用法。
函数式调用
函数式调用是将校验规则定义成一个函数，再将需要校验的数据作为参数传入，返回校验结果。函数的第一个参数是需要校验的数据，第二个参数是一个校验规则对象。校验规则对象的属性和值都为字符串类型，其中属性为需要校验的数据类型，值为校验规则，用竖线分隔多个规则。
----- - -------- - - -----------------------------
-------- ---------------------- -
----- ----- - -
--------- ------------------------
--------- -----------------------
--
----- -------- - -
-------------------- ----------
--------------- ----------------
--------------- -----------------
-------------------- ---------
--------------- ---------------
--------------- ---------------
--
----- ------ - ------------------ ------ ----------
-- -------- -
-- ------
- ---- -
-- ----
-
-这里定义了一个 validateForm 函数，函数的参数是表单数据 formData。在函数内部，首先定义了校验规则 rules，其中有两个属性，分别为 username 和 password，值为校验规则字符串。在定义校验规则时，可以用竖线分隔多个规则，每个规则的含义如下：
- required：必填
- email：邮箱
- url：URL
- numeric：数字
- alpha：字母
- alphaNum：字母或数字
- min:length：长度不能小于规定的值
- max:length：长度不能大于规定的值
校验规则后面还可以跟上自定义错误消息，用竖线分隔。例如：
----- ----- - - --------- ----------------------------------------------------------- --------- -------------------------------------------------------- --
校验规则定义完成后，需要定义错误提示信息 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