element-plus表单校验邮箱

视图层

 <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'] }
        ]
      }
    };
  },