正常的表单验证 ：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="search_area"> <el-form-item label="联系电话" prop="phone" class="itemRequiredStyle"> <el-input v-model="ruleForm.phone" placeholder="请输入手机号码" class="inp_normal inpStyle"></el-input> </el-form-item> </el-form> <script> export default { name:"", // 验证手机 let checkPhone = (rule, value, callback) => { let reg = /^1[345789]\d{9}$/ if (!reg.test(value)) { callback(new Error('请输入11位手机号')) } else { callback() } } return{ rules: { phone: [ { required: true, message: '请输入手机号', trigger: 'blur' }, { type: 'number', validator: checkPhone, message: '请输入11位有效手机号号码', trigger: ['blur', 'change'] } }, } </script>但是表单空间是动态创建的时候 直接在data内写 validator 是报错的 此时需要单独对表单控件 单独在行内进行验证
将validator的校验规则写在methods 内 动态创建时 需要注意 :prop值 具体写法参考
https://element.eleme.io/#/zh-CN/component/form
下面以手机号验证作为案例：
<el-form-item class="itemStyle" label="联系电话" label-width="80px" :prop="'parent_info.' + index + '.phone'" :rules="[ {required: true, message: '电话不能为空',trigger: ['blur', 'change']}, { validator: (rule, value, callback)=>{checkPhone(rule, value, callback)}, trigger: ['blur', 'change'] } ]" > <el-input v-model="item.phone" placeholder="请输入" class="inp_normal inpStyle" ></el-input> </el-form-item> // methods methods:{ //验证手机号 checkPhone(rule, value, callback){ let reg = /^1[345789]\d{9}$/ if (!reg.test(value)) { callback(new Error('请输入11位手机号')) } else { callback() } }, }效果如图
