NPM(Node Package Manager)是 Node.js 的包管理工具,这里介绍一款在前端开发中很常用的 npm 包 —— Uran。Uran 是一款轻量级的表单数据验证工具,它支持异步验证,多种内置的验证规则,并且扩展性也很强。
安装
可以使用 NPM 进行 Uran 的安装:
npm i uran
安装完之后,就可以在项目中使用 Uran 了。
基本使用
导入 Ural
const Uran = require('uran');
设置验证规则
const rules = { email: [{ rule: 'required' }, { rule: 'email' }], password: [{ rule: 'required' }, { rule: 'minLength', params: 6 }], };
这里我们定义了两个规则,email 和 password。email 需要满足必填和邮箱格式的要求,password 需要满足必填和最小长度为6的要求。
创建 Uran 实例
const form = new Uran(rules);
创建 Uran 实例后,就可以在表单中使用它进行验证了。
调用 validate 方法验证数据
-- -------------------- ---- ------- ----- ---- - - ------ ------------------- --------- --------- -- ------------------- ------ -- - -- -------- - -------------------- - ---- - -------------------- - ---
调用 validate 方法验证数据时,需要传入需要验证的数据和一个回调函数。回调函数中会返回验证结果。如果验证通过,则 errors 参数为 null 或 undefined。
异步验证
如果需要异步验证,可以使用 Promise:
-- -------------------- ---- ------- ----- ------------- - ---- -- - ------ --- ----------------- ------- -- - ------------- -- - ------------------- ------ -- - -- -------- - --------------- - ---- - ---------- - --- -- ------ --- -- ------------------- -------- -- - -------------------- -- ------------- -- - -------------------- ---
在这个示例中,我们在 setTimeout 中模拟了一秒钟的异步请求,然后再调用 validate 方法进行验证。
高级用法
使用自定义规则
Uran 可以简单的定义自己的验证规则,只需将下面简单的验证函数添加到规则中即可。
-- -------------------- ---- ------- ----- ----- - - ------------ - ---------- ----- -- ----- --- --------- -------- ---- -------- -- -- ----- ---- - --- ------------ ----- ---- - - ------- --------- -- ------------------- ------ -- - -------------------- -- ---- ---
在这个示例中,我们创建了一个自定义的规则 custom_rule,它的 validator 函数的返回值必须为 true 才算验证通过,否则会返回一个 message。
自定义错误消息
在 rules 中定义规则时,可以设置一个 messages 字段,用于自定义错误提示消息。messages 字段是一个对象,其中 key 为字段名,value 为一个对象,包含每个验证规则的错误提示信息。
-- -------------------- ---- ------- ----- ----- - - ------ -- ----- ---------- -- - ----- ------- --- --------- -- ----- ---------- -- - ----- ------------ ------- - --- -- ----- -------- - - ------ - --------- -------- ------ ------------- -- --------- - --------- -------- ---------- ------------ -- -- ----- ---- - --- ----------- ----------
在这个示例中,我们设置了两个字段 email 和 password 的错误提示信息,分别对应了 email 和 password 的所有验证规则。
结论
在前端开发中,表单数据验证是必不可少的。Uran 轻量且易于使用,还具有高度的可扩展性。通过此篇文章的介绍,你已经可以开始使用 Uran 进行表单数据验证了。同时,Uran 源码开放,如果需要更多的扩展,可以自行对 Uran 进行二次开发。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005665781e8991b448e27bc