在前端开发中，数据校验是非常重要的一环。而 validate 是一个非常优秀的 JavaScript 数据校验库，它可以对数据进行正则匹配、类型判断、长度校验、区间校验等常见的校验操作，甚至还可以自定义校验规则，符合多场景的需求。
下面我们来了解一下 validate 库的使用方法。
安装
使用 npm 安装即可：
--- ------- -------- ------
使用
基本用法
使用方式非常简单，如下是一个非常简单的使用示例：
----- -------- - ------------------- ----- ------ - - - ---- ------- -------- ----- --------- ---- -- - ---- -------- -------- ----- --------- ----- ----- ------- - - ----- ------ - ---------- ----- ------- ------ ------------------ -- ------- -------------------
上述代码中，我们引入了 validate 库，然后定义了一个 config 数组，用于存放校验规则。其中每个数组项包括 key、display、required 和 rule 四个属性：
- key：待校验的属性名。
- display：展示的属性名，一般用于错误提示信息。
- required：是否必须填写。
- rule：校验规则，支持内置规则和自定义规则。
然后我们调用 validate 函数，传入两个参数：待校验的数据和校验规则，即可得到一个校验结果对象 result。结果对象包括以下几个属性：
- error：校验错误信息，如果校验无误则为空。
- errorMessage：错误提示信息，一般用于表单提示，包括展示名和错误信息。
- success：校验结果，如果校验成功则为 true，否则为 false。
内置规则
validate 库内置了十几种常用的校验规则，我们直接使用即可。这些规则包括以下几种：
- required：必填项校验。
- email：邮箱格式校验。
- url：URL 格式校验。
- date：日期格式校验。
- dateBefore：时间早于某个时间校验。
- dateAfter：时间晚于某个时间校验。
- number：数字类型校验。
- integer：整数类型校验。
- float：浮点数类型校验。
- minLength：最少字符数校验。
- maxLength：最多字符数校验。
- min：最小值校验。
- max：最大值校验。
- between：区间值校验。
- digits：只能包含数字校验。
- alpha：只能包含字母校验。
- alphaNumeric：只能包含字母和数字校验。
下面我们来看一个示例，用于校验电子邮箱格式：
----- ------ - - - ---- -------- -------- ----- --------- ----- ----- ------- - - ----- ------ - ---------- ------ ------------------ -- ------- -------------------
校验结果如下：
- ------ ----- ------------- ---------- -------- ----- -
自定义规则
除了内置的校验规则以外，我们还可以自定义校验规则。例如，我们想要校验一个数字是否是偶数，我们就可以自定义一个校验规则：
-------------------------- - --------------- -------- ---- ----------- -
-- ------- - -- --- -- -
------ ----
- ---- -
------ -------
-
-上述代码中，我们定义了一个校验规则 isEven，传入四个参数：value、options、key 和 attributes。其中 value 表示待校验的值，options 表示自定义参数，key 表示待校验的属性名，attributes 表示待校验的数据对象。
在自定义校验规则中，我们可以做任何判断，最后返回 null 表示校验成功，返回错误提示信息表示校验失败。
自定义规则定义完成以后，我们就可以在 config 中使用了：
----- ------ - - - ---- --------- -------- ----- --------- ----- ----- -------- - - ----- ------ - ---------- ------- - -- ------- -------------------
上述代码中，我们在 config 中使用了自定义规则 isEven，用于校验数字是否是偶数。当传入数字 5 时，则校验失败，返回以下结果：
- ------ -------- ------------- ---------- -------- ----- -
总结
validate 校验库非常优秀、方便，并且可以自定义规则，非常适用于前端数据校验。在使用时，我们需要先定义 config 校验规则，然后传入数据和 config 规则调用 validate 函数，最后根据校验结果进行后续操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/161348