乐趣区

关于javascript:符合预期效果的sunVerifyForObject

verfyForObject

在日常开发中你有没有被简单的表单验证搞得焦头烂额?
略微考虑不周到即导致 测试给你提一个致命 BUG?
一坨一坨的 if else 代码好看度差?
逻辑绕的昏头昏脑?
……

这时候 verfyForObject 你!值得领有。

成果完全符合预期!

(如果你不想看文档里墨迹能够间接下载 DEMO 示例,先看而后再思考是不是要用在我的项目中)

所播种 肯定要点个星星给我

点击 ↓ ↓ ↓ ↓ ↓
https://github.com/allensunjian/sun_verifyForObject
点亮一个星

verfyForObject 是用来做什么的?

因为自己公司行业的起因,在日常的开发过程中会有很多的大量简历相干的表单,表单验证的准确性和多变性,提醒的敌对性,如果没有插件的接入来专门做这些工作,将会产生大量的判断代码,开发周期也会变长 并且很容易出 BUG。
verfyForObject 这个插件就是专门来解决简单验证的。

我的项目地址
https://github.com/allensunjian/sun_verifyForObject

具体配置和阐明见 demo: https://github.com/allensunjian/sun_verifyForObject/tree/master/demo_array

阐明:本插件是在工作中输入的,不免有思考不全的状况,有任何疑难或倡议欢送分割 QQ191144567

verfyForObject 能做什么?
1.  能够验证数据,并返回错误信息
2.  提供多种自定义验证规定的形式
3. 线性验证形式,同一字段可配置多个线性规定,实现简单验证
4. 反对数据对象和数组,包含数组对象的验证
5. 适应性强,与市面上框架进行涣散耦合,并能够联合应用,实现动静验证
6. require 性能,可绑定页面元素,实现绑定页面提醒文字,表单 item 标红,并主动滚动到指标地位
7 内部验证规定可导入
8 丰盛的配置满足多种场景要求
成果演示


成果形容:
1 多验证规定线性执行
2 主动滚动到以后地位
3 标红 + 提醒

配置 / 阐明

构造函数:SunVerifyForObject

 SunVerifyForObject(targetObj,configObj);

targetObj 阐明:
该参数是须要被验证的指标,能够为对象也能够为数组;

configObj 阐明:

configObj 阐明蕴含两个字段 config 和 rules;

config 是配置插件专用配置和内部规定配置相干

rules 是定义 configObj 规定的配置;

configObj 残缺配置如下:

{    
    config: {        
        swicthRequire: true,        // 开启页面 require
        requireOption: {            // require 配置
            mainClass: "sun_verify",            // 须要 border 标红的元素 class
            requireClass: "sun_verify_require"        // 须要显示红色提醒文字的元素 class
        },        
        switchOutsideRules: true,        // 是否开启内部配置,switchOutsideRules 是 true 时,插件会读取 outSideRulesConfig 中的
                                                    actionTypeMap/rulesFn 配置 并和内置我的项目组合到一起,如果规定(rulesFn)或者动作(actionTypeMap)和内置的产生反复 则 outSideRulesConfig 中的配置会笼罩掉内置配置。outSideRulesConfig: {            // 内部配置 switchOutsideRules 为 true 时失效
            actionTypeMap:{// 定义动作类型,零碎会通过该配置主动生成提醒动作 内置动作:input(输出)/select(抉择)/
                                                empty(非空)/
                add: "增加的"            
              },rulesFn:{                    // 内部规定配置,Number: {               // 指定规定类型,目前规定的类型分为 Number/String/Array/Object
                        phone: function (val) {    // 自定义规定 函数内会返回一个待验证的值,手动验证之后依据构造返回
                                                         true 或者 false 抑或 返回一个对象蕴含自定义提醒文字(across 置为 false,                                                                text 自定义谬误提醒)
                              return (isNaN(val) || val.length !== 11) ? {
                              across: false,
                               text: "手机号格局不正确"
                             } : true;
                          }
                    }
              }
        }   
    },    
    rules: {        // 为 检测的指标设置规定
        name: {            
            type: String,                                                    // 指定验证类型
             rules: ["asd:123","empty", "max:10=", "min:2="],    // 指定验证规定 
            labelText: "名称",                                            // 字段在页面中的名称
             actionType: "input"                                        // 指定动作类型
        },phoneNum: {
            type: Number,
            rules: ["type: 手机号输出必须是数字", "phone"],
            labelText: "电话号码",
            actionType: "input"
        }
    }
}

