jquery.validate验证插件验证技巧一例(分组，多行,webform无法确定的textboxName)

本文假设你已经会了解且使用validate插件了，如果不了解，可以去官方主页看看

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

 

Jquery.validate的一般用法

 

  var valid = $( " form " ).validate( /* { rules: { name: { email: true, required: true}} } */ );

 

 

上面这样用的时候，rules里面的name必须为要验证的input元素的name,很显然，对于webofrm而言，我们无法确定元素的name叫什么,当然你可以使用

<%=Controller.UniqueId%>

这样来确定input的name,但是如果你在repeater绑定多个textbox的时候，每个input的name都是动态出来的，基本上是无法确定input的name叫什么，况且，就算我们确定了name，他也只能验证第一个，没有办法验证多行。

不过，你可以使用css来验证，这个方法我们在此不讲解，有兴趣的朋友去看官方介绍

 

还有就是分组，在webform的时候，由于每个button都会引发提交事件，分组的时候有2中，一种就是不引发验证，还有一种就是引发不同的验证，如果不引发验证，官方解决办法是给button加上一个叫"cancel"的样式，这样，这个button就不会引发验证了。但是分组没有提供

 

直接上代码，逐行注释

 

 

代码

< form id = " form1 " runat = " server " >
    < div class = " main " >
        < table >
            < asp:Repeater ID = " Repeater1 " runat = " server " >
                < ItemTemplate >
                    < tr >
                        < td >
                            < asp:TextBox ID = " txtUid " CssClass = " txtUid " runat = " server " ></ asp:TextBox >
                        </ td >
                        < td >
                            < asp:TextBox ID = " txtUname " CssClass = " txtUname " runat = " server " ></ asp:TextBox >
                        </ td >
                    </ tr >
                </ ItemTemplate >
            </ asp:Repeater >
        </ table >
        < div >
            < asp:Button ID = " Button2 " CssClass = " btnOne " runat = " server " Text = " 验证单元格1 "   />
            < asp:Button ID = " Button1 " CssClass = " btnTwo " runat = " server " Text = " 验证单元格2 "   />
            < asp:Button ID = " Button3 " CssClass = " unValid " runat = " server " Text = " 不验证 "   />
        </ div >
    </ div >
    </ form >

 

 

上面的代码显示了一个repeater,他将产生多行，每行2个textbox,最终呈现出来的时候每个textbox的name都将不同，因此，我们无法使用input的name来验证

 

 

        $( function () {
            // 为form绑定验证事件，但是什么规则也不加
            var valid = $( " form " ).validate( /* { rules: { name: { email: true, required: true}} } */ );
            $( " .btnOne " ).click( function () {
                // 主要就是这2行，将原本已经存在的验证规则干掉，然后增加新的规则
                valid.settings.rules = {};
                valid.settings.messages = {};
                /*
                很可惜的是，原生的方法里面只支持用name来选择，而且就算你有多个name一样的元素，他也只验证第一个
                我们将用className确定元素后增加验证规则，webform的服务器的CssName可以追加多个的，而且我们可以确定
                */
                $( " .txtUid " ).each( function () {
                    $( this ).rules( " add " , { email: true , required: true })
                });
            });
            $( " .btnTwo " ).click( function () {
                // 主要就是这2行，将原本已经存在的验证规则干掉，然后增加新的规则
                valid.settings.rules = {};
                valid.settings.messages = {};
                /*
                很可惜的是，原生的方法里面只支持用name来选择，而且就算你有多个name一样的元素，他也只验证第一个
                我们将用className确定元素后增加验证规则，webform的服务器的CssName可以追加多个的，而且我们可以确定
                */
                $( " .txtUname " ).each( function () {
                    $( this ).rules( " add " , { required: true })
                });
            });
            $( " .unValid " ).click( function () {
                /*
                使用cancel虽然好，可是美工把写了个cancel的样式，而且还用了一张图告诉我这个button的文字叫取消
                没事，自己实现一个不验证的组，就是把规则干掉
                主要就是这2行，将原本已经存在的验证规则干掉，然后增加新的规则
                */
                valid.settings.rules = {};
                valid.settings.messages = {};
            });
        });

……

本例demo下载