使用JS手写一个类似 Laravel 验证器的表单验证器
作者：church
这篇文章主要为大家介绍了使用JS手写一个类似 Laravel 验证器的表单验证器实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
介绍
Laravel 的表单验证很方便，想在前端也用这样的方式进行验证。
期待这个表单验证库有这样的功能。
let validator = new Validation(this.registerForm, {
telephone: "required|telephone",
captcha: "required|length:5",
}, {
telephone: {
required: "手机号不能为空",
telephone: "手机号格式不正确",
},
captcha: "验证码不正确"
})
try {
validator.validate()
} catch(e) {
uni.showToast({
icon: 'error',
title: e.message
})
}构造函数的第三个参数 messages 可以不要，默认是英文提示。而且该参数支持不同粒度的错误信息，如果传对象，则如果对应的规则校验不通过，就使用对应的错误信息；如果传字符串，则不论什么规则未通过，都使用该错误信息。
内置一些规则，如果不够用，还可以自己扩展。
根据以上的需求，就有了这个库 @church1117/form-validation。
安装
npm install @church1117/form-validation
使用
import Validation from "@church1117/form-validation"
let data = {
name: "church",
mobile: "18565919379",
age: 19,
gender: '2',
password: "123456",
captcha: "12345",
idcard: '42052919910727452X',
email: "xxx@qq.com",
test: "ttt",
birthday: '1993/11/17',
}
let rules = {
name: "required|between:6,255",
mobile: "required|telephone",
age: "numeric|between:8,60",
gender: "numeric|range:" + gender.join(','),
password: "required|min:6|password",
captcha: "required|length:5",
idcard: "required|idcard",
email: "email",
// test: "required|testRule"
birthday: "datetime"
}
let messages = {
name: {
required: "名字不能为空",
between: "名称长度必须在6~255之间",
},
mobile: "不正确的手机格式",
age: {
numeric: "年龄不是一个有效的数值",
between: "年龄必须在18-60岁之间"
},
password: {
required: "密码不能为空",
min: "密码长度不能小于6位",
regex: "密码只能由数字、大小写字母构成",
},
captcha: "验证码不正确",
idcard: {
required: "身份证不能为空",
idcard: "身份证格式不正确",
},
test: {
required: "测试字段不能为空",
testRule: "该字段的值必须为test"
}
}
let validation = new Validation(data, rules, messages);- messages 可以定义不同粒度的错误信息，如果是字符串，那么该字段的所有验证规则都使用该错误信息。如果是对象，就只使用对应规则的错误信息。
内置规则
- required
- telephone
- min
- max
- between
- idcard
- range
- password
- numeric
- length
- datetime
自定义规则
匿名函数参数(value, field, ...params)
- value
- field
- ...params
Validation.register('testRule', function(value, field) {
if (typeof value != 'undefined' && value != 'test') {
throw new Error(`${field} must equal test`)
}
});测试
npm test
以上就是使用JS手写一个类似 Laravel 验证器的表单验证器的详细内容，更多关于JS Laravel表单验证器的资料请关注脚本之家其它相关文章！