基於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盒子裏進行驗證 自定義的樣式能夠在驗證後審查元素 去定義本身的樣式