什么是jvalidator
jvalidator是一个Javascript表单验证工具，它提供了一种轻量级的、简单、易于维护和扩展的方式来验证表单数据。
jvalidator的安装
使用npm命令即可安装jvalidator：
npm install jvalidator --save
jvalidator的使用
准备工作
在开始使用jvalidator之前，首先需要在HTML页面中添加jvalidator.js的引用：
<script src="path/to/jvalidator.js"></script>
基础验证
jvalidator提供了多种验证规则，例如：
required：该字段必填email：该字段必须是邮箱格式url：该字段必须是URL格式number：该字段必须是数字min_length:X：该字段长度不少于Xmax_length:X：该字段长度不超过Xequal:field：该字段值与指定字段相等
使用jvalidator非常简单，只需要在form元素上添加data-validate属性：
-- -------------------- ---- -------
----- ----------- ---------------------
-----
------ ---------------------------
------ ----------- ------------- --------------- ------------------------------ --
------
-----
------ --------------------------
------ --------------- ------------- --------------- ------------------------------ --
------
-----
------- -------------------------
------
-------上面的代码中，我们为用户名和密码字段添加了data-validate-rules属性，其值为required，表示这两个字段必填。
然后，在Javascript代码中，调用jvalidator.bind('#myform')方法即可实现验证功能：
jvalidator.bind('#myform');如果表单数据不符合验证规则，将会提示错误信息。
自定义消息
除了基础验证规则外，jvalidator还支持自定义验证规则和错误消息。
首先，在HTML页面中，添加错误消息提示元素：
-- -------------------- ---- -------
----- ----------- ---------------------
-----
------ ---------------------------
------ ----------- ------------- --------------- ------------------------------ --
----- ---------------------
------
-----
------ -----------------------
------ ----------- ---------- ------------ --------------------------- --
----- ---------------------
------
-----
------- -------------------------
------
-------上面的代码中，我们为每个验证字段的下面添加了一个<span class="error"></span>元素，用于显示错误信息。
然后，在Javascript代码中，按如下方法添加自定义验证规则和错误消息：
-- -------------------- ---- -------
------------------------------------------- --------------- ------ -
------ ----- --- ------ -- --------------------------------
-- ------------------ -- -----------------------
-------------------------- -
--------------- --------------- -------- -
-----------------------------------
-
---上面的代码中，我们添加了一个名为custom_rule的验证规则，并定义了错误消息。然后，在调用jvalidator.bind()方法时，为其添加errorPlacement配置，用于指定错误消息的位置。
使用自定义规则时，需要在HTML页面中为要验证的字段添加data-validate-rules属性：
-- -------------------- ---- -------
----- ----------- ---------------------
-----
------ ---------------------------
------ ----------- ------------- --------------- ------------------------------------------ --
----- ---------------------
------
-----
------ -----------------------
------ ----------- ---------- ------------ --------------------------- --
----- ---------------------
------
-----
------- -------------------------
------
-------上面的代码中，我们为用户名字段添加了custom_rule规则。
其他配置
jvalidator提供了多种配置，例如：
successFunc：验证成功后执行的函数submitFunc：表单提交前执行的函数validateOnBlur：当用户离开验证字段时，是否进行验证
使用方法如下：
-- -------------------- ---- -------
-------------------------- -
------------ ---------- -
---------------
--
----------- ---------- -
-------------------
--
--------------- ----
---示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------------
-------
------
----- ----------- ---------------------
-----
------ ---------------------------
------ ----------- ------------- --------------- ------------------------------ --
----- ---------------------
------
-----
------ --------------------------
------ --------------- ------------- --------------- ------------------------------ --
----- ---------------------
------
-----
------ -----------------------
------ ----------- ---------- ------------ --------------------------- --
----- ---------------------
------
-----
------ ---------------------
------ ----------- -------- ---------- ------------------------- --
----- ---------------------
------
-----
------ ---------------------
------ ----------- -------- ---------- ------------------------------------------------------ --
----- ---------------------
------
-----
------ -----------------------------------
------ --------------- -------------------- ---------------------- ------------------------------------ --
----- ---------------------
------
-----
------- -------------------------
------
-------
------- --------------------------------------------------------------------------------
------- -----------------------
-------------------------- -
--------------- --------------- -------- -
-----------------------------------
--
------------ ---------- -
---------------
--
----------- ---------- -
-------------------
--
--------------- ----
---
---------
-------
-------总结
jvalidator是一个非常好用的Javascript表单验证工具，它提供了多种验证规则和自定义规则的功能，使用简单方便，适用于各种类型的web应用，是前端开发者不可缺少的技术工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d0281e8991b448da99d