Element 表单rules校验

对于Element UI 我们肯定非常熟悉了，尤其是form的校验功能，简单方便。但是对于动态添加item元素，如何进行校验这里我们可以动态绑定

rules

rules: {
        productName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ]
}

自定义校验规则

rules: {
        phone: [
          {
          required: true, 
          validator: (rule, value, callback) => {
		       let reg = new RegExp("^1[0-9]{10}$");
					if (!reg.test(value)) {
		        callback(new Error('手机号输入不正确'));
						return false;
		      }else {
		        callback();
		      }
    	}, 
   		trigger: 'blur' 
   	}
  ]
}

常用方式

//表单
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="form-box">
	<el-form-item label="优惠活动" prop="activityDesc">
       <el-input type="textarea" v-model="ruleForm.activityDesc" placeholder="请输入优惠活动..." :rows="6" show-word-limit maxlength ="500"></el-input>
    </el-form-item>
</el-from>

动态添加

这里特别注意一下，prop 和v-model的赋值 (划重点)

<el-form-item 
  :rules="{ required: true, message: '请输入'+m.channelTypeName, trigger: 'blur' }" 
  :label="m.channelTypeName" 
  :prop="'channelTypeBenefitInfoList.'+i+'.benefitAmt'" 
   v-for="(m,i) in ruleForm.channelTypeBenefitInfoList" 
   :key="i"
 >
   <el-input v-model="m.benefitAmt" :placeholder="'请输入'+m.channelTypeName">
     <template slot="append">元</template>
   </el-input>
 </el-form-item>