什么是 validation-handler
validation-handler 是一个用于前端表单校验的 npm 包，目前已经拥有了约200多万次的下载量。它可以帮助开发者快速轻松地实现表单校验功能，提升开发效率和用户体验。
安装
使用 npm 进行安装：
npm install validation-handler
使用
基本用法
使用 validation-handler ，可以很方便的实现表单校验功能。
首先进行导入：
import validationHandler from 'validation-handler';
根据需要设置校验规则和提示信息：
-- -------------------- ---- -------
----- ------ - -
------ -
--------- -
--------- -----
-------- ---------
--
--------- -
--------- -----
-------- --------
--
--
--接着编写表单结构，为每一个输入框绑定校验规则：
-- -------------------- ---- -------
------
-------
----
------ ----------- ----------------
--------
-------
---
------ --------------- ----------------
--------
------- -------------------------
-------最后在表单提交事件中进行校验：
document.querySelector('form').addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const result = validationHandler(formData, config.rules);
if (result.hasError) {
alert(result.message);
}
});自定义校验规则
validation-handler 支持自定义校验规则，只需要给配置对象传入一个自定义函数即可。函数需要返回一个对象，包含两个属性：
- valid：是否校验通过
- message：校验结果的提示信息
例如，我们需要实现一个自定义规则，校验是否为手机号码。首先添加一个自定义规则：
-- -------------------- ---- -------
------------------ - -
--------- -----
------- ------- -- -
----- --- - --------------------
-- ----------------- -
------ -
------ -----
-------- ---
--
-
------ -
------ ------
-------- -------------
--
--
--在表单中添加一个手机号码输入框。
<label> 手机号码： <input type="text" name="phone"> </label>
最后，修改提交事件的处理函数：
-- -------------------- ---- -------
--------------------------------------------------------- ------- -- -
-----------------------
----- -------- - --- -----------------------
----- ------ - --------------------------- --------------
-- ----------------- -
----------------------
- ---- -
-- -- --------- ---
-
---配置项
validation-handler 提供了常见的配置项，可以通过传入一个对象来设置。
rules
rules 是必须的配置项，用于设置校验规则。规则需要按照表单中各项的名称进行设置，每一项规则又包含以下属性：
- required：是否为必填字段，可选值 true 或 false。
- type：输入值的类型，可选值为 email, phone, url, number, int, float, array, object 等。也支持传入使用 lodash 的相关工具函数进行校验，例如 isBoolean，isObject，isArray 等等。
- maxLength：输入框的最大长度。
- pattern：正则表达式，用于校验输入框的值。
- message：校验提示信息。
errorPlacement
设置错误提示信息的显示位置，可选值为 before 和 after，分别表示将提示信息显示在输入框的前面和后面。默认为 after。
-- -------------------- ---- -------
----- ------ - -
------ -
--------- -
--------- -----
-------- ---------
--
--------- -
--------- -----
-------- --------
--
--
--------------- ---------
--errorClass
设置错误提示信息的 class 名称，默认值为 validation-error。
successClass
设置校验通过时的 class 名称，默认值为 validation-success。
messageTemplate
自定义提示信息的模板，默认值为 {label} {message}。其中，{label} 会被替换为输入框的标签文本，{message} 会被替换为错误提示信息。
-- -------------------- ---- -------
----- ------ - -
------ -
--------- -
--------- -----
-------- ---------
--
--------- -
--------- -----
-------- --------
--
--
---------------- -------- -------
--示例代码
下面是一个完整的示例代码，展示了如何在一个表单中使用 validation-handler 进行校验。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ----------
-------
------
------
-------
----
------ ----------- ----------------
--------
-------
---
------ --------------- ----------------
--------
-------
---
------ ----------- -------------
--------
-------
-----
------ ----------- -------------
--------
------- -------------------------
-------
------- -----------------------------------------------------------------
------- --------------------------------------------------------------------------------
--------
----- ------ - -
------ -
--------- -
--------- -----
-------- ---------
--
--------- -
--------- -----
-------- --------
--
------ -
----- --------
-------- -------------
--
------ -
--------- -----
------- ------- -- -
----- --- - --------------------
-- ----------------- -
------ -
------ -----
-------- ---
--
-
------ -
------ ------
-------- -------------
--
--
--
--
--------------- ---------
----------- --------
------------- ----------
---------------- -------- -------
--
--------------------------------------------------------- ------- -- -
-----------------------
----- -------- - --- -----------------------
----- ------ - --------------------------- --------------
-- ----------------- -
----------------------
- ---- -
-- -- --------- ---
-
---
---------
-------
-------总结
validation-handler 是一个功能强大的前端表单校验 npm 包，能够快速方便地实现表单校验功能，提升开发效率和用户体验。本文介绍了其使用方法和常用配置项，并提供了示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea181e8991b448dbf7b