做过校验需求的小伙伴们都知道,校验其实是个麻烦事。
规则多,需要校验的字段多,都给我们前端带来巨大的工作量。
一个不小心,代码里就出现了不少如果其他等不可维护的代码。
因此,我觉得一个团队或者是一个项目,需要一个校验工具,简化我们的工作。
首先,参考一下乔纳森。只看这一小段代码:
.alphanum
<代码> Joi.string () () .min (3) .max (30) .required()
我希望我的校验工具Coi也是链式调用,链式调用可以极大的简化代码。
校验呢,其实主要就3个入参:需要校验的数据,提示的错误信息,校验规则。
哎直接把代码贴出来吧,反正就一百行,一目了然:
出口的默认类Coi {
构造函数(道具){
这一点。输入=道具
这一点。errorMessage='通过校验的//错误信息
这一点。通过=true//校验是否通过
}//数据输入
数据(输入){
如果(! this.pass)返回
这一点。输入=返回这
}//必填,不能为空
isRequired(消息){
如果(! this.pass)返回
如果(/^ \ s *美元/g.test (this.input) | |
这一点。输入===null | |
这一点。输入===定义
){
这一点。errorMessage=消息
这一点。通过=false
}
返回这
}//最小长度
最小长度(长度、消息){
如果(! this.pass)返回
如果(this.input。长度& lt;长度){
这一点。errorMessage=消息
这一点。通过=false
}
返回这
}//最大长度
最大长度(长度、消息){
如果(! this.pass)返回
如果(this.input。长度比;长度){
这一点。errorMessage=消息
这一点。通过=false
}
返回这
}//需要的格式数字:数字,信:字母,中国人:中文
requireFormat (formatArray消息){
如果(! this.pass)返回
让formatMap={
数量:0,
信:0,
中国:0
}
种(formatMap)。forEach(关键=比;{
如果(formatArray.includes(关键))formatMap(例子)=1
})
让formatReg=new RegExp (
“^ $ {formatMap。数量& # 63;“0 - 9”:“}$ {
formatMap。信& # 63;“a-zA-Z”:“
}{formatMap美元。中国& # 63;“\ u4e00 - \ u9fa5”:“}] *美元”
)
如果(! formatReg.test (this.input)) {
这一点。errorMessage=消息
这一点。通过=false
}
返回这
}//邮箱校验
isEmail(消息){
如果(! this.pass)返回
const emailReg=/^ [a-z0-9] + (._ \ \ [-] * [a-z0-9]) * @ ([a-z0-9] + [-a-z0-9] * [a-z0-9] +) {63} [a-z0-9] +/美元
如果(! emailReg.test (this.input)) {
这一点。errorMessage=消息
这一点。通过=false
}
返回这
}//ulr校验
isURL(消息){
如果(! this.pass)返回
const urlReg=new RegExp (
' ^ (& # 63;! mailto:) (& # 63;: (& # 63;: http | https | ftp)://|//) (& # 63;: \ \ S + (& # 63;:: \ \ S *) & # 63; @) & # 63; (& # 63;: (& # 63;: (& # 63;: (1 - 9) \ \ d # 63; | 1 \ \ \ \ d | 2 [01] \ \ d | 22 (0 - 3)) (& # 63;: \ \。(& # 63;: 1 & # 63; \ \ d {1,2} | 2 d (0 - 4) \ \ | 25 (0 - 5))) {2} (& # 63;: \ \。(& # 63;: [0 - 9] \ \ d # 63; | 1 \ \ \ \ d | 2 (0 - 4) \ \ d | 25 (0 - 4))) | (& # 63;: (& # 63;: [a - z \ \ u00a1 - \ \ uffff0-9] + & # 63;) * [a - z \ \ u00a1 - \ \ uffff0-9] +) (& # 63;: \ \。(& # 63;: [a - z \ \ u00a1 - \ \ uffff0-9] + & # 63;) * [a - z \ \ u00a1 - \ \ uffff0-9] +) * (& # 63;: \ \。(& # 63;: [a - z \ \ u00a1 - \ \ uffff] {2,}))) | localhost) (& # 63;:: \ \ d {2、5}) & # 63; (& # 63;: (/| \ \ & # 63; | #) ^ \ \ [S] *) & # 63;美元”,
“我”
)
如果(! urlReg.test (this.input)) {
这一点。errorMessage=消息
这一点。通过=false
}
返回这
}//自定义正则校验
requireRegexp (reg,消息){
如果(! this.pass)返回
如果(! reg.test (this.input)) {
这一点。errorMessage=消息
这一点。通过=false
}
返回这
}
}
使用姿势如下:
从“js-coi”进口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格式不正确的)
如果(! validCoi.pass) {
美元。message.error (validCoi.errorMessage)
返回
}
