js很好用的可异步可管道的校验中心插件

小鱼儿 2022-01-12 00:23 66阅读 0赞

# jj-vdt 校验中心 #

*  [文档地址][Link 1]
 *  可以简单使用默认也可以自定义通过进行校验，非常适用于验证中心
 *  新增管道形式，适用于多重校验
 *  提供异步校验能力
 *  html中则直接引入common文件夹下的vdt.js,window.vdt进行调用

## 安装 ##

import vdt from 'jj-vdt'
    复制代码

## 使用 ##

### 校验空值 ###

// 先注入校验配置
    const Vdt = vdt({
        // key指代校验模式，通过Vdt.test(val)采用相应模式校验
        test:{
            msg: "该值不能为空",
            default: "empty"
        },
        testA:{
            msg: "请输入***",
            default: "empty"
        }
    })
    console.log(Vdt.test(""))
    // { 
    // res:false,
    // msg:"该值不能为空"
    // }
    console.log(Vdt.testA(""))
    // { 
    // res:false,
    // msg:"请输入***"
    // }
    console.log(Vdt.test("1"))
    // { 
    // res:true,
    // }
    复制代码

### 管道模式（ 适用于多重校验 ） ###

const Vdt = vdt({
        qq:[{
            msg: "请输入qq号",
            default: "empty"
        },{
            msg: "qq号输入错误",
            default: "qq"
        }]
    })
    console.log(Vdt.qq(""))
    // { 
    // res:false,
    // msg:"请输入qq号"
    // }
    console.log(Vdt.qq("12"))
    // { 
    // res:false,
    // msg:"qq号输入错误"
    // }
    console.log(Vdt.qq("12345"))
    // { 
    // res:true
    // }
    复制代码

### 自定义校验方法 ###

自定义需要注入fn函数，参数即需要校验的值，函数需要返回true/false，来返回校验结果

const Vdt = vdt({
        test:[{
            msg: "请输入内容",
            default: "empty"
        },{
            msg: "只能输入3个字",
            fn: (val)=>{
                return val.length===3 ? true : false;
            }
        }]
    })
    console.log(Vdt.test(""))
    // { 
    // res:false,
    // msg:"请输入内容"
    // }
    console.log(Vdt.test("12"))
    // { 
    // res:false,
    // msg:"只能输入3个字"
    // }
    console.log(Vdt.test("123"))
    // { 
    // res:true,
    // }
    复制代码

### 自定义异步校验方法 ###

自定义需要注入返回promise对象的fn函数，参数即需要校验的值，resolve的值需要为true/false

const Vdt = vdt({
        test:[{
            msg: "请输入内容",
            default: "empty"
        },{
            msg: "只能输入3个字",
            fn: (val)=>{
                return new Promise(resolve => {
                    resolve(val.length===3 ? true : false;)
                })
            }
        }]
    })
    console.log( Vdt.test("").then(res => console.log(res)) )
    // { 
    // res:false,
    // msg:"请输入内容"
    // }
    console.log(Vdt.test("12").then(res => console.log(res)) )
    // { 
    // res:false,
    // msg:"只能输入3个字"
    // }
    console.log(Vdt.test("123").then(res => console.log(res)) )
    // { 
    // res:true,
    // }
    复制代码

## 支持的默认模式(设置default)，持续更新添加 ##

*  empty: 校验空值
 *  qq: 校验qq
 *  ip: 校验ip
 *  mail: 校验mail

## 请我喝杯果汁呗～ ##

转载于:https://juejin.im/post/5d0b80fbe51d4558936aa093

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fjavison666.github.io%2Fjj-vdt%2F