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

最新推荐文章于 2023-12-02 12:10:47 发布

weixin_34117522

最新推荐文章于 2023-12-02 12:10:47 发布

阅读量187

点赞数

原文链接：https://juejin.im/post/5d0b80fbe51d4558936aa093

版权

jj-vdt 校验中心

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

安装

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

<script src="jj-vdt/common/vdt.js"></script>
复制代码

使用

校验空值

// 先注入校验配置
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,
// }
复制代码