今天遇到一个奇怪的bug 我在使用ant-design-vue组件库自定义表单验证的时候出现的
在ant-design-vue组件库里面定义的自定义校验规则是这样的validator
在网上找了很多资料里面不是说
1.检查自定义函数是否有问题
2.检查校检字段信息
可是我两个都看了并没有问题 但是还是一直提示报错。
自定义函数必须是三个参数rule,value,callback
这三个而且callback
这个参数必须存在而且在第三个位置,可是我写的是对的呀,控制台还是报错
methods: {
checkitLo(rule, value, callback) {
if (value) {
if (!value == null || value.length != 0) {
var reg = /^[1-9]\d{0,2}\.\d{5}[1-9]$/
if (reg.test(value)) {
if (value < 73.66 || value > 135.05) {
callback(new Error('经度范围是73.66至135.05,保留6位小数且最后一位不能为0'))
} else {
callback()
}
} else {
callback(new Error('经度范围是73.66至135.05,保留6位小数且最后一位不能为0'))
}
}
}
},
}
是说这个validator所对应的函数不能加()也就是说不能写成validator: this.checkitLo()
这样的 要写成validator: this.checkitLo
这样的,所以我写的没有问题,但是控制台还是报错
data() {
return {
validatorRules: {
longitude: [{ required: true, message: '请输入经度' }, { validator: this.checkitLo }]
},
}
}
后来我在看页面上面写的表单的时候找到了错误
是多加了一个这个校验,真是粗心~ 然后删除之后,愉快的解决问题!啦啦啦~ 问题解决,心情美美哒!