el-form 校验规则和自定义校验规则and 动态定义校验规则

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

一、 定义静态的校验规则

1. 如template

<el-form 
ref="condFormRef" 
id="condForm" 
:model="cond" 
label-width="100px" 
size="mini" 
:rules="condFormRules"
>
 
<!-- rules 内嵌在el-form-item -->
<el-form-item label="名称：" prop="name" :rules="{required: true, message: '请输入名称', trigger:'blur'}">
    <el-input
    v-model="cond.name">
    </el-input>
  </el-form-item>


 <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:[//带prop的
    {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>

二、定义动态的校验规则
当我们的表单项是动态生成的， 又需要对其进行输入值的校验， 怎么做呢？？？？？
比如添加一个用户信息，让其输入并校验

<el-col :span="6">
      <el-button @click="addInfo">添加学生信息</el-button>
      <el-form ref="testForm" :model="testModel" label-width="100px"> 
        <div 
        style="border: 1px solid #000000"
        v-for="(info, index) of testModel.studentsInfos"
        :key="'info_'+index"
        >
          <el-form-item
          label="名字"
          :prop="'studentsInfos.' + index + '.name'"
          :rules="{required: true, message: '请输入名称', trigger:'blur'}"
          >
            <el-input v-model="info.name"></el-input>
          </el-form-item>

          <el-form-item
          label="年龄"
          :prop="'studentsInfos.' + index + '.age'"
          :rules="validateAge"
          >
            <el-input v-model="info.age"></el-input>
          </el-form-item>

          <el-form-item
          label="性别"
          :prop="'studentsInfos.' + index + '.sex'"
          :rules="{required: true, message: '请选择性别', trigger:'change'}"
          >
            <el-select v-model="info.sex">
              <el-option label="男" value="man"></el-option>
              <el-option label="女" value="women"></el-option>
            </el-select>
          </el-form-item>

        </div>        
        <el-form-item label="">
            <el-button @click="testSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>

效果图如下

data() {
    return {

      testModel:{studentsInfos: []
      },

      validateAge: [
      {required: true, message: "请输入您的年龄", trigger: ['blur', 'change']},
      
      {validator: (rule, value, callback)=>{
        if(value&& !(/^\d+$/g).test(value)){
          callback(new Error("请输入数字"))
        }
        callback()
        }
      }
      ]
}

methods: {
    addInfo(){
      this.testModel.studentsInfos.push({name: "", age: "", sex: ""})
    },

    testSave(){
      this.$refs['testForm'].validate((valid)=>{
        if(valid){
          console.log("校验通过， 可以保存了")
        }
        else{
          console.log("校验失败")
        }
      })
    },
}

动态校验主要是定义的prop, 在那个数据里存的， 根据索引位置找到要校验的字段
如 :prop="'studentsInfos.' + index + '.name'" 两个点一定不要忘记了哦