前言
在前端开发过程中，我们经常需要验证表单数据的合法性，比如一个邮箱必须要符合一定的格式，密码必须要包含数字、字母和特殊符号等等。手写验证逻辑会较为繁琐，不易维护，因此我们可以使用一些现成的工具来简化这个过程。
这里介绍一款 npm 包 livevalidator-tester-html5，它基于 HTML5 的表单验证 API 开发，提供了一个表单验证工具箱。
安装
使用 npm 安装 livevalidator-tester-html5 十分简单，只需要在终端中输入以下命令即可：
npm install livevalidator-tester-html5 --save
用法
引入 livevalidator-tester-html5
在你的 HTML 文件中引入 livevalidator-tester-html5：
<script src="./node_modules/livevalidator-tester-html5/index.js"></script>
基本使用
在表单元素上添加 HTML5 的验证属性，并在表单中添加一个 data-live-validation 属性：
-- -------------------- ---- -------
----- ---------------------
-----
------ ---------------------------
------ ------------- ----------- --------------- -------- ------------------ --
------
-----
------ --------------------------
------ ------------- --------------- --------------- -------- --
------
-----
------ -------------------------
------ ---------- ------------ ------------ -------- --
------
------- -------------------------
-------高级用法
livevalidator-tester-html5 提供了各种自定义选项，以便您根据需要修改验证消息、自定义验证规则或禁用验证等。
禁用验证
您可以在表单上添加 novalidate 属性以禁用验证，只需启用 livevalidator-tester-html5：
<form data-live-validation novalidate> <!-- Your form elements... --> </form>
修改验证消息
默认的验证消息可以根据需要进行修改，例如：
window.liveValidatorTest.customOptions.messages = {
CONSTRAINT_VALUE_MISSING: '请填写此字段。',
CONSTRAINT_TYPE_MISMATCH_EMAIL: '请输入有效的电子邮件地址。',
CONSTRAINT_TYPE_MISMATCH_RANGE_UNDERFLOW: '值必须大于或等于 {0}。',
CONSTRAINT_TYPE_MISMATCH_RANGE_OVERFLOW: '值必须小于或等于 {0}。',
};自定义规则
您可以使用 window.liveValidatorTest.constrainCustom 函数自定义验证规则。
例如，如果您想验证两个密码字段是否匹配，可以添加以下代码：
-- -------------------- ---- -------
-- -------- ----- ------ ----------
------------------------------------------
----- ------------
------------ -------------
--------- -------- -- -
--- ----- - ------------------------------------
--- --------- - --------------------------------------------
-- ---------------- --- ------------ -
------ -
------ ------
------- ---------- -- --- -------
--
- ---- -
------ - ------ ---- --
-
-
---示例
我们来看一个基本示例，使用 livevalidator-tester-html5 验证表单：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------------- ---------------
------- ------------------------------------------------------------------
--------
----------------------------------------------- - -
------------------------- -------
------------------------------- ---------------
--------------------------- ----- ----- - ----- ----
-------------------------- ----- ----- - ----- ----
---------------------------- ---------
-
---------
-------
------
----- ---------------------
-----
------ ---------------------
------ --------- ----------- ----------- ---------
------
-----
------ ----------------------
------ ---------- ------------ ------------ ---------
------
-----
------ ----------------------
------ -------- ---------- ---------- ------------------------- ---------
------
-----
------ -------------------------
------ ------------- --------------- --------------- ------------- ---------
------
-----
------ -----------------------------------
------ --------------------- --------------- ----------------------- ------------------------------ ---------
------
------- -------------------------
-------
--------
------------------------------------------
----- ------------
------------ -------------
--------- -------- -- -
--- ----- - ------------------------------------
--- --------- - --------------------------------------------
-- ---------------- --- ------------ -
------ -
------ ------
------- -----------
--
- ---- -
------ - ------ ---- --
-
-
---
---------
-------
-------上述代码中，我们定义了一个表单，包含了姓名、邮箱、手机号码、密码、确认密码等表单元素，并使用了 HTML5 的验证属性。
在 JavaScript 部分，我们使用了 window.liveValidatorTest.customOptions.messages 对默认的验证消息进行了修改，并使用了 window.liveValidatorTest.constrainCustom 自定义了一个验证规则。
可以看到，使用 livevalidator-tester-html5 验证表单非常便捷，并可以根据需要添加自定义选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d981e8991b448d4e61