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

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