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

时间: 2019-04-27阅读: 616标签: 工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少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
}

源码:git仓库 欢迎star & fork ~~  
首发于 掘金,地址:https://juejin.im/post/5cc16951e51d45400f5d5852

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3081

mac下镜像飞速安装Homebrew教程

Homebrew是一款包管理工具,目前支持macOS和linux系统。主要有四个部分组成: brew、homebrew-core 、homebrew-cask

Mac上程序员很喜欢用10大开发软件

走进BAT,你们会发现,他们都喜欢使用Mac,Mac作为一个创作工具,一直深受程序员,教授,高科技行业从业者的喜欢。Mac及佳的稳定性,也是用户喜欢的一个主要原因,Mac可以让你专注于创作

程序员必备的高效率工具

产品人员必备利器,但是程序员也需要画一下自己的图。Axure RP Pro 是一个产品经理必备的交互原型设计工具;GitMind是一款优秀的免费思维导图软件,能够帮助你将想法和灵感以清晰的思维导图的形式记录下来

vue时间处理工具momentjs

自己写的时间处理工具类有兼容性, 网上找都处理很多可靠的很少,几个项目被坑惨了,有时候还要经常处理获取月份啊周啊什么的bug 实在多,自己写实在麻烦还考虑不全

六个好用的前端开发在线工具

网上可以找到前端开发社区贡献的大量工具,这篇文章列出了我最喜欢的一些工具,这些工具给我的工作带来了许多便利。EnjoyCSS老实说,虽然我做过许多前端开发,但我并不擅长 CSS

掌握 TS 这些工具类型,让你开发事半功倍

TypeScript 提供了为类型注解设置别名的便捷语法,你可以使用 type SomeName = someValidTypeAnnotation 来创建别名,比如:

React Developers的10个超实用神奇工具

React是一个用于构建用户界面的JavaScript库。但是,很多人都不知道,其实有非常多的有助于我们更好地使用React,提升用户开发体验的优秀工具。如果您还没有使用过React,或者有可能对使用它感兴趣

5款web前端开发利器

工欲善其事必先利其器,没有好的调试工具或方法,移动端真机下的 debug 简直是前端的噩梦。但是有了这些好用的方法,我想各位优秀的前端兄弟们,帮妹子修复个小 bug 还是 so easy 的!

国内都有哪些免费的图床工具

七牛云是国内企业级云服务商,注册认证后有10G永久免费空间,每月10G国内和10G国外流量,速度相当快,七牛云是国内专业CDN服务商,插件支持比较多,有免费ssl证书,但https流量收费。同时可以自定义域名,系统会默认分配测试域名,测试域名只能用20天

面向软件开发人员的7款产品路线图工具

产品路线图软件可以帮助软件产品经理完成核心的规划任务,并向项目团队成员和相关人员通报目标和状态。产品工具可以帮助团队制定战略、确定目标的优先级、安排要完成的工作,并使每个人在整个产品生命周期中步调一致

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广