第三种,使用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种验证方式更改验证规则所处的属性、指定验证信息显示位置等。