1、效果图
不填时不校验
填写手机号、用户邮箱时,进行校验
2、代码部分
<el-form-item label="手机号" prop="data5">
<el-input class="w-450" size="small" v-model="dialogForm.data5" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="用户邮箱" prop="data6">
<el-input class="w-450" size="small" v-model="dialogForm.data6" placeholder="请输入用户邮箱"></el-input>
</el-form-item>
data5: [{ validator: PhoneValidator, trigger: 'change' }],
data6: [{ validator: EmailValidator, trigger: 'change' }],
let PhoneValidator = (rule, value, callback) => {
if (!value) {
return callback()
} else {
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
if (!reg.test(value)) {
callback(new Error('请输入正确手机号'))
return
}
callback()
}
}
let EmailValidator = (rule, value, callback) => {
if (!value) {
return callback()
} else {
if (/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value) || value === undefined) {
callback();
} else {
callback(new Error("请输入正确格式邮箱"));
}
callback()
}
}