关于element表单校验（二）

动态表单添加和校验

　如图点击+号，就会添加一个联系方式

　　

 

 

 

html代码，其实这里主要注意html代码的不同，js的代码跟普通的校验没什么区别

<el-col :span="12">
    <el-form-item v-if="index==0" label="联系方式：" :prop="'information.' + index + '.phone'" :rules="selfSubmitDataRule.phone" class="phone-form">
         <el-input v-model="item.phone" placeholder="请输入联系方式" :disabled="ifCanEdit||overTimeLock"></el-input>
    </el-form-item>
    <el-form-item  v-else label="联系方式：" :prop="'information.' + index + '.phone'" :rules="selfSubmitDataRule.phone1" class="phone-form">
          <el-input v-model="item.phone" placeholder="请输入联系方式" :disabled="ifCanEdit||overTimeLock"></el-input>
      </el-form-item>
</el-col>

js代码

data(){
  var telephoneNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系方式不能为空"));
      } else {
        const reg1 = /^1[3|4|5|7|8][0-9]\d{8}$/;
        // const reg2 = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
        if (reg1.test(value)) {
          callback();
        } else {
          return callback(new Error("请填写正确的手机号"));
        }
      }
    };  
  return {
       selfSubmitDataRule: {
        phone: [
          {
            required: true,
            validator: telephoneNumber,
            trigger: "blur",
            max: 11
          }
        ]
      },  
    }  
}