21行代码撸一个表单验证器(仿lumen Validator)

验证下面的数据
//等待验证的数据
let awitWerified = {
    //必须填写、必须是string类型、最小长度6位、最大长度10位
    name:'123',
    //必须填写、必须是手机号
    phone:'15211111198'
}
编写规则
let rules={
    // 必填
    required: function(value, errorMsg='不能为空') {
        if(value === ''|| value == null) {
            return errorMsg
        }
    },
    // 最小值
    min: function(value, length, errorMsg=`${value.length?'长度':''}不能小于${length}`){
        let val = value.length || value
        if(val < length) {
            return errorMsg
        }
    },
    // 最大值
    max: function(value, length, errorMsg=`${value.length?'长度':''}不能大于${length}`){
        let val = value.length || value
        if(val > length) {

            return errorMsg
        }
    },
    // 手机号校验
    mobile:function(value, errorMsg=`手机号码不正确`){
        if(!/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/.test(value)){
            return errorMsg
        }
    },
    // 字符串类型
    string:function(value, errorMsg='必须为字符串类型') {
        if(typeof value !== "string"){
            return errorMsg
        }
    },
}
实现核心类(21行)
class Validator {
    rules={}
    constructor(){
        this.rules=rules
    }
    make(data,cheacks){ 
        return Object.keys(cheacks).map(key=>{
            let val = data[key]
            let rules=cheacks[key].split('|')
            return{
                key:key,
                fail:rules.map(rule=>{
                    let arg = rule.split(":")
                    let fnKey = arg.shift()
                    arg.unshift(val)
                    return this.rules[fnKey].apply(val,arg)
                }).filter(val=>val?true:false)
            }     
        }).filter(val=>val.fail.length>0?true:false)
    }
}
简单调用
//等待验证的数据
let awitWerified = {
    name:1,
    phone:'15210328198'
}
//通过Validator的make方法
let validatorError = new Validator().make(awitWerified, {
    'name' : 'required|string|min:6|max:10',
    'phone' : 'required|phone',
});

if (validatorError) {
   console.log(validatorError)
}
输出如下

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵忠洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值