prop中写验证 rules 里面的属性 validator 为自定义验证名 自定义校验 callback 必须被调用
验证手机号和电子邮箱
data() { let validatePhone= (rule, value, callback)=>{ let phoneReg= /^[1][3,4,5,7,8,9][0-9]{9}$/; phoneReg.test(value) ? callback() : callback(new Error('请正确填写手机号')); }; let validateMail=(rule, value, callback)=>{ var mailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式 if(!value){ //判断不填写时不验证 callback() }else{ //验证 mailReg.test(value) ? callback() : callback(new Error('请正确填写电子邮箱')); } }; return { rules: { linkPhone: [{ validator: validatePhone, trigger: "blur" }], email:[{ validator: validateMail, trigger: "blur" }] } }; }
<el-col :span="12"> <el-form-item label="联系电话" prop="linkPhone"> <el-input v-model="form.linkPhone" placeholder="请输入联系电话" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="电子邮箱" prop="email"> <el-input v-model="form.email" placeholder="请输入电子邮箱" /> </el-form-item> </el-col>