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

小白Rachel

已于 2022-07-18 16:27:10 修改

阅读量4.1k

点赞数 4

CC 4.0 BY-SA版权

于 2022-07-18 16:23:46 首次发布

本文链接：https://blog.csdn.net/Sabrina_cc/article/details/125851204

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

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