<span slot="footer">
<el-button v-on:click="visible = false">取消</el-button>
<el-button v-on:click="onSubmit('ruleForm')" style="background-color: #000;color: #fff;">提交</el-button>
</span>
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
console.log('进来了')
...其它逻辑
})
}
rules: {
SMSChannel: [
{ required: true, message: '请选择', trigger: 'change' }
],
Mobile: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: validatorMobile, message: '请输入正确的手机号码'}
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ pattern: emailReg, message: '请输入正确的邮箱' }
],
code: [
{ required: true, message: '请输入验证码' }
],
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在2-20个字符', trigger: 'blur' },
// { type: 'string',message:'格式不正确',trigger: 'blur', required: true, pattern: /^[\u2E80-\u9FFF\.A-Za-z]{1,}\s*[\u2E80-\u9FFF\.A-Za-z]{1,}$/}
],
Birthday: [
{ required: true, message: '请选择生日' }
],
Gender: [
{ required: true, message: '请选择性别' }
],
location: [
{ required: true, message: '请选择所在地' }
],
address: [
{ required: false, message: '请选择国家/地区' }
],
//shopAddress: [
// { required: true, message: '请选择店铺所在地' }
//],
channel: [
{ required: false, message: '请选择' }
],
phoneOrEmail: [
{ required: true, message: '请输入联系电话', trigger: 'blur' }
]
}
let validatorMobile = (rule, value, callback) => {
const reg = mobileReg
if (!reg.test(this.ruleForm.Mobile)) {
//this.$message({
// showClose: true,
// message: '请先填写正确的手机号码',
// type: 'warning'
//});
return callback("请先填写正确的手机号码");
}
return callback();
}
如图,调试的时候,我在validate内部打印了一句话,打开调试工具,发现怎么也不执行。调试了半天,终于发现了问题,同事在进行手机号自定义校验的时候没有进行callback回调。callback函数没有执行,validate函数就不会执行,之后我加了callback代码逻辑后,validate函数就正常执行了。