前言
在前端开发中，表单验证是非常重要的一环。为了方便开发者使用，社区中出现了很多类似的 npm 包，其中之一就是 validation-z。
本文将详细介绍 validation-z 包的使用方法，包括配置、校验规则、错误信息等，以及示例代码。
安装
使用 npm 安装 validation-z，输入以下命令：
npm install --save validation-z
使用方法
创建一个校验实例
首先，需要创建一个校验实例。通过 require 引入模块，然后实例化校验器对象：
const Validator = require('validation-z');
const validator = new Validator();配置校验规则
接下来，需要为表单项（或者任何需要校验的字段）配置校验规则。可以使用 rules 方法和 attach 方法来设置校验规则。例如：
validator.rules('name', 'required|min:4|max:10')
.rules('email', 'required|email')
.attach('name', 'Username')
.attach('email', 'Email Address');以上代码将 name 字段设为必填，长度在 4-10 之间；email 字段设为必填且格式为邮箱地址。同时给字段 name 和 email 配置了中文标签，方便验证错误信息提示。
对理论方法挂载正则校验规则或自定义方法
这一步是可选的，如果自能提供默认规则内置规则已经无法满足自己的校验需求，可以通过 extend 方法，自定义正则表达式或验证方法。例如：
validator.extend('phone', (value) => {
const reg = /^1[3-9]\d{9}$/;
return reg.test(value);
}, 'The :attribute phone number format is invalid.');以上代码向 validator 添加了 phone 校验规则，规则内容为验证手机号码格式是否正确。
校验表单数据
完成以上配置后，即可通过 validate 方法校验表单数据：
const data = {
name: 'user1',
email: 'user1@mail.com',
phone: '11111111111'
};
const validation = validator.validate(data);validate 方法返回的是一个 Promise 对象。可以在 then 方法里面拿到校验结果：
validation.then(result => {
if (result.success === false) {
console.log(result.errors);
}
});以上代码会输出每个表单项的错误信息。
示例代码
-- -------------------- ---- -------
----- --------- - ------------------------
----- --------- - --- ------------
----------------------- ------------------------
--------------- -----------------
--------------- -----------
---------------- ------ ---------
---------------- ------- -- -
----- --- - ----------------
------ ----------------
-- ---- ---------- ----- ------ ------ -- -----------
----- ---- - -
----- --------
------ -----------------
------ -------------
--
----- ---------- - -------------------------
---------------------- -- -
-- --------------- --- ------ -
---------------------------
- ---- -
----------------------- ---------
-
---总结
通过本文的介绍，相信你已经掌握了 validation-z 包的基本用法。希望本文能对你的前端技术学习和实践有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005603e81e8991b448de6c3