微客导航 » 文章资讯 » vant(ZanUi)结合async-validator实现表单验证的方法

vant(ZanUi)结合async-validator实现表单验证的方法

2023-09-04 19:36:05 335

最近在开发一个移动端商城项目，用到了有赞的vant，因为最近大都采用elementui在做PC端的东西，对比来说，vant的完成度还是偏低了点，很多细节都虽然都实现了接口，但是想使用得自己去想办法，没办法拿来即用。昨天用到Uploader图片上传如是，提供了file回调，却没有提供上传功能，我必须给他加2个函数实现axios提交才能用，还有今天用到表单验证这块，它的Field组件虽然给了error-message的错误提示接口，但是没有内置表单验证功能。

elementui采用async-validator实现表单验证，我也基于这个组件进行扩展，async-validator不支持细粒化验证，于是先对它进行扩展

validator.js

importasyncValidatorfrom'async-validator'

classvalidator{
/**
*构造
*@paramrulesobjectasync-validatorrules
*@paramdata初始对象
*/
constructor(rules,data){
this.setData(data);
this.setRules(rules);
}

/**
*重新定义初始对象
*也可以直接修改实例的data
*validator.data=newData
*@paramdata
*/
setData(data){
this.data=data;
}

/**
*设定规则
*@paramrulesrulesobjectasync-validatorrules
*@paramcover是否替换旧规则
*/
setRules(rules,{cover}={}){
if(cover===undefined||cover){
this.validators={};
}
for(letattrinrules){
construle={};
rule[attr]=rules[attr];
this.validators[attr]=newasyncValidator(rule);
}
}

/**
*执行验证
*@paramcallback(errors,fields)
*@paramdata可选传空将验证构造data传string或数组验证构造data的响应字段
*以上参数顺序可互转
*/
validate(callback,data){
letcb,d;
if(typeofcallback==='function'){
cb=callback;
d=data;
}elseif(typeofdata==='function'){
cb=data;
d=callback;
}

let_d=d;

if(this.data){
if(!d){
_d=this.data;
}elseif(typeofd==='string'){
_d={};
_d[d]=this.data[d]
}elseif(Array.isArray(d)){
_d={};
d.forEach(attr=>{
_d[attr]=this.data[attr]
})
}
}

consterr=[];

if(_d){
for(letattrin_d){
if(this.validators[attr]){
consto={};
o[attr]=_d[attr];
this.validators[attr].validate(o,(error)=>{
if(error){
err.push(error[0])
}
})
}
}
}

cb&&cb(err.length>0,err)

}
}

exportdefaultfunction(rules,data){
returnnewvalidator(rules,data)
}

demo.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vant(ZanUi)结合async-validator实现表单验证的方法

热门推荐

随机推荐