NPM（Node Package Manager）是 Node.js 的包管理工具，这里介绍一款在前端开发中很常用的 npm 包 —— Uran。Uran 是一款轻量级的表单数据验证工具，它支持异步验证，多种内置的验证规则，并且扩展性也很强。
安装
可以使用 NPM 进行 Uran 的安装：
--- - ----
安装完之后，就可以在项目中使用 Uran 了。
基本使用
导入 Ural
----- ---- - ----------------
设置验证规则
----- ----- - - ------ -- ----- ---------- -- - ----- ------- --- --------- -- ----- ---------- -- - ----- ------------ ------- - --- --
这里我们定义了两个规则，email 和 password。email 需要满足必填和邮箱格式的要求，password 需要满足必填和最小长度为6的要求。
创建 Uran 实例
----- ---- - --- ------------
创建 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