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

TZLLOG 发布于2019-08-23 17:10 / 684人阅读

摘要：一个不小心，代码里就出现了不少等不可维护的代码。因此，我觉得一个团队或者是一个项目，需要一个校验工具，简化我们的工作。只看这一小段代码我希望我的校验工具也是链式调用，链式调用可以极大的简化代码。

源码：git仓库欢迎star & fork ～～

首发于掘金

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

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

一个不小心，代码里就出现了不少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?|1dd|2[01]d|22[0-3])(?:.(?:1?d{1,2}|2[0-4]d|25[0-5])){2}(?:.(?:[0-9]d?|1dd|2[0-4]d|25[0-4]))|(?:(?:[a-zu00a1-uffff0-9]+-?)*[a-zu00a1-uffff0-9]+)(?:.(?:[a-zu00a1-uffff0-9]+-?)*[a-zu00a1-uffff0-9]+)*(?:.(?:[a-zu00a1-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
}

idc机房托管私有云一百行 js实现计算器代码网页js代码调试工具 js代码加密压缩工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103912.html

【译】小二百行 JavaScript 打造 lambda 演算解释器

摘要：在开始解析之前，先通过词法分析器运行源码，这会将源码打散成语法中全大写的部分。我们基于每个规则的名称的左侧为其创建一个方法，再来看右侧内容如果是全大写的单词，说明它是一个终止符即一个，词法分析器会用到它。本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/661原文：http://tadeuzagallo.com/blog/writing-a-l...

KitorinZero 2019-08-19 18:38 评论0 收藏0
React 历史项目维护与优化实践

摘要：本文介绍了作者接手维护一个中型历史项目时的一系列改进实践，包括模块结构拆分业务逻辑梳理打包优化等。代码中如菜单名称结构表单字段名等的各种硬编码配置分散在各处。最后，在提升面向开发者的打包体验方面，本次优化中主要实现的是与的解耦。本文介绍了作者接手维护一个中型 React 历史项目时的一系列改进实践，包括模块结构拆分、业务逻辑梳理、Webpack 打包优化等。背景这是一个 PC 的...

toddmark 2019-08-20 16:50 评论0 收藏0
iscroll-lite源码阅读

摘要：最后调用函数来判断是否需要重置位置保存事件的类型，如果跟已经保存的事件类型不是同一类，不继续执行函数。如果在滚动状态，调用函数来获取的位置，调用方法让停在当前位置。主要是选择动画效果，调用或是来进行滚动根据所选的动画效果，在每一个下调用函数背景最近开发移动端项目用到了iscroll，踩了不少坑，因此阅读源码加深下对这个工具的了解。本次阅读的是iscroll-lite，包含了主要的功...

jackzou 2019-08-22 16:17 评论0 收藏0
一百行python代码批量下载抖音视频

摘要：公众号的皮卡丘作者版本相关模块模块模块模块以及一些自带的模块。版本原理简介第一个接口后的输入的抖音号，后的随机产生的设备。请求该接口可以获得以下信息该抖音号的所有视频下载链接。最后根据获得的视频下载链接下载抖音视频即可。公众号：Charles的皮卡丘作者：Charles Python版本：3.6.4相关模块：requests模块；ipaddress模块；click模块；以及一些Pyt...

mudiyouyou 2019-07-30 17:10 评论0 收藏0
koa2开发微信公众号: 不定期推送最新币圈消息

摘要：背景比特币说好的分叉最后却分叉不成，如今算力又不够，于是比特现金想篡位没一个星期就涨了快倍，错过这趟快车甚是后悔，于是打算写一个可不定期推送最新消息的微信公众号。既然是利用微信这个平台载体，当然要熟悉微信的，遂封装了一下。背景：比特币说好的segwit2x分叉最后却分叉不成，如今算力又不够，于是比特现金想篡位? 没一个星期就涨了快10倍，错过这趟快车甚是后悔，于是打算写一个可不定期推...

xi4oh4o 2019-06-27 18:12 评论0 收藏0