内置类型阐明:
1 “empty” 非空
2 “max” 最大值
3 “min” 最小值
4 “type” 数据类型(会依据 type 字段主动匹配)
内置类型形容:
1 “:” 冒号,为指定比照的值,如 ”max:10″ 意为 最大不能超过 10(不蕴含 10)min 同理。冒号也能够指定类型的提醒文字为手动。如 empty: 请输出 XXXXX
2“=”等号,为指定是否等于该值 如:“max:10=” 最大不能超过 10(蕴含 10)min 同理

内部导入验证类型:

config —》outSideRulesConfig —》actionTypeMap
—–》
增加 — 验证类型(Array/Number/String/Object)目前四种类型;
—–》
指定规定名称和函数;

如下

{
config:{
        outSideRulesConfig:{
            actionTypeMap:{
                 // 指定在 String 类型下增加规定
                String: {handleRule: function (val) { // 会返回指标对象内对应须要验证的值
                        if (val.length < 20) {
                            return {
                                across: false,
                                text: "自定义规定不能小于 20"
                            }
                        }
                        
                        return true
                    }
                }
            }
        }
    },rules: {
            name: {
                type: String,rules: ["handleRule", function (val) {  
                  // 也能够通过间接传入规定函数来实现。if (val.length > 50) {
                            return {
                                across: false,
                                text: "自定义规定不能大于 50"
                            }
                        }
                        
                        return true
                
                }],
                labelText: "名称",
                actionType: "input",
            }
    
    }
}

——自定义规定中冒号能够指定传参

监听事件推送

var svf = new SunVerifyForObject(targetObj, configObj);

在实例下即可注册监听事件应用办法 $on

svf.$on('tirrger', function (errMsg) {
    // 返回示例
    // {
    //  errType: "empty",
    //  labelText: "人选",
    //  text: "人选增加的必须非空"
    // }
    
})

每当程序检测到 不合乎的规定,就会把错误信息从该函数中推送进去。

触发验证

var svf = new SunVerifyForObject(targetObj, configObj);

在实例下调用 test 办法即可对触发验证

svf.test();

开启页面 require 性能

SunVerifyForObject 能够依据配置和页面产生联动,在验证表单时,能够做到动静提醒(文字提醒,边框变红),并主动滚动到元素。

config —》swicthRequire

设置为 true

如果开启页面 require 性能则必须配置两个 class

config —》requireOption

{

mainClass: "sun_verify", // 指定表单元素的 class
requireClass: "sun_verify_require" // 指定 require 提醒文字的 class

}

配置示例示例:

    {
        config: {
                swicthRequire: true,
                requireOption: {
                        mainClass: "sun_verify" ,
                        requireClass: "sun_verify_require"
                }
        },rules:{
            name:{
                type:String,
                rules: ["empty"],
                labelText: "名称",
                actionType: "input"
            }
        }
    }

页面配置示例:

<div>
名称
       // 首先指定 mainClass, 也就是表单元素,并绑定验证字段(data-verflykey)<input class="sun_verify" type="text" v-model="form.name" data-verflykey="name">  
    
     //  其次指定 requireClass 元素,并绑定验证字段(data-requirekey)<div class="sun_verify_require" data-requirekey="name"></div>
</div>
注意事项

1。如果 targetObj(验证指标)是数组类型且开启了 require 性能,那么须要在绑定 DOM 时通过设置 data-vervaluetype=”array” 来通知程序 这个值应该依照数组来解决。
如果 targetObj(验证指标)是对象类型则不必额定进行设置。

2。为了缩小程序的复杂性,简历如果是简单表单,倡议进行拆分验证。

本文档仅仅对 局部配置和性能做了阐明。如果有人感兴趣,我会持续欠缺文档。

更多配置请参考 示例程序

我的项目地址
https://github.com/allensunjian/sun_verifyForObject

具体配置和阐明见 demo: https://github.com/allensunjian/sun_verifyForObject/tree/master/demo_array

退出移动版