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

时间：2010-12-15 来源：tthxnz

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