实现elementUI表单的全局验证的方法步骤
使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。
验证规则
分析规则
一般验证规则，主要是是否必填，不为空，以及参数类型的验证。基于这个条件，我们开始找找思路,单个字段的验证是这样的：
name:{
required:是否必填,
validator:自定义规则,
message:失败提示消息(非自定义时触发),
trigger:触发方式
}
循环实现
固定的规则。当一个东西固定之后，那必然是可以重复使用的，并且可以快速生成，我们可以用循环来实现它。但是用循环来实现，我们则需要一个数据规则。
定义数据规则
分析下需要的字段，大概就是以下几种，其他的可以根据自身的需求去增加：
- 验证的字段名label
- 验证的值value
- 验证的类型type
- 是否必填required
- 自定义规则validator
那最终我们得到的是这样一个字段配置列表:
fieldList:[
{label:'账号',value:'account',type:'input',required:true,validator:checkAccount},
{label:'密码',value:'password',type:'password',required:true,validator:checkPwd},
{label:'昵称',value:'name',type:'input',required:true},
{label:'性别',value:'sex',type:'select',list:'sexList',required:true},
{label:'头像',value:'avatar',type:'slot',className:'el-form-block'},
{label:'手机号码',value:'phone',type:'input',validator:checkPhone},
{label:'微信',value:'wechat',type:'input',validator:checkWechat},
{label:'QQ',value:'qq',type:'input',validator:checkQQ},
{label:'邮箱',value:'email',type:'input',validator:checkEmail},
{label:'描述',value:'desc',type:'textarea',className:'el-form-block'},
{label:'状态',value:'status',type:'select',list:'statusList',required:true}
]
form完整的字段配置建议参考：
formInfo:{
ref:null,
data:{
id:'',//*唯一ID
account:'',//*用户账号
password:'',//*用户密码
name:'',//*用户昵称
type:2,//*用户类型:0:手机注册1:论坛注册2:管理平台添加
sex:0,//*性别:0:男1:女
avatar:'',//头像
phone:'',//手机号码
wechat:'',//微信
qq:'',//qq
email:'',//邮箱
desc:'',//描述
status:1//*状态:0：停用，1：启用(默认为1)',
//create_user:'',//创建人
//create_time:'',//创建时间
//update_user:'',//修改人
//update_time:''//修改时间
},
fieldList:[
{label:'账号',value:'account',type:'input',required:true,validator:checkAccount},
{label:'密码',value:'password',type:'password',required:true,validator:checkPwd},
{label:'昵称',value:'name',type:'input',required:true},
{label:'性别',value:'sex',type:'select',list:'sexList',required:true},
{label:'头像',value:'avatar',type:'slot',className:'el-form-block'},
{label:'手机号码',value:'phone',type:'input',validator:checkPhone},
{label:'微信',value:'wechat',type:'input',validator:checkWechat},
{label:'QQ',value:'qq',type:'input',validator:checkQQ},
{label:'邮箱',value:'email',type:'input',validator:checkEmail},
{label:'描述',value:'desc',type:'textarea',className:'el-form-block'},
{label:'状态',value:'status',type:'select',list:'statusList',required:true}
],
rules:{},
labelWidth:'120px'
}
实现验证方法
一:循环字段列表，根据type判断是提示选择不能为空，还是输入不能为空
二：如果字段必填，则根据是否有自定义验证去生成验证规则
三:字段非必填，有自定义规则生成验证
//初始化验证数据
_initValidate(formInfo){
constobj={},
fieldList=formInfo.fieldList
//循环字段列表
for(letitemoffieldList){
lettype=item.type==='select'?'选择':'输入'
if(item.required){
if(item.validator){
obj[item.value]={
required:item.required,
validator:item.validator,
trigger:'blur'
}
}else{
obj[item.value]={
required:item.required,
message:'请'+type+item.label,
trigger:'blur'
}
}
}elseif(item.validator){
obj[item.value]={
validator:item.validator,
trigger:'blur'
}
}
}
formInfo.rules=obj
}
使用
结合上面的字段设计，我在页面上的使用是这样的，大家可以根据自己的字段设计去修改，大致实现过程是这样的
//mixin中的方法,初始化字段验证规则 this._initValidate(this.formInfo)
怎么配置到全局
- 通过mixin配置，然后在页面中使用(个人使用的是mixin)
- 配置为全局方法在页面中调用
- 挂在到vue实例上，通过this即可访问
mixins例子
exportdefault{
data(){
/**
*页面上的可复用的验证规则
*/
//验证号码格式
constCHECK_PHONE=(rule,value,callback)=>{
letcheck=this.$validate({label:'号码',value,rules:['phone']})
if(!check.result){
callback(newError(check.message))
}else{
callback()
}
}
//验证号码格式以及不能为空
constCHECK_PHONE_NOTNULL=(rule,value,callback)=>{
letcheck=this.$validate({label:'号码',value,rules:['notnull','phone']})
if(!check.result){
callback(newError(check.message))
}else{
callback()
}
}
//检测邮箱格式
constCHECK_EMAIL=(rule,value,callback)=>{
letcheck=this.$validate({label:'邮箱',value,rules:['email']})
if(!check.result){
callback(newError(check.message))
}else{
callback()
}
}
//检测邮箱格式以及不能为空
constCHECK_EMAIL_NOTNULL=(rule,value,callback)=>{
letcheck=this.$validate({label:'邮箱',value,rules:['notnull','email']})
if(!check.result){
callback(newError(check.message))
}else{
callback()
}
}
return{
CHECK_PHONE,
CHECK_PHONE_NOTNULL,
CHECK_EMAIL,
CHECK_EMAIL_NOTNULL
}
},
methods:{
//初始化验证数据
_initValidate(formInfo){
constobj={},
fieldList=formInfo.fieldList
//循环字段列表
for(letitemoffieldList){
lettype=item.type==='select'?'选择':'输入'
if(item.required){
if(item.validator){
obj[item.value]={
required:item.required,
validator:item.validator,
trigger:'blur'
}
}else{
obj[item.value]={
required:item.required,
message:'请'+type+item.label,
trigger:'blur'
}
}
}elseif(item.validator){
obj[item.value]={
validator:item.validator,
trigger:'blur'
}
}
}
formInfo.rules=obj
}
}
}
最后
在项目的系统管理模块中可以看到示例代码：
项目地址
项目代码地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。