elementui表单规则校验
rules中单个表单域校验规则可以包含多个数组,每个数组即是一条校验规则
rules属性
属性说明
- type 标志要使用的validator的数据类型
可选值:
string: 字符串类型(默认值) | number: 数字类型
boolean:布尔类型 | method: 函数类型 | regexp:正则表达式
integer: 整型 | float: 双精度浮点型数字 | array: 数组类型
object: 对象类型 | enum: 枚举值 | date: 日期格式
url: 网址格式 | hex: 16进制数字 | email: 电子邮箱格式
any: 任意类型 - required 必填
- message 未通过校验的提示信息
- trigger 触发条件 (change||blur)
- min 最小值、max 最大值
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
- len 精准长度 (优先级高于min,max)
rules: {
type: "array", required: true, len: 3
}
- fields:
深层规则,可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则,如地址对象的省市区的规则验证:
object类型:
address: {
type: "object", required: true,
fields: {
street: {type: "string", required: true},
city: {type: "string", required: true},
zip: {type: "string", required: true, len: 8, message: "invalid zip"}
}
}
array类型:
roles: {
type: "array", required: true, len: 3,
fields: {
0: {type: "string", required: true},
1: {type: "string", required: true},
2: {type: "string", required: true}
}
}
- enum 枚举中存在该值 (type必须为enum类型)
role: {type: "enum", enum: ['admin', 'user', 'guest']}
- whitespace 不能包含空白符
whitespace: [{
type: "string",
message: '只存在空格',
whitespace:true,
trigger: ['change', 'blur']
}]
- pattern 正则表达式 (必须加 required: true)
{ type : "string" , required: true , pattern : /^[a-z]+$/ }
- validator函数 为指定字段自定义验证函数
关于validator函数
validator(rule,value,callback,source, options)
参数说明:
- rule:指向该条规则对象。
- value:新的值,用于参与运算、对比。
- callback:执行回调,使用方法是:callback(‘…’)
如果不传参:表示验证通过,一般不必专门强调。
如果传入值:字符串会作为错误提示,但是显示优先级低于外层的message。
【比如callback(‘嘻嘻嘻’);跟message: '哈哈哈’同时存在,则会提示哈哈哈。】 - source:是一个对象,结构类似{completionTime: “2020-08-09”},也就是键值对。因为跟value的值一致,所以source可以不用。
- options:额外配置项
-first {Boolean值}:true则表示第一个未通过校验的字段发生错误就调用 callback,即不再继续校验剩余字段
-firstFields {Boolean/StringArray值}:多条校验规则的配置
-Boolean:每个字段的第一个规则发生错误就调用 callback,即不再继续校验该字段的剩余规则
-StringArray:指定字段的第一个规则发生错误就调用 callback
-suppressWarning {Boolean}:是否禁止无效值的内部警告
使用方式:
export default {
data() {
......
//第一步:自定义校验函数
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
//第二步:在rules中使用
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
......
}
};
},
......
}
案例1:
要求:完工时间应晚于开工时间
代码实现:
startTime: [
{ required: true, message: "开工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() >= new Date(this.form.completionTime).getTime()) {
callback('');
}
}, message: "开工时间应早于竣工时间", trigger: "blur" },
],
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() <= new Date(this.form.startTime).getTime()) {
callback('');
}
}, message: "竣工时间应晚于开工时间", trigger: "blur" },
],
案例2:
要求:开工时间与竣工时间不能同一天”。(此时需展示多个回调,应该删除message)
startTime: [
{ required: true, message: "开工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() > new Date(this.form.completionTime).getTime()) {
callback('开工时间应早于竣工时间');
} else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
callback('开工时间与竣工时间不能同一天');
}
}, trigger: "blur" },
],
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() < new Date(this.form.startTime).getTime()) {
callback('竣工时间应晚于开工时间');
} else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
callback('开工时间与竣工时间不能同一天');
}
}, trigger: "blur" },
],
案例3
要求:考虑Promises异步。如果返回一个Promise对象,则其中必须有reject或callback抛出错误值,才会在界面上报错
代码实现:
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ required: true,
validator: (rule, value, callback) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('test'); // 或者写 callback('test') 也可以实现报错
}, 2000);
});
},
trigger: "blur"
},
],
案例4:
要求:考虑非Promises异步。比如就一个setTimeout,此种情况必须用callback抛出错误:
代码实现:
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ required: true,
validator: (rule, value, callback) => {
setTimeout(() => {
callback('test');
}, 2000);
},
trigger: "blur"
},
],
案例5:
要求:使用正则校验,有楼号、房间号,房间号必须以楼号开头,中间必须有0。
代码实现:
floor: [
{ required: true, message: '楼层不能为空', trigger: 'blur' },
{ validator: (rule, value, callback, source, options) => {
if (value[0] === '0') {
callback('首位不得为0');
} else if (value > 99) {
callback('楼层不得超过99');
} else if (this.form.roomNumber && !new RegExp('^' + value).test(this.form.roomNumber)) {
callback('房间号前需加楼层,例如:' + value + '02');
} else {
callback();
}
}, trigger: "blur" },
],
roomNumber: [
{ required: true, message: '房间号不能为空', trigger: 'blur' },
{ validator: (rule, value, callback, source, options) => {
if (!this.form.floor) {
callback('请先填写楼层');
} else if (value.length > 4) {
callback('房间号最多4位');
} else if (!new RegExp('^' + this.form.floor).test(value)) {
callback('房间号前需加楼层,例如:' + this.form.floor + '02');
} else if (value.slice(-2, -1)[0] !== '0') {
callback('房间号倒数第二位需是0,例如:' + this.form.floor + '02');
} else {
callback();
}
}, trigger: "blur" },
]
参考文章:
https://www.jianshu.com/p/b69adfad263d