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 数组操作代码集锦
Apr 28 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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)
2013/06/21 PHP
PHP闭包实例解析
2014/09/08 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
CentOS中升级Python版本的方法详解
2017/07/10 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
美国家具网站:Cymax
2016/09/17 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
《去年的树》教学反思
2014/04/11 职场文书
绵山导游词
2015/02/05 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS
Golang 入门 之url 包
2022/05/04 Golang
python实现学生信息管理系统(面向对象)
2022/06/05 Python