什么是 Valli
Valli 是一个轻量级的 JavaScript 表单验证库。它的目标是提供简单可靠的表单验证方法，使开发者可以快速构建出拥有高质量输入验证的表单。它很容易使用，通过几个简单的 API 就可以轻松地实现表单的验证功能。
安装
你可以通过 npm 安装 Valli：
npm install valli
导入
你需要导入 Valli：
import Valli from 'valli';
使用
Valli 可以用一个 JSON 对象来表示表单验证规则，一个JSON对象对应一个表单：
-- -------------------- ---- ------- ----- ----- - - --------- ------- -------------- ------ ----------- ---- -- ---- ----- ------ ------- ------------ --------- ------- -------------- ------ ----------- ---- -- ---- ----- ----------------- ------- ---------- ------- ------------- ------ ------- -------------- -- ----- - - --- -------------
在例子中，我们定义了一个包含了表单验证规则的 rules对象。每个规则都有一个 rule 属性，表示需要使用哪个验证规则，此外其他属性表示该规则的一些参数。
v 变量是一个 Valli 实例，它将用于验证表单。
Valli 目前支持以下验证规则：
isRequired：必填项验证isEmail：电子邮件验证isLength：字符串长度验证matches：相等或不相等验证isChecked：勾选框是否选中
在对表单进行验证时，我们只需要调用 v.validate() 方法，并传入要验证的表单对象即可。该方法会返回一个具有以下两个属性的对象：
isValid:表示表单是否通过验证errors: 表单验证错误的数组
代码示例：
-- -------------------- ---- -------
----- ---- - ----------------------------------
------------------------------- --- -- -
-------------------
----- -------- - --- -------------------
----- ---------------- - ---------------------
-- -------------------------- -
-- ----------
- ---- -
-- ----------
-
---在例子中，我们先获取了表单数据，然后调用 v.validate(formData) 对表单进行验证。
如果表单通过了验证，则调用服务器 API 发送表单数据到服务器。
如果表单未通过验证，则将表单验证错误信息显示给用户。
Valli 高级用法
Valli 可以通过自定义规则来满足你的需求。你可以使用 Valli.addRule 方法来添加一条自定义规则。
例如：自定义一个银行卡格式验证规则：
Valli.addRule('isBankCard', (value) => {
return /^\d{16}|\d{19}$/.test(value);
});在代码中，我们使用 Valli.addRule 方法，将一条自定义规则 isBankCard 添加到 Valli 验证规则中，其中规定传入的值为符合规则的 16 或 19 位数字。
总结
在本文中，我们介绍了 Valli 这个 npm 包的使用教程——如何安装、导入和验证表单。Valli 是一个能够方便实现表单验证的 JavaScript 库。通过对 Valli 的了解，我们更能够掌握表单验证的方法，设计更加完善且合理的验证规则，进而提高表单的质量，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728581e8991b448e8bc5