携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

一、常见的form表单校验

1.添加form表单校验

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

: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.密码校验

1. 必填

{ required: true, message: "请输入密码", trigger: "blur" },

2.输入不为汉字

{ validator: checkData, trigger: "blur" },

3.长度范围2-8位

min: 8,max: 20,

4.包含大小写字母、数字和特殊字符的三种

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}$/,

5.两次输入相同校验

{ validator: validatePass2, trigger: "blur" },

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

        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

          { 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",
          },
        ],

每次填入数据之后都会触发判断，通过接口向后台请求数据，根据后台返回的结果来显示最终的判断。当后台返回200时通过，不为两百时报错误提示

    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
  });
}