这个插件主要是为了解决 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 盒子里进行验证 自定义的样式可以在验证后审查元素 去定义自己的样式