前端开发当中，表单验证是一个必不可少的功能，用户输入的数据往往需要进行格式、内容等方面的检查，以保证数据的合法性和准确性，从而提升用户体验。而 npm 包 form-validity-state 正是一款能够帮助前端开发者实现表单验证的工具。
简介
form-validity-state 是一个用于表单验证的 npm 包，其主要功能包括：
- 表单验证状态的维护：对表单中的输入框进行验证，记录验证结果；
- 验证错误的提示：对验证失败的表单项进行错误信息的提示；
- 回调函数的触发：当表单验证通过或者未通过时，form-validity-state 将触发相应的回调函数。
安装
要使用 form-validity-state，需要在项目中安装该 npm 包：
npm install form-validity-state --save
引入
安装成功后，需要使用 import 或 require 引入该模块，然后使用该模块中提供的方法进行表单验证。
// 引入 form-validity-state
import formValidityState from 'form-validity-state';
// 或者
const formValidityState = require('form-validity-state');使用方法
初始化
在表单验证前，需要对 form-validity-state 进行初始化。初始化方法如下所示：
const formState = formValidityState.init(formElement);
其中，formElement 参数表示表单元素 - 即包含表单板块的 form 元素，需要使用 document.querySelector 或类似方法获取。
表单初始化后，formState 中包含了当前表单元素的验证状态，以及对应的种类和错误信息。
对于表单初始化后的状态，可以使用以下方法获取：
获取表单状态
getFormState() 方法用于获取 form 验证状态：
const formState = formValidityState.getFormState();
返回值为 form 的验证状态，格式如下：
-- -------------------- ---- -------
-
------ -
-- ----
------ ------
-------- -----
-------------- -----------
--------------- -----------
------------------ ----------
--
-------- -
---------- -
-- ----
------ ------
-------- -----
-- ------
-------- ----------------------
-------- ---------------------------
--------- -----
-- ----
------- ------------
--------- -----------
-
-
-在 formState 中，$form 表示 form 表单标签的验证状态，包含 valid 和 invalid 两个属性，分别对应验证成功和验证失败。 $inputs 表示表单中各项输入框的状态信息。
在 $inputs 中，每个元素信息包含了输入框的验证状态、校验规则和错误信息，以及对应的 input 元素和信息提示元素。
添加校验规则
为了完成校验，需要配置相应的校验规则。可以使用 addRule(inputName, rule) 方法来给表单项添加校验规则。
// 为 input1 添加非空校验。
formState.addRule('input1', {
required: true,
message: 'input1 不能为空'
});其中，第一个参数 inputName 为表单项的名称，第二个参数规定了需要执行的校验方法和错误提示信息。
$inputs 中的元素信息会更新，添加了该 inputName 对应的校验规则:
-- -------------------- ---- -------
-
---------- -
------ ------
-------- -----
--------- -----
-------- ------- ------
------- ------------
--------- -----------
-
-触发校验
在上述的过程中，已经为表单项添加了校验规则，但在表单提交之前需要触发表单校验。
使用 validate(callback) 函数可以触发校验，验证结果将会被回调函数所接收。
formState.validate(function (valid) {
if (valid) {
// 表单验证通过了。
} else {
// 表单验证失败了，需要按照输入项弹出错误提示。
}
});错误提示
当一个表单项校验不通过时，需要对这个表单项进行错误提示，这将来自于校验规则中的 message。 form-validity-state 库会自动在该表单之后添加一个错误提示。
如果想要对错误提示进行自定义修改和样式展示，可以通过类选择器进行修改。
示例代码
下面是一个简单的实例代码，用于演示如何使用 form-validity-state 进行表单验证：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------
-------
------------------ -
------------- --- -----------
-
-------------- -
------ ----
----------- ----
-
--------
-------
------
----- ----------------
--------------
-----
------ ---------------------------
------ ----------- --------------- ------------- --
---- ----------------------------
------
-----
------ --------------------------
------ --------------- --------------- ------------- --
---- ----------------------------
------
-----
------ -----------------------------------
------ --------------- ---------------------- -------------------- --
---- ----------------------------
------
------- ------------- ---------------------------
-------
-------
------- --------------
------ ----------------- ---- -----------------------
----- ------------- - --------------------------------------------------
--------------------------------- -
--------- -----
-------- ----------------------
-------- --------------------------
--
--------------------------------- -
--------- -----
-------- ------------------------------------------------
-------- -------------------------------------------
--
---------------------------------------- -
--------- -----
-- ----------------
---------- -------- -- -
------ ----------------------------------------
--
-------- ------------
--
----- ------------- - ----------------------------------
----- ------------- - ----------------------------------
----- ------------------- - -----------------------------------------
----- -------------------- - -------------------------------------------
----- ---------------- - -------- ------- -
-- ------- -
-------------
- ---- -
-- ---------
--- ---- - - -- - - ----------------------------------- ---- -
----- ------- - ------------------------------
----- -------------- - -----------------------
-- ------------------------ -
---------------------------------------------
---------------------------- - ------
- ---- -
------------------------------------------
---------------------------- - -------
-------------------------- - -------------------------
-
-
-
-
--------------------------------------------------------------- -------- -- -
----------------------------------------
--
---------
-------
在代码运行之后，我们可以得到一个典型的表单页面。如果没有输入任何数据，或者输入的数据不符合校验规则，会出现如下的提示信息。
通过使用 form-validity-state，可以为前端开发者提供便捷的表单验证方法，进而提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2081e8991b448d9bd3