在开发 Web 应用时，表单验证是一个必须要解决的问题。通过使用表单验证插件可以避免重复编写一些基础的验证逻辑，提高开发效率。本文将介绍如何使用纯 JavaScript 实现一个通用的表单验证插件，并给出完整的示例代码。
需求分析
在设计通用表单验证插件之前，需要对实际需求进行分析和归纳。以下是一些比较普遍的需求：
- 必填字段不能为空
- 字段长度限制
- 字段格式验证，如邮箱、手机号码等
- 自定义规则验证
插件实现思路
根据上述需求，我们需要设计一个可以接受配置参数的通用表单验证插件，具体实现思路如下：
- 定义一个
Validator对象表示验证器。 - 给
Validator对象添加一些验证规则方法。 - 将表单元素和对应的验证规则封装成对象或数组。
- 遍历表单元素对象或数组，依次验证每个元素值是否符合规则。
- 如果验证失败，显示提示信息；如果全部验证通过，则提交表单。
代码实现
基础验证规则
我们首先定义一些基础的验证规则方法，这些方法可以根据需求进行扩展：
-- -------------------- ---- -------
----- --------- - -
-- ------
--------- --------------- -
------ ---------------
--
-- ------
---------- --------------- ------- -
------ ------------ -- -------
--
-- ------
---------- --------------- ------- -
------ ------------ -- -------
--
-- ------
------ --------------- -
------ -----------------------------------------
--
-- --------
------ --------------- -
------ --------------------------------
-
--表单元素验证
接下来，我们将表单元素对象和对应的验证规则封装成数组，并遍历数组进行验证：
-- -------------------- ---- -------
----- ---- - --------------------------------
----- -------- - -
-
----- --------
------ ------------ --------
--
-
----- -----------
------ ------------ -------------- ---------------
--
-
----- --------
------ ------------ --------
-
--
-------- ------------------------ -
----- ----- - ---------------------
----- ----- - --------------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
--- ---------- - -----
--- ------
-- ------------------ --- --- -
----- --- - ----------------
---------- - -------
----- - -------
-
-- ------------------------------ ------- -
----- ------- - ------------------------------
---------------
------ ------
-
-
------ -----
-
------------------------------- ----------- -
-------------------
--- ----- - -----
--- ---- - - -- - - ---------------- ---- -
----- ------- - ------------
----- ------------ - ---------------------------------------------
-- -------------------------------- -
----- - ------
-
-
-- ------- -
--------------
-
---使用
最后，我们只需在 HTML 中引入对应的 JS 文件，即可使用该插件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------
-------
------
----- --------- --------- --------------
------ -----------------------
------ ----------- ------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------