在el-form中自定义校验规则(关联字段校验,需要在校验方法中用到this)
官方写法el-form是支持自定义规则的,官网中是这么写的data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}setTimeout(() => {if (!Number.isInteger(value)) {
·
官方写法
el-form是支持自定义规则的,官网中是这么写的
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
return {
rules: {
pass: [
{ validator: validatePass, trigger:'blur'}
],
}
}
}
初步想法
结合我项目的实际,vue2+ts,那么应该是这样写:
limitPay = (rule: any, value: string, callback: any) => {
// console.log(this, value)
if (this.formModel.code == '') {
callback(new Error('code不能为空'))
} else {
if (this.showBINFlag) {
if (this.formModel.bin == '') {
callback(new Error('bin不能为空'))
}
}
callback()
}
}
rules: {
limit_pay: [{ validator: this.limitPay, trigger: 'change' }],
}
由上可以看出,我是想根据某个字段是否为空来判断当前字段是否报错。那么问题来了,我的formModel的数据是在created里面生成的,初始值其实是“{}”,而由于校验变量limitPay是在data中定义的,所以这里面的this拿到的值也是{},很显然在这里是获取不到对应的字段值的。
之后也想过将limitPay变量初始值定义为null,然后在created中为其赋值,但是还是一样的问题,rules里面只取了初始值。
最终解决方法
其实也很简单,就是直接定义一个方法,在该方法中返回自定义校验的方法即可:
rules: {
limit_pay: [{ validator: this.getValidator(), trigger: 'change' }],
}
created() {
// 获取表单的值
this.getFormModel()
this.getValidator()
}
getValidator() {
return (rule: any, value: string, callback: any) => {
// console.log(this, value)
if (this.formModel.code == '') {
callback(new Error('code不能为空'))
} else {
if (this.showBINFlag) {
if (this.formModel.bin == '') {
callback(new Error('bin不能为空'))
}
}
callback()
}
}
}
这样,返回的方法中得到的this就包含了初始化表单后的值了,如此也就能取到对应的字段值(必须先生成表单formModel的值之后再调用返回校验变量的方法)。当然,如果你是在data里面就可以获取到表单的当前值,也是没必要这么做的,只需要像我的初步想法那样就可以了。
总之还是要多想想
更多推荐
已为社区贡献3条内容
所有评论(0)