多表单验证插件api（测试版）

最新推荐文章于 2023-10-29 13:08:22 发布

zhangliuxiaomin

最新推荐文章于 2023-10-29 13:08:22 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/zhangliuxiaomin/article/details/47751015

版权

此插件开发的需求来源于公司项目，由于公司经常有很多循环出来的数组，然后用mvvm框架渲染出来，类似这样的东西

其中时间框得验证时间格式，后面紧接着要验证数字格式，验证通过后才可以点击保存执行下面的逻辑，通常的做法呢｀｀｀我不想说通常的做法好吗｀｀太恶心了

很多朋友说有一些表单验证插件啊，我想说的是那是单例表单验证插件，那么根据这种变态的需求，多表单验证插件就诞生了！

一个简单的demo来说明

先来个单例的

<input type="text" class="lxm-number-99-1 aaa bbb" lxm-lable="只能为数字！" >
<input type="text" class="lxm-notNull-99-1 aaa bbb" lxm-lable="不能为空！" >

<a href="javascript:;" class="btn red-btn" ms-click="submitAuditOrder" title="lxm-submit-99-1">搜索</a>

大家看到了以lxm 开头的都是插件专属标签class，用法是：

1、首先要在class里面加上 lxm-number-99-1 其中数字为2位或者一位数字类似这样都可以 lxm-number-10-11 lxm-number-21-3

2、在input 加上lxm-lable 聪明的你一定猜出来这是干什么用的了，没错就是验证不通过弹出的提示信息

3、在网页的任意地方加上按钮<A> 绑定title 等于 lxm-submit-99-1 同样数字可以是任意2位组合，不过一定要和你要验证的input添加的class数字一致，插件就是根据末尾2个数字来判断的

好了大家可以看到我给出的例子里面有ms-click这个标签，对，就是avalon的click方法，当然你也可以在anglar用此插件，他可以拦截一切点击方法，直到你验证都通过～～这是传统表单验证所不具有的吧｀｀是不是很淫荡

因为是通过类似添加这样的class ： lxm-number-99-10，来与要点击验证的按钮来对应，那么一个页面我算算最多能绑定多少组这样的验证呢？

应该是 99*99组｀｀应该够了吧，不够你自己去想办法吧

在实际应用过程中，很多mvvm的框架在渲染界面都提供 $index 变量，即获取当前数据在数组中的下标，这样你就可以绑定到class上动态生成了举例(avalon的例子)：

<div ms-repeat="arry1">
<div ms-repeat-al="el.arry2">
<input type="text" ms-duplex="al.guestName"  ms-class="lxm-notNull-{{$outer.$index}}-{{$index}}:al.auditStatus==1">
<a class="btn red-btn mb10"   ms-attr-title="lxm-submit-{{$outer.$index}}-{{$index}}" ms-click="saveThis">保存</a>
</div>
</div>

这里有一个问题，就是可能arry1的数据是某个事件之后获取到的，也就是在首次访问也门dom加载完毕并没有生成，那么就需要在相应的事件之后加上本插件的方法

lxmValidata();重新获取一下页面上的dom结构，这一条很重要，别到时候不管用来骂我；需要jquery支持

下面贴上源码：100行左右

