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下载