在现代 web 应用程序开发中，对表单验证的需求越来越多，而前端开发人员不想从头开始编写和维护表单验证的逻辑，因此出现了许多验证库。可以使用 npm 包管理器安装这些库，可以选择使用其中的任何一个库进行表单验证。
在本文中，我们将介绍一个叫做 can-validate-legacy 的 npm 包，它是一个快速、简单、可定制的表单验证库。在介绍该库的使用方法之前，我们需要先了解一些重要的概念和术语。
什么是验证？
验证是检查表单内容是否符合预期的过程。表单验证将输入数据与规则进行比较，并根据验证结果确定何时可以提交表单。表单验证可以用于确保表单数据的完整性、准确性和合法性。
为什么需要表单验证库？
表单验证库提供了解决表单验证问题的方法。使用表单验证库可以节省时间、降低复杂度和减少出错概率。使用验证库可以轻松地配置和验证表单，减少重复和维护工作。
can-validate-legacy 库的特性
can-validate-legacy 库由 canjs 团队开发，可以做以下这些事情：
- 支持多个验证器，并能够组合在一起使用。
- 支持异步验证方法。
- 允许使用自定义验证器。
- 可以通过选择器指定要验证的表单元素。
- 支持错误消息的自定义处理。
安装 can-validate-legacy
可以通过以下两种方式安装 can-validate-legacy：
- 使用 npm 安装：
npm install can-validate-legacy - 使用 yarn 安装：
yarn add can-validate-legacy
基础使用
在使用 can-validate-legacy 库之前，需要在 HTML 中包含它的基本结构。
-- -------------------- ---- -------
--------- -----
----- ----------
------
-----------------------
-------
------
----- ------------
------ ----------- --------------- ------------- --
------ --------------- --------------- ------------- --
------- -------------------------
-------
------- ----------------------------------------------
--------
--- --------- - --- -------------
----- -------- --------- -
--- ---- - -------------
---- - ----------------- -- ---
------- - ------------ -- ---
-- ----
--- ----- - -
--------- -----------
--------- -----------
--
-- ----
--- -------- - -
--------- ---------
--
------------------- ------ --------- ---------
--
---
--- ---------------------
---------
-------
-------在该示例中，首先创建一个新的 can.Control 对象，然后使用 validate 方法对表单进行验证。调用 validate 方法时，需要传递以下参数：
- 表单对象
- 规则对象
- 错误消息对象
- 可选配置选项
可以看到，该示例的规则对象定义了用户名和密码输入框都是必填项。
规则对象
规则对象是一个键值对集合，其中键表示要验证的表单元素，值是一个验证器类型的字符串或者是一个包含验证规则的数组。
{
input_name1:"rule",
input_name2:["rule1","rule2"],
...
}验证器类型
can-validate-legacy 包含以下的基本验证器类型：
| 类型 | 描述 |
|---|---|
| required | 必填项，判断输入框是否为空 |
| integer | 整数类型，判断输入框值是否为整数 |
| positive | 正数类型，判断输入框内容是否为正数 |
| negative | 负数类型，判断输入框内容是否为负数 |
| float | 浮点数类型，判断输入框内容是否为浮点数 |
| 接受一个 email 格式的字符串 | |
| url | 接受一个 URL 格式的字符串 |
| date | 接受一个日期字符串，这个字符串不需要在严格按照正则表示 |
| time | 接受一个时间字符串，这个字符串不需要在严格按照正则表示 |
| datetime | 接受一个日期时间字符串，这个字符串不需要在严格按照正则表示 |
| creditcard | 接受一个信用卡号码字符串 |
| equals | 是否等于某个字段的值 |
| remote | 通过 ajax 请求远程验证输入框内容 |
| password | 必须包含大写字母、小写字母、数字和特殊字符，且长度不小于 8 位 |
| strongpassword | 至少包含以下四个要素中的三个：大写字母、小写字母、数字和特殊字符，且长度不小于 8 位 |
自定义规则
除了使用内置的验证器以外，也可以自定义规则。定义一个验证规则，需要定义以下两个方法：
test(): 该方法接收被验证的值作为参数，并返回一个Boolean值。一般情况下需要在此方法中定义针对被验证值的验证检查。message(): 在 test 返回false的情况下，该方法返回一个字符串，它是用于显示的文本消息。
myCustomValidator: {
test: function(val){
return val === "awesome";
}, message: "Value must equal ‘awesome’",
},验证
上述规则定义完成后，就可以对该表单进行验证了。我们使用以下几种方法扩展 can.Control.Validation 来使用 can-validate-legacy 包：
validate方法：该方法应该绑定在控制器的init方法中，用于定义规则、错误消息和配置选项并对表单进行验证:
-- -------------------- ---- -------
--------- -------------- ------ --------- -------- -
--- ----- - --------
--------- - -----
---------- - -----------------------------------
--------------- - -----
--------------------------
--------------------
-- ------------------------------- ----------- -------- -- --- --------- -
-----------------------
- ---- ----------------------- -
--------------------------
----------- ----
---
--- ------- - ---------------------------
-----------------------------------
----------------------------------
----------------------------------
--------------------------
----------- -----
---
- ---- -
----------------------------------
-
---
--showErrors方法：该方法应该在表单的下一级中创建错误消息元素。使用setAttribute方法来配置挂载验证消息的data-validate属性：
-- -------------------- ---- -------
----------- ---------------- -
--- --------- - -----
--------- - --------------------------- ------------ ----------------- ---- ----
---------------------- -
------- ---------
-------- --------
--------------- --------
------------- -------
---------------------- -
---------------------- ---
-------- ---
-------------- -------
------- ---------
-----
----------- - ----- ---------------- -----------------------------------------
-------------- ------------- -------- -
--- --- - -------------------------------------------- --------
------------------- -- --------- -
------- - ---------------------------
- ---- -
------- - ---------------------------
-
------------------------------
-- ----- -- - --------------- --
----------
------------------- --- - ---------
----------------- -------
-------------- ----------
-------- -------
--
----------------------- -----------------------------------
-------
-------------- ----------
----------------- ---------
--------------- --------
-------- -------
--
------------ -----------
------------------------
---
-- ------
---------
----------------------------
-------------------- -
----- -------
------------------------
---------------------------- -
------- --- ---------------- ------------------------------------------------
-------- ------ ----- - ----
----- --- - ---------
------- -------
------
---
-- -- --------- -- - -- --------- --- ---- --
------------------------------ - -- -
------------------------------------
- ---- -
-----------------
-
-clean方法：该方法应该在表单验证成功后重置表单样式和错误消息：
-- -------------------- ---- -------
------ ---------- -
--- ---- - --------------
----------------------------- ----------------------------------------
------------------- ------------- ---- -
----------------------------------------------
---
-----------------------------------------
--validateForm方法：该方法包含验证过程的核心逻辑，该方法应该传递被验证的表单 DOM 元素、功能验证器（由functionValidator创建）、错误消息和可选配置项：
-- -------------------- ---- -------
------------- -------------- ----------- --------- -------- -
--- --------- - -----
------ - ---
-- ------
---------------- - -------
--------------------------------------- ------ -
--- -- - --------
---- - ---------------------------
----- - -----
----
---- - ---------------------------
--- - ---------
------ - ------------------------
-------- -- ---------- -- ---- -- -------- -- --------------- -
----- - ------
- ---- ----------------- --- ----- -
--- - ------------
- ---- ------- -- --------- -
--- - --- -- --
-
----- - -------------------------- ------ ---- ------
-- ------ --- ----- -- --------------- -
------------ - --- -- -------------- -- --------
----- - ------
-
---
---------------- - -------
--- ----- - -------------------------- --- --
--------- -
------------------
-
------ ------
-可以看到，在表单提交时，使用 validate 方法对表单进行验证，使用 showErrors 方法来显示错误消息，并使用 clean 方法重置表单样式和错误消息。
延迟验证
can-validate-legacy 封装了 setTimeout 以异步验证输入框内容。该特性很有用，可以使用 delay 选项来配置验证之前的延迟时间（毫秒）：
validate({
// ...
delay: 500
});远程验证
can-validate-legacy 允许使用远程验证器。在规则对象中配置 remote 即可，例如：
-- -------------------- ---- -------
------- -
---- ---------------------
----- -------
----- -
------ ----------
--
--------- -------
-------- ---------
--在这个示例中，我们定义一个远程验证器，用于检查是否存在重复的用户名。通过将 remote 配置设置为一个包含 url、type、data 和 dataType 的对象，就可以通过 AJAX 请求远程验证器。
总结
can-validate-legacy 是一个支持自定义验证器、使用选择器指定要验证的元素和异步验证器特性的表单验证库。在本文中，我们提供了使用该库的详细教程。它可以帮助开发人员快速地添加表单验证功能，减少了重复和维护工作。希望这篇文章对感兴趣的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef2ed1492b5127df986b272