一百行JS代码实现一个校验工具


Posted in Javascript onApril 30, 2019

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。

规则多,需要校验的字段多,都给我们前端带来巨大的工作量。

一个不小心,代码里就出现了不少if else等不可维护的代码。

因此,我觉得一个团队或者是一个项目,需要一个校验工具,简化我们的工作。

首先,参考一下 Joi。只看这一小段代码:

Joi.string().alphanum().min(3).max(30).required()

我希望我的校验工具Coi也是链式调用,链式调用可以极大的简化代码。

校验呢,其实主要就3个入参:需要校验的数据,提示的错误信息,校验规则。

哎 直接把代码贴出来吧,反正就一百行,一目了然:

export default class Coi {
  constructor(prop) {
    this.input = prop
    this.errorMessage = '通过校验' // 错误信息
    this.pass = true // 校验是否通过
  }
  // 数据输入
  data(input) {
    if (!this.pass) return this
    this.input = input
    return this
  }
  // 必填,不能为空
  isRequired(message) {
    if (!this.pass) return this
    if (
      /^\s*$/g.test(this.input) ||
      this.input === null ||
      this.input === undefined
    ) {
      this.errorMessage = message
      this.pass = false
    }
    return this
  }
  // 最小长度
  minLength(length, message) {
    if (!this.pass) return this
    if (this.input.length < length) {
      this.errorMessage = message
      this.pass = false
    }
    return this
  }
  // 最大长度
  maxLength(length, message) {
    if (!this.pass) return this
    if (this.input.length > length) {
      this.errorMessage = message
      this.pass = false
    }
    return this
  }
  // 需要的格式 number: 数字, letter: 字母, chinese: 中文
  requireFormat(formatArray, message) {
    if (!this.pass) return this
    let formatMap = {
      number: 0,
      letter: 0,
      chinese: 0
    }
    Object.keys(formatMap).forEach(key => {
      if (formatArray.includes(key)) formatMap[key] = 1
    })
    let formatReg = new RegExp(
      `^[${formatMap.number ? '0-9' : ''}${
        formatMap.letter ? 'a-zA-Z' : ''
      }${formatMap.chinese ? '\u4e00-\u9fa5' : ''}]*$`
    )
    if (!formatReg.test(this.input)) {
      this.errorMessage = message
      this.pass = false
    }
    return this
  }
  // 邮箱校验
  isEmail(message) {
    if (!this.pass) return this
    const emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
    if (!emailReg.test(this.input)) {
      this.errorMessage = message
      this.pass = false
    }
    return this
  }
  // ulr校验
  isURL(message) {
    if (!this.pass) return this
    const urlReg = new RegExp(
      '^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$',
      'i'
    )
    if (!urlReg.test(this.input)) {
      this.errorMessage = message
      this.pass = false
    }
    return this
  }
  // 自定义正则校验
  requireRegexp(reg, message) {
    if (!this.pass) return this
    if (!reg.test(this.input)) {
      this.errorMessage = message
      this.pass = false
    }
    return this
  }
}

使用姿势如下:

import Coi from 'js-coi'
const validCoi = new Coi()
validCoi
  .data('1234')
  .isRequired('id不能为空')
  .minLength(3, 'id不能少于3位')
  .maxLength(5, 'id不能多于5位')
  .data('1234@qq.')
  .isRequired('邮箱不能为空')
  .isEmail('邮箱格式不正确')
  .data('http:dwd')
  .isRequired('url不能为空')
  .isUrl('url格式不正确')
if (!validCoi.pass) {
  this.$message.error(validCoi.errorMessage)
  return
}

当然你只校验一个字段的话也可以这么使用:

import Coi from 'js-coi'
const idCoi = new Coi('1234')
idCoi
  .isRequired('id不能为空')
  .minLength(3, 'id不能少于3位')
  .maxLength(5, 'id不能多于5位')
  .isEmail('id邮箱格式不正确')
  .isUrl('id格式不正确')
  .requireFormat(['number', 'letter', 'chinese'], 'id格式不正确')
  .requireRegexp(/012345/, 'id格式不正确')
if (!idCoi.pass) {
  this.$message.error(idCoi.errorMessage)
  return
}

总结

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

Javascript 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 #Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 #Javascript
VSCode使用之Vue工程配置eslint
Apr 30 #Javascript
微信小程序API—获取定位的详解
Apr 30 #Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 #Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 #Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 #Javascript
You might like
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
php 购物车完整实现代码
2014/06/05 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
python处理按钮消息的实例详解
2017/07/11 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python实现文字版扫雷
2020/04/24 Python
JBL英国官网:JBL UK
2018/07/04 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
高级护理实习生自荐信
2013/09/28 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
服务质量承诺书
2014/03/27 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
说明书格式及范文
2014/05/07 职场文书
廉政承诺书
2015/01/19 职场文书
保洁员岗位职责
2015/02/04 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Vue详细的入门笔记
2021/05/10 Vue.js