npm 包 lean_validator 使用教程
在前端开发中，表单验证是必不可少的一项功能。而 lean_validator 是一款基于 jQuery 轻量级的表单验证插件。本文将为大家详细介绍 lean_validator 的使用方法。
安装
直接通过 npm 安装：
npm install lean_validator
或者在 HTML 中引入：
<script src="https://cdn.jsdelivr.net/npm/lean_validator/dist/lean_validator.min.js"></script>
使用
- 引入 lean_validator
在 HTML 中引入 lean_validator 的 js 文件：
<script src="https://cdn.jsdelivr.net/npm/lean_validator/dist/lean_validator.min.js"></script>
- HTML 中设置表单
在 HTML 中设置表单，并设置 input 的 name 和 required 属性（这是必须的）：
-- -------------------- ---- -------
----- -------------
-------
------
------ ------------ ------------ ---------
--------
-------
---------
------ --------------- --------------- ---------
--------
------- -----------------------------
-------- JavaScript 中配置验证规则
在 JavaScript 中使用 lean_validator 配置表单验证规则：
-- -------------------- ---- -------
--------
--- ------------------------- -
-
----- --------
------ ----------------------
--
-
----- -----------
------ ------------------------
-
---
---------在上例中，配置了 email 和 password 两个 input 的验证规则，email 验证规则为必填和正确的邮箱格式，password 验证规则为必填和最小长度为 6。
常用规则
以下是常用的验证规则：
- required：必填
- valid_email：邮箱格式
- min_length[6]：最小长度为 6
- max_length[10]：最大长度为 10
- matches[field]：与某一字段相同
- valid_ip：IP 地址格式
- valid_url：URL 格式
自定义错误信息
在 validation 规则中使用自定义错误信息：
-- -------------------- ---- -------
--- ------------------------- -
-
----- --------
------ -----------------------
--------- -
--------- ------- ----- ---- ----- ---------
------------ ------- ----- - ----- ----- --------
-
--
-
----- -----------
------ -------------------------
--------- -
--------- ------- ----- - ----------
----------- --------- ---- -- -- ----- - -----------
-
-
---实例代码
一个完整的表单验证实例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ---------- --------------- -------- -------------------------------------------------------------------------------------- ------- ------ --------- ---------- ------------ ------ ------------- --------- --------- --------- ------------ ------------ --------- ---------- --------- ------------ --------- --------------- --------------- --------- ---------- --------- ----------------------------- -------- --------- ----- ------------------------- - ---- --------- -------- ---------- ----------------------- ------------- - -------------- ------- ----- ---- ----- --------- ----------------- ------- ----- - ----- ----- -------- ----- ----- ---- --------- ----------- ---------- ------------------------- ------------- - -------------- ------- ----- - ---------- ---------------- --------- ---- -- -- ----- - ----------- ----- ---- ----- ---------- ------- -------
总结
lean_validator 是一款轻量级的表单验证插件，不仅使用简单，而且使用文档详细，对于前端开发人员来说，学习和使用 lean_validator 非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f74238a385564ab687f