基于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){

//若是原来有class
if(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盒子里进行验证 自定义的样式能够在验证后审查元素 去定义本身的样式