什么是 bobby？
bobby 是一个基于 JavaScript 的轻量级插件，主要用于前端表单验证，支持多种验证规则，并可以自定义错误提示信息。
安装 bobby
使用 npm 安装：
--- - -----
或者直接在 html 中引入：
------- --------------------------------
使用 bobby
基本用法
在需要进行验证的表单元素上加上 data-validate 属性，可以指定验证规则，多个规则用 | 分隔：
------
-------
----
------ ----------- --------------- ------------------------------------- --
--------
-------
---
------ --------------- --------------- ------------------------------------- --
--------
------- -------------------------
-------然后在 js 中初始化 bobby：
----- ----- - --- --------------
这里的 form 是要进行验证的表单元素的选择器，可以是任何有效的选择器字符串。
自定义规则
bobby 自带了一些常用的验证规则，如 required、email、url、min、max 等，但是有时候我们需要自定义一些规则，可以使用 addRule 方法：
---------------------- --------------- ------- - ------ --------------------- ---
这里的 phone 是自定义的规则名称，第二个参数是一个函数，它接收两个参数，第一个是要验证的值，第二个是参数，自定义规则中可以使用参数。自定义规则的返回值需要是一个 boolean 类型，表示验证是否通过。
自定义提示信息
当验证失败时，bobby 会自动弹出默认的提示信息。但是通常我们需要自定义错误提示信息，可以使用 setMessage 方法：
---------------------------- ---------------
这里的 required 是验证规则名称，{label} 是模板字符，bobby 会把表单元素的 label 自动替换为该模板字符，也可以使用 {value} 来替换当前输入的值。
手动验证
有时候我们需要手动触发表单验证，可以使用 validate 方法：
-- ------------------ - -- --------- -------------- -
这样就可以在表单提交前手动验证表单了。
示例代码
--------- -----
------
------
----- ----------------
------------ ------------
-------
------
----- ----------
-------
----
------ ----------- --------------- ------------------------------------- --
--------
-------
---
------ --------------- --------------- ------------------------------------- --
--------
-------
-----
------ ----------- ------------ ------------------------------ --
--------
------- ------------- ----------------------------------
-------
------- ---------------------------------------
--------
----- ---- - --------------------------------
----- ----- - --- ---------------
---------------------- --------------- ------- -
------ ---------------------
---
---------------------------- ---------------
------------------------- -------------------
-------- ------------ -
-- ------------------ -
--------------
-
-
---------
-------
-------总结
bobby 是一个方便易用的前端表单验证插件，可以快速地实现表单验证功能。我们可以使用它自带的验证规则，也可以自定义规则和提示信息。同时，bobby 还提供了手动验证的方法，方便在表单提交之前手动验证表单。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/78221