关于vue.js:element-form-校验规则amp自定义校验规则

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

1. 如 template

<el-form 
ref="condFormRef" 
id="condForm" 
:model="cond" 
label-width="100px" 
size="mini" 
:rules="condFormRules"
>
  <el-form-item label="估算：" prop="budget">
   
    <el-input
    style="width:60%"
    v-model="cond.budget"
    maxlength="15"
    clearable>
    </el-input>
    <small>&nbsp; 元 </small>
  
  </el-form-item>
</el-form>

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();
      }
    };

简略时，能够间接写在模板中, 如限度输出数字

<el-input
  style="width:60%"
  v-model="cond.budget"
  maxlength="15"
  @input="cond.budget = cond.budget.replace(/[^\d]/g,'')" // 非数字的全局替换成空
  clearable>
  </el-input>