两个文件，一个写逻辑，一个写校验规则；
特点：逻辑简单，代码量少，够用；
不想看代码直接新建这两个文件复制代码，看最下面的使用方法；
//validator.js
//引入校验规则
var valitatorRules = require('./valitator-rules.js');
export const Validator=function(formName,rules,errors){
// rules：{
// name:'required|regexp_hanzi',
// idCont: 'regexp_I'
// }
this.rules = rules;
// let errors = {
// name:{
// required:'不能为空',
// regexp_hanzi:'得是汉字'
// },
// idCont:{
// regexp_I:'身份证号不对',
// regexp_H:'香港通行证不对',
// regexp_T:'台湾通行证不对',
// }
// };
this.error = errors;
this.form = document.forms[formName];
this.validatorList = [];
this.init();
}
//初始化
Validator.prototype.init = function(){
for (let key in this.rules){
let node = this.findNode(key);
this.validatorList.push({
name: key,
value: '',
childrenNode:node.childrenNode,
parentNode: node.parentNode,
borderColor:getComputedStyle(node.childrenNode).borderColor,
ruleReg:this.defineRule(key),//[{rule:'hanzi',valitatorRules:fn(this.value),error:'请输入汉字'}]
errors :'',
})
}
};
//动态修改校验规则
Validator.prototype.changeRules = function(rules,param){
let arrs = Object.keys(rules);
this.rules = {
...this.rules,
...rules
}
this.validatorList.forEach(val => {
if(arrs.includes(val.name)){
val.ruleReg = this.defineRule(val.name)
}
})
if(param){
return this.validate(param)
}
};
//校验执行者
Validator.prototype.validate = function(param){
let errorList =[];
return new Promise((resolve,reject) => {
for (let key in param){
this.validatorList.forEach(val => {
if(val.name == key){
val.value = param[key];
this.runValidator(val);
}
})
}
this.validatorList.forEach(val => {
Object.keys(param).forEach(v => {
if(val.name == v && val.errors){
errorList.push(val);
}
})
})
if(errorList.length > 0){
reject(this)
}else{
resolve()
}
})
}
//暴露出的展示错误
Validator.prototype.showError = function(name){
if(name){
let module;
this.validatorList.forEach(val => {
if(val.name == name){
module = val;
}
})
if(module.errors){
this.createError(module);
}
}else{
this.validatorList.forEach(val => {
if(val.errors){
this.createError(val);
}
})
}
}
//执行校验工具；
Validator.prototype.runValidator = function(module){
let n = 0;
function run(param){
if (n>=module.ruleReg.length){
return
}
if(param.valitatorRules(module.value)){// 验证通过
module.errors = '';
n++;
run(module.ruleReg[n]);
} else{
module.errors = param.error;
}
}
run(module.ruleReg[n]);
if(module.errors.length == 0 && module.newChildNode){
this.clear(module);
}
}
//寻找节点
Validator.prototype.findNode= function(childenName){
let form = this.form;
let childrenNode = form.querySelector(`input[name="${childenName}"]`) || form.querySelector(`textarea[name="${childenName}"]`);
let parentNode = childrenNode.parentNode;
return {
childrenNode,
parentNode
}
};
//寻找验证规则
Validator.prototype.defineRule =function(name){
let rule = [],ruleString='';
for(let key in this.rules){
if(name == key){
ruleString = this.rules[key];
}
}
let arr= ruleString.split('|');
arr.forEach(val => {
if(valitatorRules[val]){
console.log(this)
rule.push({
rule:val,
valitatorRules:valitatorRules[val],
error:this.error[name][val]
})
}
})
return rule;
}
//生产错误提示
Validator.prototype.createError = function(module){
if(module.newChildNode){
module.newChildNode.innerText = module.errors;
return
}
let newChildNode = document.createElement('div');
newChildNode.className='_errorMessage';
newChildNode.style.color = 'red';
newChildNode.style.fontSize = '12px';
newChildNode.innerText = module.errors;
module.newChildNode = newChildNode;
module.childrenNode.style.borderColor = 'red';
if(module.childrenNode.nextSibling){
module.parentNode.insertBefore(newChildNode,module.childrenNode.nextSibling);
}else{
module.parentNode.appendChild(newChildNode);
}
}
//清除错误提示
Validator.prototype.clear = function(module){
if(module){
module.childrenNode.style.borderColor = module.borderColor;
module.parentNode.removeChild(module.newChildNode);
module.newChildNode = null;
}else{
this.validatorList.forEach(val => {
if(val.newChildNode){
val.childrenNode.style.borderColor = val.borderColor;
val.parentNode.removeChild(val.newChildNode);
val.newChildNode = null;
}
})
}
}
下面是校验规则，就更简单
说明一下，非空校验没有做单独处理，所以校验规则这里就多写个if else;
//validator-rule.js
module.exports= {
hanzi:function(str){
if(str){
let reg = /[\u4e00-\u9fa5]/;
return reg.test(str);
}else{
return true;
}
},
required:function(str){
return !(str.length == 0)
},
I:function(str){
if(str){
let reg = /i/;
return reg.test(str);
}else{
return true;
}
},
H:function(str){
if(str){
let reg = /h/;
return reg.test(str);
}else{
return true;
}
},
T:function(str){
if(str){
let reg = /t/;
return reg.test(str);
}else{
return true;
}
},
}
使用方法
**引入校验插件 import {Validator} from '@src/utils/valitator'**
**校验规则可自行修改添加 @src/utils/valitator-rules**
****
1.添加form name属性<form name='example_form'></form>
2.定义错误提示errors = {
name:{
required:'不能为空',
hanzi:'得是汉字'
},
idCont:{
I:'身份证号不对',
H:'香港通行证不对',
T:'台湾通行证不对',
}
};
3.定义校验规则rules ={
name:'required|hanzi',
idCont: 'I'
}
4.初始化校验实例：this.Validator =new Validator('example_form',rules,errors);
5.绑定校验信息：input增加name属性，保持和错误提示key一致 <input type="text" name='name' v-model='name'>
6.执行校验：传入要校验的key和value;
this.Validator.validate({
[name]:this[name],
}).then(()=>{
}).catch((errorCb)=>{
console.log(errorCb)
errorCb.showError();//展示错误提示，如果只展示某个提示，传入对应的值errorCb.showError('name')
});
7.动态跟换校验规则，如证件类型更换：
this.Validator.changeRules(
{idCont:this.idType},//传入新的校验规则
{idCont:this.idCont})//传入校验的key和value进行校验
.then(()=>{
}).catch((errorCb)=>{
errorCb.showError('idCont');
})；
8：注意事项：每个input要用div包起来，保证错误信息位置正确添加；
this.Validator.clear()；清空所有错误提示
vue实现手机号码的校验
今天我们讲的demo场景是防抖函数实现手机号码校验：首先我们视图层代码是一个输入框后面加上一个div作为提示信息，HTML代码很简单就不过多讲解了；JS数据逻辑层代码：
前端Vue中常用rules校验规则
在 vue开发中，难免遇到各种表单校验，这里整理了网络上和自己平时高频率用到的一些校验方法。1、是否合法IP地址；2、是否手机号码或者固话；3、是否固话
小程序如何在业务系统中接入图片安全校验
在小程序开发的过程中，如果你的小程序中存在图片上传的能力，经常会遇到同一个原因被拒绝审核：「没有对上传信息做审核」，想要过审核也很简单，只要将用户上传的图片提交审核就可以了
Vue Element-ui表单校验规则，你掌握了哪些？
Element-ui表单校验规则，使得错误提示可以直接在form-item下面显示，无需弹出框，因此还是很好用的。我在做了登录页面的表单校验后，一度以为我已经很了解表单的校验规则。但我在深入使用表单校验规则时
深度解析javaScript常见数据类型检查校验
在JavaScript中，数据类型分为两大类，一种是基础数据类型，另一种则是复杂数据类型，又叫引用数据类型，基础数据类型：数字Number 字符串String 布尔Boolean Null Undefined Symbols BigInt
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!