基于vee-validata封装的Vue验证插件 测试版

这个插件主要是为了解决vee-validata在使用中没有有验证的地方要单独去写很多验证样式的标签以及一些不方便实现的一些验证的样式 比如这样子：/插件源码*//create by fish at 20190321基于vee-validate封装的正则验证插件需要前端特殊样式的配合v0.0.1@beta;未解决 required的问题 只能在这个里面设置 还不支持参数传递/import zh from ‘vee-validate/dist/locale/zh_CN’; import { Validator } from ‘vee-validate’Validator.localize(‘zh’,zh);const isPhone = {getMessage:(field, params, data) => { return field + ‘格式错误’;},validate: value => { if(value==undefined){ value=’’ } return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)}}const isPassword ={getMessage:(field, params, data) => { return field + ‘密码6-16位,不包含特殊字符,可以是数字或者字母’;},validate: value => { if(value==undefined){ value=’’ } return value == value && value.length > 5;}}const isEmail ={getMessage:(field, params, data) => { return field + ‘格式错误’;},validate: value => { if(value==undefined){ value=’’ } return value == value && /^(\w)+(.\w+)@(\w)+((.\w+)+)$/.test(value);}}Validator.extend(‘password’, isPassword);Validator.extend(‘phone’, isPhone);Validator.extend(’email’, isEmail);Validator.localize({zh: { messages: { required: function (name) { return name + ‘不能为空’ }, }, attributes: { phone: ‘手机号’, password:‘密码’, email:‘邮箱’ } }})const validator = new Validator({phone: ‘required|phone’,password: ‘required|password’,email:‘required|email’,});/*创建验证对象/const FishVer = function(){this.init = function(verArr,callback,id){ verArr.forEach((el,index)=>{ var inputDom = getElementByAttr(‘form-control’,’name’,el.name,id); inputDom.forEach((eldom,ind)=>{ eldom.addEventListener(‘input’,(event,e)=>{ regValue(el,eldom).then(res=>{ verArr[index].ver = res callback(checkVerAll(verArr)) }) }) }) })}}/*统一验证全部/FishVer.prototype.fishVerAll = function(verArr,callback,id){let promises = [];for(let i=0;i<verArr.length;i++){ var inputDom = getElementByAttr(‘form-control’,’name’,verArr[i].name,id); promises.push(regValue(verArr[i],inputDom[0]))}return Promise.all(promises).then(res=>{ callback(checkVerArrAll(res))})}/**检查 是否全部验证完（自动）@param {} value/function checkVerAll(value){let isAll = false;for(let i=0;i<value.length;i++){ if(value[i].ver){ isAll = true; continue; }else{ isAll = false; break; }}return isAll;}/**检查 是否全部验证完（手动）@param {} value/function checkVerArrAll(value){let isAll = false;for(let i=0;i<value.length;i++){ if(value[i]){ isAll = true; continue; }else{ isAll = false; break; }}return isAll;}/获取dom元素@param {} tag@param {} dataAttr@param {} reg/function getElementByAttr(tag, dataAttr, reg,id) {var idEle = document.getElementById(id);var aElements = idEle.getElementsByClassName(tag);var aEle = [];for(var i = 0; i < aElements.length; i++) { var ele = aElements[i].getAttribute(dataAttr); if(ele == reg) { aEle.push(aElements[i]); }}return aEle;}function regValue(el,inputDom){return new Promise((resolve,reject)=>{ validator.validate(el.name,inputDom.value).then((res)=>{ let inputDomFather = inputDom.parentNode; let hasError = inputDomFather.getElementsByClassName(‘ver_error’); if(validator.errors.has(el.name)){ //如果验证不通过 removeClass(inputDom,‘ver_success’); removeClass(inputDom,‘ver_fail’); addClass(inputDom,‘ver_fail’); removeClass(inputDomFather,‘ver_box_success’); removeClass(inputDomFather,‘ver_box_fail’) addClass(inputDomFather,‘ver_box_fail’); if(hasError.length){ hasError[0].innerHTML = validator.errors.first(el.name); }else{ let errorTemp = document.createElement(‘span’); errorTemp.className = ‘ver_error’; errorTemp.innerHTML = validator.errors.first(el.name); inputDomFather.append(errorTemp); } resolve(false) }else{ if(hasError.length){ inputDomFather.removeChild(hasError[0]); } removeClass(inputDom,‘ver_fail’); removeClass(inputDom,‘ver_success’); addClass(inputDom,‘ver_success’); removeClass(inputDomFather,‘ver_box_fail’); removeClass(inputDomFather,‘ver_box_success’); addClass(inputDomFather,‘ver_box_success’); resolve(true) } }).catch(err=>{ console.log(err) })})}function addClass(obj,cls) {var obj_class=obj.className,blank = ( obj_class != ’’ ) ? ’ ’ : ‘’;let added = obj_class + blank + cls;obj.className = added;}function removeClass(obj,classname){//如果原来有classif(obj.className!=""){ var arrClassName=obj.className.split(" “); var _index=arrIndexOf(arrClassName,classname); //如果有需要移除的class if(_index!=-1){ arrClassName.splice(_index,1); obj.className=arrClassName.join(” “); }}//如果原来没有class无操作}function arrIndexOf(arr,v){for(var i=0;i<arr.length;i++){ if(arr[i]==v){ return i; }}return -1;}const fishVer = new FishVer();export default fishVer;/插件源码//*调用插件/fishVer.init([{name:‘password’}],(res)=>{console.log(res)},’logver’)<input type=“password” name=“password” class=“form-control form-block” v-model=“login_pwd” placeholder=“密码”>需要输入框有form-control这个类 有对应的name logver 为包含这个input 这个DOM的外层盒子的id值 这个id 保证这个一个页面中相同的name值在不同的ID盒子里进行验证 自定义的样式可以在验证后审查元素 去定义自己的样式