10betvue表单校验

来源:http://www.chinese-glasses.com 作者:Web前端 人气:110 发布时间:2020-04-15
摘要:时间: 2019-10-07阅读: 111标签: 表单 10bet,两个文件,一个写逻辑,一个写校验规则;特点:逻辑简单,代码量少,够用;不想看代码直接新建这两个文件复制代码,看最下面的使用方法;

时间: 2019-10-07阅读: 111标签: 表单

10bet,两个文件,一个写逻辑,一个写校验规则;特点:逻辑简单,代码量少,够用;不想看代码直接新建这两个文件复制代码,看最下面的使用方法;

//validator.js//引入校验规则var valitatorRules = require('./valitator-rules.js');export const Validator=function(formName,rules,errors){// rules:{// name:'required|regexp_hanzi',// idCont: 'regexp_I'// }this.rules = rules;// let errors = {// 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 (let key in this.rules){ let node = 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){let arrs = 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){ return this.validate(param)}};//校验执行者Validator.prototype.validate = function(param){let errorList =[];return new Promise((resolve,reject) = { for (let key in param){ 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){ let module; 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){let n = 0;function run(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){let form = this.form;let childrenNode = form.querySelector(`input[name="${childenName}"]`) || form.querySelector(`textarea[name="${childenName}"]`);let parentNode = childrenNode.parentNode;return { childrenNode, parentNode}};//寻找验证规则Validator.prototype.defineRule =function(name){let rule = [],ruleString='';for(let key in this.rules){ if(name == key){ ruleString = this.rules[key]; }}let arr= ruleString.split('|');arr.forEach(val = { if(valitatorRules[val]){ console.log(this) rule.push({ rule:val, valitatorRules:valitatorRules[val], error:this.error[name][val] }) }})return rule;}//生产错误提示Validator.prototype.createError = function(module){if(module.newChildNode){ module.newChildNode.innerText = module.errors; return}let newChildNode = 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; } })}}

下面是校验规则,就更简单

说明一下,非空校验没有做单独处理,所以校验规则这里就多写个if else;

//validator-rule.jsmodule.exports= {hanzi:function(str){ if(str){ let reg = /[u4e00-u9fa5]/; return reg.test(str); }else{ return true; } },required:function(str){ return !(str.length == 0)},I:function(str){ if(str){ let reg = /i/; return reg.test(str); }else{ return true; }},H:function(str){ if(str){ let reg = /h/; return reg.test(str); }else{ return true; }},T:function(str){ if(str){ let reg = /t/; return reg.test(str); }else{ return true; }},}

使用方法

**引入校验插件 import {Validator} from '@src/utils/valitator'** **校验规则可自行修改添加 @src/utils/valitator-rules** **** 1.添加form name属性form name='example_form'/form 2.定义错误提示errors = { name:{ required:'不能为空', hanzi:'得是汉字' }, idCont:{ I:'身份证号不对', H:'香港通行证不对', T:'台湾通行证不对', } }; 3.定义校验规则rules ={ name:'required|hanzi', idCont: 'I' } 4.初始化校验实例:this.Validator =new Validator('example_form',rules,errors); 5.绑定校验信息:input增加name属性,保持和错误提示key一致 input type="text" name='name' v-model='name' 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();清空所有错误提示 

本文由10bet发布于Web前端,转载请注明出处:10betvue表单校验

关键词:

频道精选

最火资讯