实现效果

1.引入Form表单
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="70px">
<!-- 邮箱 -->
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<!-- 手机号 -->
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
2.在data中写入检验邮箱/手机号合法性的验证规则
data(){
var checkEmail = (rule,value,cb) => {
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(regEmail.test(value)){
return cb();
}
cb(new Error('请输入合法的邮箱!'));
}
var checkMobile = (rule,value,cb) =>{
const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if(regMobile.test(value)){
return cb();
}
cb(new Error('请输入合法的手机号!'));
}
}
3. 添加表单的验证规则
data(){
return(){
addForm:{
email:'',
mobile:'',
},
addFormRules:{
email:[
{
required: true, message: '请输入邮箱', trigger: 'blur'},
{
validator: checkEmail, trigger: 'blur'}
],
mobile:[
{
required: true, message: '请输入手机号', trigger: 'blur'},
{
validator: checkMobile, trigger: 'blur'}
],
},
}
}