100行代码实现vue表单校验功能(小白自编)


Posted in Javascript onNovember 19, 2019

两个文件,一个写逻辑,一个写校验规则;

特点:逻辑简单,代码量少,够用;

不想看代码直接新建这两个文件复制代码,看最下面的使用方法;

100行代码实现vue表单校验功能(小白自编)

示例图片

100行代码实现vue表单校验功能(小白自编)

100行代码实现vue表单校验功能(小白自编)

//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();清空所有错误提示

总结

以上所述是小编给大家介绍的100行代码vue表单校验,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 #Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 #Javascript
vue的三种图片引入方式代码实例
Nov 19 #Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 #Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 #Javascript
VUEX-action可以修改state吗
Nov 19 #Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
You might like
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
学习php开源项目的源码指南
2014/12/21 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
简单讲解Python中的闭包
2015/08/11 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
pytest中文文档之编写断言
2019/09/12 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
英语课外活动总结
2014/08/27 职场文书
护士工作失误检讨书
2014/09/14 职场文书
2015年党员承诺书
2015/01/21 职场文书
保研导师推荐信
2015/03/25 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
志愿者工作心得体会
2016/01/15 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers