在前端开发中，表单验证是非常重要的一环，需要验证的数据类型和规则非常之多，为了方便开发者快速实现常见的表单验证规则，npm 社区中出现了很多表单验证的插件和库，mileyy-validate 就是其中之一。
本文将详细介绍如何使用该 npm 包进行表单验证，适用于前端开发者和想深入学习前端表单验证的人员。
安装
首先，需要使用 npm 安装 mileyy-validate 依赖包。命令如下：
npm install mileyy-validate
使用方法
- 引入 mileyy-validate 包
import validate from "mileyy-validate";
- 在需要验证的表单元素上添加特定格式的 data-validate 属性，属性值为需要的验证规则，每个规则之间使用竖线 "|" 分割。
<input type="text" id="username" name="username" data-validate="required|minlength:5|maxlength:10">
上面的代码示例中，data-validate 属性包含了三个验证规则：
- required：必填项；
- minlength:5：最小长度为 5；
- maxlength:10：最大长度为 10。
- 在提交表单的时候，调用 validate 函数进行验证。
document.getElementById("submit").addEventListener("click", function(event) {
event.preventDefault();
const form = document.getElementById("form");
validate(form);
});API 文档
validate(element, options)
validate 函数有两个参数：
- element：需要验证的表单元素，可以是 form 或者 input，textarea 元素；
- options：可选参数，包含以下选项：
- errorClass：错误提示样式类名，默认为 "error"；
- errorPlacement：错误提示的容器选择器，默认为 null；
- successClass：验证通过时添加的样式类名，默认为 "success"；
- successPlacement：验证通过提示的容器选择器，默认为 null；
- callbacks：回调函数对象，包含以下回调函数：
- onValid：验证通过时执行的回调；
- onInvalid：验证失败时执行的回调。
可以根据具体需求进行配置。
支持的验证规则
以下是目前支持的验证规则：
- required：必填项；
- minlength:n：最小长度为 n，其中 n 为数字，例如 minlength:5 表示最小长度为 5；
- maxlength:n：最小长度为 n；
- email：邮箱格式；
- number：数字类型；
- digit：整数类型；
- phone：手机号码格式；
- qq：QQ 号码格式；
- idcard：身份证号码格式；
- url：网址格式；
- date：日期格式，例如 date:yyyy-mm-dd 表示日期格式为年-月-日。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
----- --------- ---------- --------------
---
------ ---------------------------
------ ----------- ------------- --------------- --------------------------------------------------
----
---
------ -----------------------
------ ------------ ---------- ------------ -------------------------------
----
---
------ --------------------------
------ --------------- ------------- --------------- -------------------------------------
----
---
------- ------------- -----------------------
----
-------
------- ---------------------------------------
--------
----- ---- - --------------------------------
------------------------------- --------------- -
-----------------------
-------------- -
---------- -
-------- ---------- -
---------------------
--
---------- ---------- -
---------------------
-
-
---
---
---------
-------
-------在这里，我们使用了表单元素的 data-validate 属性进行验证，通过 validate 函数来进行表单验证。当验证通过或失败时，会触发相应的回调函数。这些回调函数可以根据具体的业务场景进行自定义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f471d8e776d08041077