开发常用 -- 校验表单 -- 电子邮箱的校验-正则

要求：必填，满足电子邮箱的规则

html：

      <el-form
        :model="formValidate"
        :rules="rules"
        ref="formValidate"
        label-width="120px"
        style="width: 90%"
      >
        <el-form-item label="账号:" prop="email">
          <el-input v-model.trim="formValidate.email" placeholder="请输入电子邮箱" />
        </el-form-item>
      </el-form>

js： 

引入 validate.js

import validate from "@/utils/validate";

 validate.js文件内容：

/**
 * 检查证电子邮件是否合法
 */
function checkEmail(userEmail){
  if (userEmail == "" || userEmail == null) {
    return {data: false, msg: '请输入邮箱'};
  }
  var mailreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  if (!mailreg.test(userEmail)) {
    return {data: false, msg: '电子邮件格式不正确'};
  }
  return {data: true, msg: ''};
}

export default {
  checkEmail
}

使用： 

  data() {
    return {
      formValidate: {
        email: '',
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入电子邮箱",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback, source, options) => {
              let error = [];
              let checkRes = validate.checkEmail(value);
              if (!checkRes.data) {
                error.push(checkRes.msg);
              }
              callback(error);
            },
            trigger: "blur",
          },
        ]
      },
    };
  },