100行代码实现vue表单校验功能(小白自编)
两个文件,一个写逻辑,一个写校验规则;
特点:逻辑简单,代码量少,够用;
不想看代码直接新建这两个文件复制代码,看最下面的使用方法;
示例图片
//validator.js //引入校验规则 varvalitatorRules=require('./valitator-rules.js'); exportconstValidator=function(formName,rules,errors){ //rules:{ //name:'required|regexp_hanzi', //idCont:'regexp_I' //} this.rules=rules; //leterrors={ //name:{ //required:'不能为空', //regexp_hanzi:'得是汉字' //}, //idCont:{ //regexp_I:'身份证号不对', //regexp_H:'香港通行证不对', //regexp_T:'台湾通行证不对', //} //}; this.error=errors; this.form=document.forms[formName]; this.validatorList=[]; this.init(); } //初始化 Validator.prototype.init=function(){ for(letkeyinthis.rules){ letnode=this.findNode(key); this.validatorList.push({ name:key, value:'', childrenNode:node.childrenNode, parentNode:node.parentNode, borderColor:getComputedStyle(node.childrenNode).borderColor, ruleReg:this.defineRule(key),//[{rule:'hanzi',valitatorRules:fn(this.value),error:'请输入汉字'}] errors:'', }) } }; //动态修改校验规则 Validator.prototype.changeRules=function(rules,param){ letarrs=Object.keys(rules); this.rules={ ...this.rules, ...rules } this.validatorList.forEach(val=>{ if(arrs.includes(val.name)){ val.ruleReg=this.defineRule(val.name) } }) if(param){ returnthis.validate(param) } }; //校验执行者 Validator.prototype.validate=function(param){ leterrorList=[]; returnnewPromise((resolve,reject)=>{ for(letkeyinparam){ this.validatorList.forEach(val=>{ if(val.name==key){ val.value=param[key]; this.runValidator(val); } }) } this.validatorList.forEach(val=>{ Object.keys(param).forEach(v=>{ if(val.name==v&&val.errors){ errorList.push(val); } }) }) if(errorList.length>0){ reject(this) }else{ resolve() } }) } //暴露出的展示错误 Validator.prototype.showError=function(name){ if(name){ letmodule; this.validatorList.forEach(val=>{ if(val.name==name){ module=val; } }) if(module.errors){ this.createError(module); } }else{ this.validatorList.forEach(val=>{ if(val.errors){ this.createError(val); } }) } } //执行校验工具; Validator.prototype.runValidator=function(module){ letn=0; functionrun(param){ if(n>=module.ruleReg.length){ return } if(param.valitatorRules(module.value)){//验证通过 module.errors=''; n++; run(module.ruleReg[n]); }else{ module.errors=param.error; } } run(module.ruleReg[n]); if(module.errors.length==0&&module.newChildNode){ this.clear(module); } } //寻找节点 Validator.prototype.findNode=function(childenName){ letform=this.form; letchildrenNode=form.querySelector(`input[name="${childenName}"]`)||form.querySelector(`textarea[name="${childenName}"]`); letparentNode=childrenNode.parentNode; return{ childrenNode, parentNode } }; //寻找验证规则 Validator.prototype.defineRule=function(name){ letrule=[],ruleString=''; for(letkeyinthis.rules){ if(name==key){ ruleString=this.rules[key]; } } letarr=ruleString.split('|'); arr.forEach(val=>{ if(valitatorRules[val]){ console.log(this) rule.push({ rule:val, valitatorRules:valitatorRules[val], error:this.error[name][val] }) } }) returnrule; } //生产错误提示 Validator.prototype.createError=function(module){ if(module.newChildNode){ module.newChildNode.innerText=module.errors; return } letnewChildNode=document.createElement('div'); newChildNode.className='_errorMessage'; newChildNode.style.color='red'; newChildNode.style.fontSize='12px'; newChildNode.innerText=module.errors; module.newChildNode=newChildNode; module.childrenNode.style.borderColor='red'; if(module.childrenNode.nextSibling){ module.parentNode.insertBefore(newChildNode,module.childrenNode.nextSibling); }else{ module.parentNode.appendChild(newChildNode); } } //清除错误提示 Validator.prototype.clear=function(module){ if(module){ module.childrenNode.style.borderColor=module.borderColor; module.parentNode.removeChild(module.newChildNode); module.newChildNode=null; }else{ this.validatorList.forEach(val=>{ if(val.newChildNode){ val.childrenNode.style.borderColor=val.borderColor; val.parentNode.removeChild(val.newChildNode); val.newChildNode=null; } }) } }
下面是校验规则,就更简单
说明一下,非空校验没有做单独处理,所以校验规则这里就多写个ifelse;
//validator-rule.js module.exports={ hanzi:function(str){ if(str){ letreg=/[\u4e00-\u9fa5]/; returnreg.test(str); }else{ returntrue; } }, required:function(str){ return!(str.length==0) }, I:function(str){ if(str){ letreg=/i/; returnreg.test(str); }else{ returntrue; } }, H:function(str){ if(str){ letreg=/h/; returnreg.test(str); }else{ returntrue; } }, T:function(str){ if(str){ letreg=/t/; returnreg.test(str); }else{ returntrue; } }, }
使用方法
**引入校验插件import{Validator}from'@src/utils/valitator'** **校验规则可自行修改添加@src/utils/valitator-rules** **** 1.添加formname属性2.定义错误提示errors={ name:{ required:'不能为空', hanzi:'得是汉字' }, idCont:{ I:'身份证号不对', H:'香港通行证不对', T:'台湾通行证不对', } };
3.定义校验规则
rules={ name:'required|hanzi', idCont:'I' }
4.初始化校验实例:this.Validator=newValidator('example_form',rules,errors);
5.绑定校验信息:input增加name属性,保持和错误提示key一致
6.执行校验:传入要校验的key和value;
this.Validator.validate({ [name]:this[name], }).then(()=>{ }).catch((errorCb)=>{ console.log(errorCb) errorCb.showError();//展示错误提示,如果只展示某个提示,传入对应的值errorCb.showError('name') });
7.动态跟换校验规则,如证件类型更换:
this.Validator.changeRules( {idCont:this.idType},//传入新的校验规则 {idCont:this.idCont})//传入校验的key和value进行校验 .then(()=>{ }).catch((errorCb)=>{ errorCb.showError('idCont'); });
8:注意事项:每个input要用div包起来,保证错误信息位置正确添加;
this.Validator.clear();清空所有错误提示
总结
以上所述是小编给大家介绍的100行代码vue表单校验,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。