视图层
<el-dialog v-model="dialogFlag" width="500px" :close-on-click-modal="false" custom-class="podEditorDialog" @close="dialogClose" :title="diaTitle">
<el-form ref="addOrEditorForm" :model="addOrEditorForm" label-width="100px" :rules="addOrEditorRules" style="padding: 0 30px 20px">
<el-form-item label="手机号:" prop="phoneNumber">
<el-input v-model.trim="addOrEditorForm.phoneNumber" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="邮箱:" prop="staffEmail">
<el-input v-model="addOrEditorForm.staffEmail" placeholder="请输入邮箱" />
</el-form-item>
</el-form>
<div style="text-align: center">
<el-button type="primary" size="default" @click="submitForm">确 定</el-button>
<el-button size="default" @click="dialogClose">取 消</el-button>
</div>
</el-dialog>
逻辑校验
data() {
const validate_phoneNumber = (rule, value, callback) => {
const reg = /^[1][3-9][0-9]{9}$/;
if (!reg.test(value) && value != '') {
callback(new Error('请输入正确的手机号码'));
} else {
callback();
}
};
// 邮箱校验
const validate_email = (rule, value, callback) => {
var emailRegExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
var emailRegExp1 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if ((!emailRegExp.test(value) && value != '') || (!emailRegExp1.test(value) && value != '')) {
callback(new Error('请输入有效邮箱格式!'));
} else {
callback();
}
};
return {
addOrEditorForm: {
phoneNumber: '',
staffEmail: ''
},
addOrEditorRules: {
phoneNumber: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validate_phoneNumber, trigger: ['blur'] }
],
staffEmail: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: validate_email, trigger: ['blur'] }
]
}
};
},