<div><pre name="code" class="html"> var lxmValidata=function(){
        var number = new RegExp("^[0-9]*$");//匹配数字
        var thisBtn=$("a[title*='lxm-submit']");
        var thisNewBtn;
        var thisInput=$("input[class*='lxm-']");
        var access;
        var thisBtnI;
        //------拓展验证变量定义开始，需要定义自己的验证就按照目前的格式来 lxm-abcd 主要lxm- 后面必须接全部英文字母不能有数字-----------
        var inputNotNull="lxm-notNull";
        var inputNumber="lxm-number";
        var inputDate="lxm-date";

        window[inputNotNull]= /\S/;//验证不能为空
        window[inputNumber]= new RegExp("^[0-9]*$");//验证数字
        window[inputDate]=/^(\d{4})-(\d{2})-(\d{2})$/;//时间格式验证 2015-11-02
        //------拓展验证变量定义结束-----------
        var validataArry=[]
        for(var i=0;i<thisBtn.length;i++){
            var arry=[];
            validataArry.push(arry);
        }
        var validateInput=function(a,b,t){
            var reg=new RegExp(a+"-[0-9]+-[0-9]+")
            var aa=t.attr("class").match(reg)
            aa= aa[0].replace(a,"")
            //console.log(aa)
            for(var i=0;i<thisBtn.length;i++){
                if($(thisBtn[i]).attr("title")=="lxm-submit"+aa){
                    thisBtnI=i;
                }
            }
            if(!b.test(t.val())){
                access=true;
            }else{
                access=false;
            }
        }
        thisInput.each(function(){
            var reg=/lxm-[\w\W]+?(-\d{1,2}){2}/;
            var aa=$(this).attr("class").match(reg)
            aa=aa[0].split("-");
            var bb=aa[0]+"-"+aa[1];
            validateInput(bb,window[bb],$(this));
            if(access){
                validataArry[thisBtnI].push($(this))
            }
        })
        thisInput.each(function(){
            $(this).on("input propertychange focus",function(e){
                var reg=/lxm-[\w\W]+?(-\d{1,2}){2}/;
                var aa=$(this).attr("class").match(reg)
                aa=aa[0].split("-");
                var bb=aa[0]+"-"+aa[1];
                validateInput(bb,window[bb],$(this));
                if(!access){
                    $("#lxm-alert"+thisBtnI).remove()
                    if(validataArry[thisBtnI].length>0){
                        for(var i=0;i<validataArry[thisBtnI].length;i++){
                            if(validataArry[thisBtnI][i].offset().left==$(this).offset().left&&validataArry[thisBtnI][i].offset().top==$(this).offset().top){
                                validataArry[thisBtnI].splice(i,1)
                            }
                        }
                    }

                }else{
                    if(validataArry[thisBtnI].length>0){
                        for(var i=0;i<validataArry[thisBtnI].length;i++){
                            if(validataArry[thisBtnI][i].offset().left!=$(this).offset().left||validataArry[thisBtnI][i].offset().top!=$(this).offset().top){
                                validataArry[thisBtnI].push($(this))
                            }
                        }
                    }else{
                        validataArry[thisBtnI].push($(this))
                    }

                }
                if(validataArry[thisBtnI].length==0){
                     $(thisNewBtn[thisBtnI]).hide();
                }else{
                     $(thisNewBtn[thisBtnI]).show();
                }
           })
        })
        //console.log(validataArry);
        for(var i=0;i<thisBtn.length;i++){
            if($("a[id=lxm-newSubmit-"+i+"]").length==0){
                $(thisBtn[i]).after("<a lxm-title='"+$(thisBtn[i]).attr("title")+"' id='lxm-newSubmit-"+i+"' style='position:absolute;z-index:999;left:"+$(thisBtn[i]).position().left+"px;top:"+$(thisBtn[i]).position().top+"px' href='javascript:;' "+" class='"+$(thisBtn[i]).attr("class")+" '>"+$(thisBtn[i]).html()+"</a>")

            }
            thisNewBtn=$("a[id*=lxm-newSubmit]");
            if( validataArry[i].length==0){
              // $("#lxm-newSubmit-"+i).hide();
                $(thisNewBtn[i]).hide();
            }
        }

        thisNewBtn.click(function(){
                var reg=new RegExp("lxm-newSubmit-[0-9]+")
                var aa=$(this).attr("id").match(reg)
                aa= aa[0].replace("lxm-newSubmit-","")
                if(validataArry[aa].length>0){
                    $(validataArry[aa][0]).focus();
                    if($("#lxm-alert"+aa).length==0){
                        var l=0;
                        if($(validataArry[aa][0]).width()<=50){
                            l=$(validataArry[aa][0]).width()/2+20;
                        }
                        $(validataArry[aa][0]).after("<div class='lxm-alert' id='lxm-alert"+aa+"' style='position: absolute;left: "+ ($(validataArry[aa][0]).position().left-l)+"px;top:"+ ($(validataArry[aa][0]).position().top+35)+"px'><div style='width: 12px; left: 50%; margin-left: -6px; height: 6px; text-indent: 0px; overflow: hidden; position: absolute; top: -6px;'><before style='border-color: transparent transparent rgb(247, 206, 57); border-style: dashed dashed solid; bottom: 0px; width: 0px; height: 0px; overflow: hidden; border-width: 6px; position: absolute;'></before><after style='border-color: transparent transparent rgb(255, 255, 224); border-style: dashed dashed solid; bottom: -1px; width: 0px; height: 0px; overflow: hidden; border-width: 6px; position: absolute;'></after></div>"+ $(validataArry[aa][0]).attr("lxm-lable")+"</div>")
                    }
                }else{
                    $("#lxm-alert"+aa).remove()
                }
            })
    }

$(function(){
    lxmValidata();
})

zhangliuxiaomin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多表单验证插件api（测试版）

此插件开发的需求来源于公司项目，由于公司经常有很多循环出来的数组，然后用mvvm框架渲染出来，类似这样的东西其中时间框得验证时间格式，后面紧接着要验证数字格式，验证通过后才可以点击保存执行下面的逻辑，通常的做法呢｀｀｀我不想说通常的做法好吗｀｀太恶心了很多朋友说有一些表单验证插件啊，我想说的是那是单例表单验证插件，那么根据这种变态的需求，多表单验证插件就诞生了！
复制链接

扫一扫