依据网上现有的材料改的vue实用的战略考证,假如还须要别的考证直接本身增加划定规矩就好了 。 上代码
新建一个js文件
let strategys = {
isNotEmpty: (value, errorMsg) => {
if(value === ''){
return errorMsg;
}
},
minLength: (value, length, errorMsg) => {
if(value.length < length){
return errorMsg;
}
},
mobileFormat: (value, errorMsg) => {
if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
return errorMsg;
}
}
}
export var Validator = function () {
this.cache = []; // 保留效验划定规矩
};
Validator.prototype.add = function(dom,rule,errorMsg) {
var str = rule.split(":");
this.cache.push(function(){
// str 返回的是 minLength:6
var strategy = str.shift();
str.unshift(dom); // value增加进参数列表
str.push(errorMsg); // 把errorMsg增加进参数列表
return strategys[strategy].apply(dom,str);
});
};
Validator.prototype.start = function () {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
var msg = validatorFunc() // 最先效验 并取得效验后的返回信息
if(msg) {
return msg
}
}
};
将文件导入要运用的组件或许视图中
import { Validator } from './validate.js'
然后在你须要的处所导入就搞定了
methods: {
submit_click() {
let errorMsg = this.validateFunc();
if (errorMsg) {
alert(errorMsg);
return false
}
},
validateFunc() {
let that = this;
let validator = new Validator();
validator.add(that.userName, 'isNotEmpty', '用户名不能为空');
validator.add(that.password, 'minLength:6', '暗码长度不能小于6位');
validator.add(that.phoneNumber, 'mobileFormat', '手机号码花样不正确');
var errorMsg = validator.start(); // 取得效验效果
return errorMsg; // 返回效验效果
}
}