在前端开发中，表单校验是一个常见的需求。为了提高开发效率，我们可以使用 npm 包 valide 来简化表单校验的流程。valide 是一个超轻量级的表单校验库，提供了丰富的校验规则和自定义校验功能。
安装 valide
使用 npm 包管理工具进行安装
npm install valide
基本使用
在需要进行表单校验的页面中引入 valide
import Valide from 'valide'
创建校验器对象
通过 Valide 对象的静态方法 createValidator 创建校验器对象
const validator = Valide.createValidator()
添加校验规则
通过 validator 实例的 add 方法添加校验规则，该方法接收两个参数：属性名称及规则。规则的数据类型可以是字符串或数组，也可以指定自定义校验规则。
-- -------------------- ---- ------- -- ------- ------------------------- ----------------- -- ------ ------------------------- - - ----- ----------- -------- -------- -- - ----- --------------- -------- ---------- - -- -- ------- ---------------------- --- -- -------------------------------------------- ------ -------
执行校验
通过 validator 实例的 validate 方法进行校验，该方法接收一个对象作为输入，并返回一个校验结果对象，包含每个属性的校验状态和消息。
const input = {
username: '',
password: '',
email: 'test@com'
}
const result = validator.validate(input)判断校验结果
通过校验结果对象的属性，可以获取每个属性的校验状态和消息。
-- -------------------- ---- ------- --------------------------- -- ----- ----------------------------------- -- ---------- ---------- ----------------------------------- -- ---------- ----------- -------------------------------- -- ------- -------
超级用法
valide 除了提供基本的表单校验功能，还支持自定义校验规则及自定义消息。
自定义校验规则
valide 支持自定义校验规则，通过 validator 的 add 方法指定校验规则的名称和回调函数即可。
// 定义自定义校验规则
validator.extend('even', val => val % 2 === 0, '必须为偶数')
// 添加自定义校验规则
validator.add('num', 'even')自定义错误信息
添加校验规则时，可以通过 message 属性自定义提示消息。
validator.add('email', [
{ rule: 'required', message: '邮箱不能为空' },
{ rule: 'email', message: '邮箱格式不正确' }
])扩展校验规则
valide 内置的校验规则可能不满足需求，可以通过 validator 的 setRules 方法扩展校验规则。
// 扩展内置校验规则
validator.setRules({
even: val => val % 2 === 0,
odd: val => val % 2 === 1
})
// 添加扩展校验规则
validator.add('num', ['required', 'even'])示例代码
完整示例代码：
-- -------------------- ---- ------- ------ ------ ---- -------- ----- --------- - ------------------------ -- ------- ------------------------ --- -- --- - - --- -- -------- -- -------- -------------------- ----- --- -- --- - - --- -- ---- --- -- --- - - --- - -- -- ---- ------------------------- - - ----- ----------- -------- --------- -- - ----- -------- -------- ---------- -- - ----- --------------- -------- ------------- - -- ---------------------- - - ----- ----------- -------- -------- -- - ----- -------- -------- --------- - -- -------------------- ------------ -------- -- ---- ----- ----- - - --------- --- ------ -------- ---- --- - ----- ------ - ------------------------- -- ------ --------------------------- -- ----- ----------------------------------- -- ----------- ----------- -------------- -------------------------------- -- ----------- ------------------------------ -- ---------- --------
总结
valide 提供了一个轻量级的表单校验方案，支持多种校验规则和自定义校验。在实际开发中，可以结合前端框架和 UI 库使用，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66b09