在前端开发中，表单验证是非常常见的需求，而手动实现表单验证会很麻烦且冗长。这时候我们就可以使用 peregrine-validator 这个 npm 包来简化表单验证的处理。
安装 peregrine-validator
首先我们需要在项目中安装 peregrine-validator 包。在命令行输入以下命令即可进行安装：
npm install peregrine-validator
安装完成后，我们就可以在项目中使用 peregrine-validator 进行表单验证的处理。
基本用法
引入 peregrine-validator
我们需要在需要使用 peregrine-validator 的文件中引入该包，示例如下：
// CommonJS 引入方式 const Validator = require('peregrine-validator') // ES6 模块化引入方式 import Validator from 'peregrine-validator';
创建实例
在引入 peregrine-validator 包后，我们可以通过创建一个实例来对表单进行验证。示例如下：
const validator = new Validator();
添加验证规则
peregrine-validator 提供了一些常用的验证规则，如 required、email、minLength 等。我们可以通过 addRule 方法来添加我们需要的验证规则：
validator.addRule('email', (value) => { const emailRegex = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/; return emailRegex.test(value); });
这个例子中，我们添加了一个邮箱验证的规则，如果验证失败，返回 false。
执行验证
在添加验证规则完成后，我们可以通过 isValid 方法来判断表单是否通过验证。该方法接收两个参数，第一个参数是表单的所有字段组成的对象，第二个参数是我们需要验证的字段名称。
const formData = { name: 'peregrine', email: 'peregrine@npm.com', age: '20' }; const isEmailValid = validator.isValid(formData, 'email');
该方法会返回一个布尔值，表示验证是否通过。
高级用法
上面的例子只是一个简单的示例，实际中我们可能需要更复杂的验证规则。除了上面的示例中提到的验证规则之外，peregrine-validator 还提供了几种高级用法，下面进行介绍。
异步验证
我们可以通过 addAsyncRule 方法来添加异步验证规则：
-- -------------------- ---- ------- -------------------------------------- ------- ------------- -- - --------------------------------- - ------ ----- -- ---------------- -- - -- ---------------------- - ------------------------- - ---- - --------------- - -- ------------ -- ----------------------------- ---展开代码
该验证规则会向服务器发送一个 POST 请求进行验证，并在结果返回后调用 validationCb 回调函数。validationCb 函数接收一个可选的字符串参数，如果传入了字符串，表示验证失败，会将字符串作为错误信息传递给 isValid 函数。否则，表示验证成功。
验证分组
我们可以通过将不同场景的验证规则放在不同的分组中，实现只验证特定分组的需求：
-- -------------------- ---- ------- ----- --------- - --- ------------ -- ----------- ----------------------------- ----- -- ----- --- ---- ----------------------------- ----- -- - ----- ---------- - ---------------------------------- ------ ----------------------- -- ----------- --------------------------- ----- -- - ----- -------- - ----------------------------------------- ------ -------------------- -- --------- ----- -------- - - ------ --- ---- -- -- -- --- ----- ----- ----- ------------ - --------------------------- --------- -- --- --- ----- ----- ---------- - --------------------------- -------展开代码
自定义错误提示
我们可以通过设置规则的第三个参数来自定义错误提示：
validator.addRule('min-length', (value, arg) => value.length >= arg, [], '密码长度至少为 6 位'); // 在验证时，将错误信息作为第二个参数传入 const isPasswordValid = validator.isValid(formData, ['min-length:6']);
总结
peregrine-validator 提供了一种简单且灵活的表单验证方式，通过本文我们了解了它的基本用法和一些高级用法。我们可以根据需求灵活选择并使用它，减轻表单验证的处理难度。完整代码如下所示：
-- -------------------- ---- ------- ----- --------- - ------------------------------- ----- --------- - --- ------------ ----------------------------- ----- -- ----- --- ---- -------------------------- ------- -- - ----- ---------- - ---------------------------------- ------ ----------------------- --- ------------------------------- ------- ---- -- ------------ -- ---- --- -------- - ---- ----- -------- - - ----- ------------ ------ -------------------- ---- ----- --------- -- -- ----- ------------ - --------------------------- --------- ----- --------------- - --------------------------- ------------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556fc81e8991b448d3e21
