1. Common form form validation

1. Add form form verification

Basics: Refer to Element UI Element - The world's most popular Vue UI framework

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

2. Basic verification

// 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. Password verification

The password generally needs to meet certain requirements, and it needs to be verified that the password entered twice is the same

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

If you need to modify, just modify the regular expression in the pattern directly

2. The asynchronous call interface checks the uniqueness of the mobile phone number

Since the project sets mobile phone number login, it is necessary to determine that the mobile phone number of the newly created account is unique. The backend can report an error message when adding, but the user-friendly way is to directly display 'the phone number has been registered' when registering.

1.【Frontend】Add verification method 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. [Interface] Call interface asynchronous verification

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

[Vue project actual combat] Common el-form form verification and arrangement ==> asynchronous call interface to verify the uniqueness of the mobile phone number