vue elementui 表单验证笔记_element ui form 异步校验callback阻塞-CSDN博客

本文详述了在前端项目中使用Vue.js和ElementUI进行表单验证的方法，重点介绍了el-form和el-form-item的配置，以及自定义验证规则时需要注意的细节，如返回回调函数callback和确保所有分支调用callback。

本篇文章基于 elementui

form表单在前端行业中使用频率可以说时非常之高了，element对于表单进行了封装，做成了el-form组件，在form表单中验证几乎是必不可少的部分了，把自己了解到的记录一下（肯定不全，以后再补充吧，也欢迎各路大佬帮忙补充）。

参数	取值	说明
required	true	必填
required	false	非必填
message	string	提示消息
trigger	blur	失去焦点
trigger	change	值发生改变
min	number	最小长度
max	number	最大长度
type	string	字符串
	number	数字
	boolean	布尔值
	array	数组
	date	日期
	email	邮箱
validator	变量	自定义检验规则
pattern	正则表达式	自定义正则

使用的时候注意：

el-form 标签中的 :rules 名字要和 retrun 中的一致； el-form-item 中的 prop 与 :rules 中的数组名称一致； validator 属性中自定义变量写在 data 中， value 就是要验证的值。

自定义检验规则的一些坑：

1. 不能直接return，必须返回一个回调函数 callback() ；

callback()参数为空代表验证通过，返回new Error("提示内容")代表验证不通过

2. 必须每个分支都调用了callback方法；

这个问题就是if判断的时候你必须有else，必须补全，不然无法执行；

<el-form ref="loginForm" :model="loginForm" :rules="rules" class="loginForm">
  <el-form-item label="账号" prop="userName">
      <el-input type="text" v-model="loginForm.userName" placeholder="请输入您的帐号"/>
  </el-form-item>
  <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
      <el-input type="text" v-model="loginForm.email" placeholder="请输入邮箱"/>
  </el-form-item>
</el-form>
import {isPassword,isuser} from "@/utils/validate";
export default {
  data() {
    const username = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    return {
      loginForm:{
        userName: "",
        password: "",
        email: "",
      },
      rules:{
        userName:[
          {required:true,trigger:"blur",validator:username},
          // 必填，失去焦点触发自定义判断username
          {min:2,max:16,trigger:"change",message:"帐号格式错误"}
          // 长度在2-16之间，input值发生改变时都会触发
        ],
        password:[
          {required:true,trigger:"blur",message:"密码不能为空"},
          {pattern:/^[a-zA-Z0-9_]{6,16}$/,message:"密码格式由字母、数字和下划线组成，长度为6-16位",trigger:"change"}
          // 自定义正则验证，input值改变触发
        ],  
        email:[
          {required:true,trigger:"blur",message:"邮箱不能为空"},
          {type:'email',message:'请输入正确的邮箱地址',trigger:['blur','change']}
          // 自带验证方式email，失去焦点时触发
        ]
      }
    }
  },
}