computed实现简单的动态表单校验

有的业务会遇到表单的部分字段在特定的情况下发生校验,例如在下面的场景,当你选择了计量单位的时候,重量是必填的,但是不选择计量单位的时候,重量不是必填项,这个时候我们可以用computed来写校验规则:

     
        
          
            
              
                
                
              
            
          
          
            
              
            
          
        
      
 computed:{
    rules(){
      return {
        meterWeight: [
          {required: this.ruleForm.unitId ? true : false, message: '请填写重量!', trigger: 'blur' }
        ],
      }
    }
  },

 但是要注意,el-form有个validate-on-rule-change属性默认是true,每一次rules发生变化的时候都会触发一次验证,如果不是业务需要,可以将它设置为false,在提交的时候统一触发校验。

以上,以后遇到这样的业务,就可以使用computed实现简单的表单的动态校验了。

你可能感兴趣的:(vue,前端,el-form,前端,JavaScript,vue)