[jQuery]使用jQuery.Validate进行客户端验证（中级篇-上）——不使用微软验证控件的理由

第三种，使用JS进行规则验证，可以使用所有验证规则，并且可以试HTML代码和验证规则很好的分离，方便日后维护（具体代码见Middle-3.aspx）

这种方式需要手写JS来编写验证的规则，具体的格式如下：

view sourceprint?01 function InitRules() {
    opts = {
         rules:
          {
                 <%=txtUid.UniqueID %>: 
                 {
                     required: true
                 },
                 <%=txtPwd.UniqueID %>: 
                 {
                     required: true,
                     minlength: 6
                 },
                 <%=txtRePwd.UniqueID %>: 
                 {
                     required: true,
                     minlength: 6,
                     equalTo:"#<%=txtPwd.ClientID %>"
                 },
                 <%=txtName.UniqueID %>: 
                 {
                     required: true
                 },
                 <%=txtAge.UniqueID %>: 
                 {
                     required: true,
                     number: true,
                     range: [1,99]
                 },
                 <%=txtEmail.UniqueID %>: 
                 {
                     email: true
                 }
          },
          messages:
          {
                 <%=txtPwd.UniqueID %>:
                 {
                     required:"不输入用户名你怎么登陆?"
                 },
                 <%=txtPwd.UniqueID %>: 
                 {
                     required:"你不输入密码怎么行呢?",
                     minlength:"密码太短啦至少6位"
                 },
                 <%=txtAge.UniqueID %>: 
                 {
                     range:"您的年龄有问题把,得在1-99岁之间哦"
                 }
          }
     }
 }

这种方式虽然可以使用所有的高级功能，验证规则也分离出来了，但是就是书写起来不简便，所以我的个人建议是如果不是要求很高的情况下，可以将如required，number，email等常规的简单的验证规则使用第1种验证方式，方便、快捷，只有当第1种无法实行的时候才使用这种方式，如equalTo（比较验证），remote（AJAX验证）等，这样相互结合效率是最高的。

到这边可能会有人奇怪了，因为在上面介绍这种JS验证方式的的时候有个小例子，需要把规则放入jQuery.Validate的方法中，否则制定的验证规则是无效的。

这里我就要说明下了，因为，这个例子中我使用的模拟一个项目的形式编写的，页面全部套用母版页，所以为了满足jQuery.Validate拦截form表单的方式，所以我在母版页中的<header>定义了一个变量用来存放每个页面中定义的验证规则：var opts = null;，这样根据HTML从上到下的解析方式首先opts被定义，然后在每个子页面被赋值，最后再返回母版页中的jQuery.Validate初始拦截form方法：

jQuery(document).ready(function() {
    if (opts != undefined || opts != null) {
        jQuery("#<%=form1.ClientID %>").validate(opts);
    } else {
        jQuery("#<%=form1.ClientID %>").validate();
    }
});

如果在子页面里制定了规则，则按规则验证，没有规则则直接验证（这边的opts中包含的规则和具体的class规则不会有冲突，你可以将一部分规则写在opts中（remote，equalTo），另外的规则写在class中（required，number等）

以上就是使用jQuery.Validate进行客户端验证中级篇-上，具体的代码请下载源代码进行查看。

PS：1、本来想把中篇写成一篇的，但是写着写着发现东西实在太多，写在1篇里会太多，所以分成了2篇写，请见谅！

2、下一篇将对jQuery.Validate的使用过程中会碰到的问题进行介绍，如第2种验证方式更改验证规则所处的属性、指定验证信息显示位置等。

转载：http://www.cnblogs.com/kyo-yo/archive/2010/06/29/Use-jQueryValidate-To-Being-Client-Validation.html

出处：博客园
责任编辑：bluehearts

上一页 使用jQuery.Validate进行客户端验证(中篇) [1] 下一页 使用jQuery.Validate进行客户端验证(中篇) [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。