vue+elementui给遍历生成表单添加效验

一个写bug的人2024-02-09 17:57

vue页面

javascript 复制代码

<el-form ref="form" :model="form" label-width="150px" :inline="true" :rules="formRules">
    <el-collapse-item
      :name="index + 1"
      v-for="(item, index) in form.list"
      :key="index"
    >
    <el-form-item
	 :prop="`list[${index}].peoples[${idx}].phone`"
	 :rules="formRules.phone"
	>
      <el-input v-model="i.phone"></el-input>
      </el-form-item>
       <el-form-item
         :prop="`list[${index}].peoples[${idx}].eamil`"
         :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]"
       >
   		<el-input v-model="i.eamil"></el-input>
 	</el-form-item>
   </el-collapse-item>
 </el-form>

js 页面

javascript 复制代码

 data() {
        var checkPhone = (rule, value, callback) => {//手机号码校验
            const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/
            console.log('vv',value);
            if (!value) {
              return callback(new Error('电话号码不能为空'))
            }
            setTimeout(() => {
              if (!Number.isInteger(+value)) {
                callback(new Error('请输入数字值'))
              } else {
                if (phoneReg.test(value)) {
                  callback()
                } else {
                  callback(new Error('电话号码格式不正确'))
                }
              }
            }, 100)
          }
        return {
            formRules:{
                'phone':[
                    { required: true,validator: checkPhone }
                ]
            },
   		}
   }