什么是 Validatores6？
Validatores6 是一个 JavaScript 库，用于验证表单数据的有效性。它基于 ES6 类编写，并支持异步验证。它提供了各种验证规则，包括必填项、邮箱格式、手机号码格式、URL 格式等等。Validatores6 具有简单易用、灵活可扩展的特点，适用于前端开发中的表单验证场景。
安装 Validatores6
Validatores6 是一个 npm 包，可以通过 npm 命令进行安装。
npm install validatores6
使用 Validatores6
Validatores6 有两个主要部分：验证规则和验证器。验证规则定义了一个字段可以接受哪些值，并且如何验证这些值。验证器是用于验证表单数据的 JavaScript 类，它使用验证规则来验证表单数据的有效性，如果表单数据无效，它将返回错误信息。
定义验证规则
在使用 Validatores6 之前，你需要为每个表单字段定义一组验证规则。你可以在单独的 JavaScript 文件中定义这些规则，并将它们导出作为一个对象。例如，假设你有一个包含以下字段的表单：
<form> <input type="text" name="username"> <input type="password" name="password"> <input type="email" name="email"> <input type="tel" name="phone"> <button type="submit">Submit</button> </form>
你可以为每个字段定义验证规则：
-- -------------------- ---- ------- -- ----------- ------ ------- - --------- ----- ---------- -- ---------- --- -- -- ----------- ------ ------- - --------- ----- ---------- -- ---------- --- -- -- -------- ------ ------- - --------- ----- ------ ----- -- -- -------- ------ ------- - --------- ----- ------ ----- --
上面的代码导出了一个包含验证规则的对象，其中包括必填项、长度限制、邮箱格式和手机号码格式等验证规则。
创建验证器
一旦你定义了验证规则，你就可以使用 Validatores6 来验证表单数据的有效性。创建一个验证器之前，你需要通过导入验证规则的方式把规则加载进来：
-- -------------------- ---- -------
------ ------------- ---- ----------------
------ ------------- ---- ----------------
------ ---------- ---- -------------
------ ---------- ---- -------------
----- ------------- -
-- -------------- -----------------------------
------------------- -
-- ----------- -------- -
----------- - -------
-- ------------ ------- -
---------- - -
--------- --------------
--------- --------------
------ -----------
------ -----------
--
-
-- -------- ------------ ----------
-- --------------------------
-- ------------ -----
----- ---------- -
----- ------ - ---
--- ------ ----------- ----------- -- ---------------------------- -
----- ---------- - --------------------- -- ---
----- ----- - ----- ------------------------------ ------------
-- ------- -
----------------- - ------
-
-
-- --------------------------- - -- -
------ -------
-
------ -----
-
-- ----------------- -----------------
-- --------------------------
-- ------------ -----
----- -------------------- ------ -
--- ------ ---------- ---------- -- ---------------------- -
----- ---------------- - ---------------
-- ------------------ -
----- ----- - ----- ----------------------- -----------
-- ------- -
------ ------
-
-
-
------ -----
-
-- ------------------
----- --------------- ---------- - ----- -
-- ----------- -- ------- -- ------------ --- ---- -
------ ----- ----- -- ----------
-
------ -----
-
----- ---------------- ---------- -
-- ------ -- ------------ - ---------- -
------ ----- ----- ---- -- -- ----- ------------ ---------- ------
-
------ -----
-
----- ---------------- ---------- -
-- ------ -- ------------ - ---------- -
------ ----- ----- ---- -- -- ---- ---- ------------ ---------- ------
-
------ -----
-
----- ------------ ------- - ----- -
-- -------- -- ------------------------------------------------------------- -
------ -------- ----- --------
-
------ -----
-
----- ------------ ------- - ----- -
-- -------- -- ------------------------------- -
------ -------- ----- --------
-
------ -----
-
-上述代码创建了一个名为 FormValidator 的验证器。它的构造函数接收一个参数 fields，它是一个对象，包含了表单中每个字段的值。它还将验证规则存储在实例属性 rules 中。它有两个方法：validate() 和 validateField()。validate() 方法对表单数据进行验证。如果表单数据无效，它将返回一个对象，包含了错误消息。如果表单数据有效，则返回 null。validateField() 方法用于验证单个表单字段的有效性。如果一个字段无效，它将返回一个字符串，表示错误消息。如果一个字段有效，则返回 null。required()、minLength()、maxLength()、email() 和 phone() 方法分别对应了验证规则中的必填项、长度限制、邮箱格式和手机号码格式等验证规则。
使用验证器
要使用验证器，首先需要获取表单中的每个字段的值。你可以通过以下方式获取表单数据：
const fields = {
username: document.querySelector('[name="username"]').value,
password: document.querySelector('[name="password"]').value,
email: document.querySelector('[name="email"]').value,
phone: document.querySelector('[name="phone"]').value,
};一旦获取表单数据，就可以创建一个验证器实例，并使用 validate() 方法验证表单数据的有效性：
const validator = new FormValidator(fields);
const errors = await validator.validate();
if (errors) {
console.log(errors);
} else {
console.log('Form is valid');
}上面的代码创建了一个名为 validator 的验证器实例，并使用 validate() 方法进行表单验证。如果表单数据无效，它将返回一个对象，包含了错误消息。如果表单数据有效，则返回 null。
总结
Validatores6 是一个灵活、易用、可扩展的表单验证库。你可以自定义验证规则，也可以使用现有的验证规则。通过使用 Validatores6，你可以快速创建复杂的表单验证，以确保表单数据的安全性和有效性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586d81e8991b448d5a62