一百行js代碼實現一個校驗工具

TZLLOG 發布于2019-08-23 17:10 / 807人閱讀

摘要：一個不小心，代碼里就出現了不少等不可維護的代碼。因此，我覺得一個團隊或者是一個項目，需要一個校驗工具，簡化我們的工作。只看這一小段代碼我希望我的校驗工具也是鏈式調用，鏈式調用可以極大的簡化代碼。

源碼：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
}

GPU云服務器云服務器一百行 js實現計算器代碼網頁js代碼調試工具 js代碼加密壓縮工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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