【Vue项目实战】常见的el-form表单校验整理==＞异步调接口校验手机号唯一性

放轻松，享受生活。不知道怎么办的时候，相信自己的直觉。

目录 

一、常见的form表单校验

1.添加form表单校验

2.基础校验 

3.密码校验

二、异步调接口校验手机号唯一性

1.【前端】添加校验方式checkTelCode

2.【接口】调接口异步校验

---

一、常见的form表单校验

1.添加form表单校验

基础：参考Element UI  Element - The world's most popular Vue UI framework

// 在form表单中添加如下语句 并给表单起名为ruleForm
:rules="rules" ref="ruleForm"

2.基础校验 

// 1.必填校验
{ required: true, message: '请输入活动名称', trigger: 'blur' },

// 2.长度校验
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

// 3.选择select校验
{ required: true, message: '请选择活动区域', trigger: 'change' }

// 4.手机号校验
{
   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
   message: "请输入正确的电话",
   trigger: "blur",
},

// 5.邮箱校验
{  type: "email",  message: "请输入正确的邮箱",  trigger: "blur"  },

3.密码校验

密码一般需要符合一定的要求，并且需要校验两次输入密码相同

pwdRules: {
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkData, trigger: "blur" },
          {
            min: 8,
            max: 20,
            message: "长度在8到20个字符",
            trigger: "blur",
          },
          {
            required: true,
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$/,
            message: "包含大小写字母、数字和特殊字符的三种",
            trigger: "blur",
          },
        ],
        pwd1: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },

// 两次密码相同校验
var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pwdForm.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

// 不能输入汉字校验
var checkData = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("密码不能输入汉字!"));
        } else {
          callback();
        }
      }
      callback();
    };

如果需要修改，直接修改pattern中的正则表达式就可以了

二、异步调接口校验手机号唯一性

由于项目设置手机号登录，因此需要判断新建账号的手机号唯一。后端可以在添加时报错提示，但是用户友好的方式就是在注册时直接显示’手机号已经被注册‘。

1.【前端】添加校验方式checkTelCode

phonenumber: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: checkTelCode, trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的电话",
            trigger: "blur",
          },
        ],

data(){
    const checkTelCode = async (rule, value, callback) => {
      if (value) {
        await validPhoneUnique({ phonenumber: value }).then((response) => {
          if (response.code == 200) {
            callback();
          } else {
            callback(new Error("手机号已存在"));
          }
        });
      }
    };
    return {....}
}

 2.【接口】调接口异步校验

// 验证手机号唯一
export function validPhoneUnique(phonenumber) {
  return request({
    url: "/execute/info/validPhoneUnique",
    method: "get",
    params: phonenumber
  });
}