在前端开发中，表单验证是一个不可避免的环节。为了方便开发者进行表单验证，npm 上也出现了许多验证相关的包，其中 validatore 也是一个好用的 npm 包。
本文将介绍如何使用 validatore 进行表单验证，并给出示例代码以便于学习和实践。
安装 validatore
在 npm 上安装 validatore 的命令为：
- --- ------- ----------
使用 validatore
使用 validatore 进行表单验证的基本步骤为：
引入 validatore
----- --------- - ----------------------
编写验证规则
----- ----- - - --------- ------------ ------------ -------- ---------- ------ ------------ --------- --------- ------------ --------- ---------------------- ------------ ------------------ --
以上为一组基本的验证规则，包含了用户名、邮件地址、密码及密码确认等四个字段的验证。
其中，'required' 表示必填，'alpha_num' 表示必须是字母和数字的组合，'min:3' 表示最小长度为 3，'max:20' 表示最大长度为 20，'email' 表示邮箱格式验证，'match:password' 表示必须与密码一致。
更多可用的验证规则可在官方文档中查看。
构造验证方法
----- -------- - ----------------------
通过 make 方法构造一个验证器，该验证器可以接受一个表单对象并返回验证结果。
执行验证
----- ---- - - --------- ---------- ------ ------------------- --------- -------------- ---------------------- -------------- -- ----- ------ - ---------------
以上代码中，我们构造了一个表单对象 form，然后将其作为 validate 方法的参数进行验证。最终 result 的值为一个 boolean 类型的结果，表示验证是否通过。
在验证不通过的情况下，可以通过 validator.errors 对象获取错误信息：
-- --------- - ----- ------ - ----------------------- -------------------- -
输出结果为：
- --------- ----- -------- -- --- --------- ------ ----- ----- ---- -- - ----- ----- ----------- --------- - ---- -------- ----- -- ----------- ---- -------- ---- -- -- ----- - ------------- -- ---------------------- - ---- --------------------- ----- -- ----------- ---- --------------------- --- -------- ---- -------- -- -
示例代码
最后，我们来看一个完整的示例代码，该代码使用了 validatore 进行表单验证，并输出了验证结果和验证错误信息：
----- --------- - ---------------------- ----- ----- - - --------- ------------ ------------ -------- ---------- ------ ------------ --------- --------- ------------ --------- ---------------------- ------------ ------------------ -- ----- -------- - ---------------------- ----- ---- - - --------- ---------- ------ ------------------- --------- -------------- ---------------------- -------------- -- ----- ------ - --------------- -- -------- - ----------------------- ---------- - ---- - ----- ------ - ----------------------- -------------------- -
总结
通过本文的介绍，我们了解了 npm 包 validatore 的基本使用方法，同时也学会了如何编写验证规则和执行表单验证。
相信在以后的前端开发中，我们会使用 validatore 进行方便又可靠的表单验证。
更多关于 validatore 的详细信息，可以参考官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e281e8991b448d7758