vue2+elementUI 表单关联验证

最近项目有一个表单联动验证需求

如上图，表单必须满足佣金不能大于价格
先写验证函数和data的rules

let validatePrice = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入价格'));
 } else if (value * 1 < this.productForm.brokerage * 1) {
        callback(new Error('价格不能小于佣金'));
 } else {
        callback();
 }
}
let validateBrokerage = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入佣金'));
 } else if (value * 1 > this.productForm.price * 1) {
        callback(new Error('佣金不能大于价格'));
 } else {
        callback();
 }
}

rules: {
 price: [{validator: validatePrice, trigger: 'blur'}],
 brokerage: [{validator: validateBrokerage, trigger: 'blur'}],
},

普通验证是没什么问题的

但会出现一个问题，价格输入大于佣金时，佣金的验证并不会响应式

解决方法
使用watch监听当佣金大于价格时重新验证表单
productForm是一个对象，必须深度监听(deep:true)

watch:{
    productForm:{
        handler(n,o){
            if (n.brokerage > n.price){
                this.$refs.productForm.validateField(['price','brokerage'],(v)=>{
                    console.log(v)
                })
            } else {
                this.$refs.productForm.clearValidate(['price','brokerage'])
            }
        },
        deep:true
    }
},

完美解决！