element form 校验规则&自定义校验规则

总结： form 校验规则&自定义校验规则

1. 如template

  
   
    
    
     元
  
  

2. 在form 上定义上绑定 rules 属性， 给需要校验的item 增加prop 属性， prop 值需要个rules中的keys 保持一致

condFormRules:{
  budget:[
    {required: true, message: '', trigger: ['blur','change']},
    {validator: validateBudget, trigger: 'blur'},
  ],
}

说明：
(1) required： 是否必填， true则显示红星星， 当设置了必填时， 必须有message, 哪怕为空，否则不填时给默认提示"budget is required"

注意： 如{message: 'aaaaaaaa', trigger: ［"blur","change"］},  没有required，则会校验，但上次校验失败的信息不会自动消失， 即要有message时， 必须有required
  

(2) trigger: 可选［"blur","change"］触发执行校验的事件 blur：失去焦点时， change：数据改变时

     this.$refs.condFormRef.validate() 时，trigger都会执行

(3) validator：自定义校验属性，可以定义自己的校验规则，如validateBudget自定义的规则函数, 校验逻辑复杂时可以自定义函数实现。
如下校验逻辑复杂的：要求数字且正整数或最多带两位的小数

var validateBudget=(rule, value, callback) => {
      if(!value || !Number(value)){ //不输入或输0.0或0.00时，都进入
        callback(new Error('请输入预算'));
      }
      else if(!(/(^[1-9]\d*(\.\d{1,2})?)$/.test(value) || /(^[0](\.\d{1,2}){1})$/.test(value))){
        callback(new Error('请输入正整数或最多带两位的小数'));
        
      }
      
      else{
        callback();
      }
    };

简单时，可以直接写在模板中, 如限制输入数字