介绍
edzif-validator-browser 是一个用于浏览器端的表单验证器，能够为表单提供较为完整的验证逻辑支持。该 npm 包提供了方便易用的 API 和针对每个表单元素的校验规则，能够有效地帮助前端开发者提高表单验证的效率和准确性。
安装
要在项目中使用 edzif-validator-browser，首先需要通过 npm 进行安装。在命令行中执行以下代码可完成安装：
npm install edzif-validator-browser --save
安装完成后，在项目中使用以下代码引入该 npm 包：
import validator from 'edzif-validator-browser';
使用
edzif-validator-browser 的使用非常简单。只需在表单元素上添加对应的验证规则和提示信息即可。以下是一个基本的示例：
<form id="myForm">
<input type="text" name="username" v-model="username" required :validator="{username: true}">
<input type="password" name="password" v-model="password" required minlength="8" maxlength="32" :validator="{password: true}">
<button type="submit" @click.prevent="handleSubmit">提交</button>
</form>在这个表单中，我们为用户名和密码两个输入框添加了验证规则，并通过绑定 validator 属性来启用。required 表示该输入框必须填写，minlength 和 maxlength 分别表示输入框中的最小和最大长度。比如，我们为用户名输入框添加了 {username: true} 的验证规则，表示该输入框必须填写。edzif-validator-browser 会根据这些验证规则对表单进行校验，并反馈给用户相应的提示信息。
下面是一个完整的示例：
-- -------------------- ---- -------
----------
----- ------------
------ ----------- --------------- ------------------ -------- ---------------------- -------
------ --------------- --------------- ------------------ -------- ------------- -------------- ---------------------- -------
------- ------------- -----------------------------------------
-------
-----------
--------
------ --------- ---- --------------------------
------ ------- -
------ -
------ -
--------- ---
--------- ---
--
--
--------- -
--------------------------
--
-------- -
-------------- -
-- ------------------------------ -
-- ------------------
- ---- -
-- --------------------
-
--
--
--
---------上述示例中，我们首先通过 import 引入了 edzif-validator-browser 包，然后在 mounted 钩子函数中，使用 validator.init 方法对整个表单进行初始化。最后，通过 validator.isValid 方法判断表单是否校验通过。
API 文档
edzif-validator-browser 包含以下 API：
validator.init(formSelector: string)
初始化整个表单。该方法需要传入表单的选择器字符串。它将获取所有的表单元素，并根据它们的属性（如 required、minlength 等）配置验证规则。当该方法执行完成后，整个表单就能进行校验了。
validator.addRules(rules: object)
添加自定义的验证规则。该方法需要传入一个对象，其属性名表示规则名称，属性值表示规则函数。这些规则函数将会在 validator.init 中被逐个添加到相应的表单元素中。
以下是一个示例：
validator.addRules({
phone: function(value) {
const reg = /^1\d{10}$/;
return reg.test(value);
},
});在这个示例中，我们添加了一个名为 phone 的验证规则。该规则需要检查输入框中的值是否符合中国大陆的手机号码规范。如果该规则返回 true，表示输入框中的值符合规范，校验通过；否则，校验失败。
validator.removeRules(rules: array)
移除指定的验证规则。该方法需要传入一个数组，其中的元素为要移除的规则名称。
以下是一个示例：
validator.removeRules(['phone']);
在这个示例中，我们移除了名为 phone 的验证规则。
validator.isValid(formSelector: string)
判断指定表单是否校验通过。该方法需要传入表单的选择器字符串。如果表单校验通过，该方法将返回 true；否则，返回 false。
以下是一个示例：
if (validator.isValid('#myForm')) {
// TODO：表单校验通过，可以提交数据
} else {
// TODO：表单校验未通过，不执行任何操作
}validator.showInputsError(inputs: array)
在指定的表单元素上显示错误消息。该方法需要传入一个数组，其中的元素为要显示错误消息的表单元素选择器字符串。
以下是一个示例：
validator.showInputsError(['input[name="username"]', 'input[name="password"]']);
在这个示例中，我们在名为 username 和 password 的输入框上显示错误消息。
validator.hideInputsError(inputs: array)
在指定的表单元素上隐藏错误消息。该方法需要传入一个数组，其中的元素为要隐藏错误消息的表单元素选择器字符串。
以下是一个示例：
validator.hideInputsError(['input[name="username"]', 'input[name="password"]']);
在这个示例中，我们在名为 username 和 password 的输入框上隐藏错误消息。
结语
edzif-validator-browser 是一个可靠、易用的浏览器端表单验证器，对于前端开发者来说是一个不错的选择。在实际使用中，我们还可以根据需要进行相应的扩展和优化，来满足更加复杂的表单验证需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553ef81e8991b448d144c