資訊專欄INFORMATION COLUMN
摘要：一個(gè)不小心，代碼里就出現(xiàn)了不少等不可維護(hù)的代碼。因此，我覺(jué)得一個(gè)團(tuán)隊(duì)或者是一個(gè)項(xiàng)目，需要一個(gè)校驗(yàn)工具，簡(jiǎn)化我們的工作。只看這一小段代碼我希望我的校驗(yàn)工具也是鏈?zhǔn)秸{(diào)用，鏈?zhǔn)秸{(diào)用可以極大的簡(jiǎn)化代碼。
源碼：git倉(cāng)庫(kù) 歡迎star & fork ～～
首發(fā)于 掘金
做過(guò)校驗(yàn)需求的小伙伴們都知道，校驗(yàn)其實(shí)是個(gè)麻煩事。
規(guī)則多，需要校驗(yàn)的字段多，都給我們前端帶來(lái)巨大的工作量。
一個(gè)不小心，代碼里就出現(xiàn)了不少if else等不可維護(hù)的代碼。
因此，我覺(jué)得一個(gè)團(tuán)隊(duì)或者是一個(gè)項(xiàng)目，需要一個(gè)校驗(yàn)工具，簡(jiǎn)化我們的工作。
首先，參考一下 Joi。只看這一小段代碼：
Joi.string().alphanum().min(3).max(30).required()
我希望我的校驗(yàn)工具Coi也是鏈?zhǔn)秸{(diào)用，鏈?zhǔn)秸{(diào)用可以極大的簡(jiǎn)化代碼。
校驗(yàn)?zāi)?，其?shí)主要就3個(gè)入?yún)ⅲ盒枰ｒ?yàn)的數(shù)據(jù)，提示的錯(cuò)誤信息，校驗(yàn)規(guī)則。
哎 直接把代碼貼出來(lái)吧，反正就一百行，一目了然：
export default class Coi {
constructor(prop) {
this.input = prop
this.errorMessage = "通過(guò)校驗(yàn)" // 錯(cuò)誤信息
this.pass = true // 校驗(yàn)是否通過(guò)
}
// 數(shù)據(jù)輸入
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
}
// 最小長(zhǎng)度
minLength(length, message) {
if (!this.pass) return this
if (this.input.length < length) {
this.errorMessage = message
this.pass = false
}
return this
}
// 最大長(zhǎng)度
maxLength(length, message) {
if (!this.pass) return this
if (this.input.length > length) {
this.errorMessage = message
this.pass = false
}
return this
}
// 需要的格式 number: 數(shù)字, 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
}
// 郵箱校驗(yàn)
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校驗(yàn)
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
}
// 自定義正則校驗(yàn)
requireRegexp(reg, message) {
if (!this.pass) return this
if (!reg.test(this.input)) {
this.errorMessage = message
this.pass = false
}
return this
}
}
使用姿勢(shì)如下：
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
}
當(dāng)然你只校驗(yàn)一個(gè)字段的話也可以這么使用：
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
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103912.html
摘要：在開始解析之前，先通過(guò)詞法分析器運(yùn)行源碼，這會(huì)將源碼打散成語(yǔ)法中全大寫的部分。我們基于每個(gè)規(guī)則的名稱的左側(cè)為其創(chuàng)建一個(gè)方法，再來(lái)看右側(cè)內(nèi)容如果是全大寫的單詞，說(shuō)明它是一個(gè)終止符即一個(gè)，詞法分析器會(huì)用到它。 本文轉(zhuǎn)載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/661原文：http://tadeuzagallo.com/blog/writing-a-l...
摘要：本文介紹了作者接手維護(hù)一個(gè)中型歷史項(xiàng)目時(shí)的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分業(yè)務(wù)邏輯梳理打包優(yōu)化等。代碼中如菜單名稱結(jié)構(gòu)表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開發(fā)者的打包體驗(yàn)方面，本次優(yōu)化中主要實(shí)現(xiàn)的是與的解耦。 本文介紹了作者接手維護(hù)一個(gè)中型 React 歷史項(xiàng)目時(shí)的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分、業(yè)務(wù)邏輯梳理、Webpack 打包優(yōu)化等。 背景 這是一個(gè) PC 的...
摘要：最后調(diào)用函數(shù)來(lái)判斷是否需要重置位置保存事件的類型，如果跟已經(jīng)保存的事件類型不是同一類，不繼續(xù)執(zhí)行函數(shù)。如果在滾動(dòng)狀態(tài)，調(diào)用函數(shù)來(lái)獲取的位置，調(diào)用方法讓停在當(dāng)前位置。主要是選擇動(dòng)畫效果，調(diào)用或是來(lái)進(jìn)行滾動(dòng)根據(jù)所選的動(dòng)畫效果，在每一個(gè)下調(diào)用函數(shù) 背景 最近開發(fā)移動(dòng)端項(xiàng)目用到了iscroll，踩了不少坑，因此閱讀源碼加深下對(duì)這個(gè)工具的了解。本次閱讀的是iscroll-lite，包含了主要的功...
摘要：公眾號(hào)的皮卡丘作者版本相關(guān)模塊模塊模塊模塊以及一些自帶的模塊。版本原理簡(jiǎn)介第一個(gè)接口后的輸入的抖音號(hào)，后的隨機(jī)產(chǎn)生的設(shè)備。請(qǐng)求該接口可以獲得以下信息該抖音號(hào)的所有視頻下載鏈接。最后根據(jù)獲得的視頻下載鏈接下載抖音視頻即可。 公眾號(hào)：Charles的皮卡丘作者：Charles Python版本：3.6.4相關(guān)模塊：requests模塊；ipaddress模塊；click模塊；以及一些Pyt...
摘要：背景比特幣說(shuō)好的分叉最后卻分叉不成，如今算力又不夠，于是比特現(xiàn)金想篡位沒(méi)一個(gè)星期就漲了快倍，錯(cuò)過(guò)這趟快車甚是后悔，于是打算寫一個(gè)可不定期推送最新消息的微信公眾號(hào)。既然是利用微信這個(gè)平臺(tái)載體，當(dāng)然要熟悉微信的，遂封裝了一下。 背景：比特幣說(shuō)好的segwit2x分叉最后卻分叉不成，如今算力又不夠，于是比特現(xiàn)金想篡位? 沒(méi)一個(gè)星期就漲了快10倍，錯(cuò)過(guò)這趟快車甚是后悔，于是打算寫一個(gè)可不定期推...
閱讀 2948·2021-11-19 09:40
閱讀 3645·2021-10-09 09:43
閱讀 2708·2021-09-22 15:31
閱讀 1769·2021-07-30 15:31
閱讀 812·2019-08-30 15:55
閱讀 3291·2019-08-30 15:54
閱讀 1198·2019-08-30 11:26
閱讀 1942·2019-08-29 13:00
