[jQuery]使用jQuery.Validate进行客户端验证(中级篇-上)——不使用微软验证控件的理由...
发布日期:2021-08-15 22:29:48 浏览次数:33 分类:技术文章

本文共 4429 字,大约阅读时间需要 14 分钟。

    在上一篇使用中我介绍了为什么选用jQuery.Validate作为客户端的理由,同时也介绍了jQuery.Validate的基本用法以及中文验证消息的修改方法,今天的中级篇我将介绍下jQuery.Validate的一些常见的验证的使用方法。

jQuery.Validate为我们提供了3种验证编写方式,各有优缺点:

1、在input对象中书写class样式指定验证规则或属性验证规则:

如<input type=”text” class=”required”/>

最简单、最便捷,提示消息使用jQuery.Validate的内置的消息(自定义扩展验证规则也属于此项),但是由于是以样式名的方式进行验证,导致了日后修改必须找到相应的input对象,同时无法使用高级验证规则,具体说明请向下看

2、同第1条,这种验证规则方式也是在input对象中书写class样式,只不过书写的方式改为了JSON格式,但是这种方式提供了自定义验证消息的支持:

如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>

简单、方便,但个人认为有点臃肿,还是和第1条一样和相对应的input对象纠缠在一起,并且还增加消息自定义,使得input对象变的更大了,干扰了页面代码的阅读,但可以使用高级验证规则(实际就是将第3种JS以JSON的格式放到具体的class中

3、这种方式使用纯JS的方式:

如:

$().ready(function() {

    $("#aspnetform").validate({
         rules: {
         name: "required",
         email: {
                 required: true,
                 email: true
         }

     })

})

很好的解决了HTML和验证规则的分离,就是书写较为麻烦,需要单独写JS脚本,但好处是可以统一验证规范,将每个页面的验证规则都写在头部的脚本中,方便日后维护。

注意:以上3种验证方式的消息如果未指定都会默认调用内置的消息

在了解了jQuery.Validate为我们提供几种验证方式后,我们来具体分析下每个验证方式:

第一种,在input对象中书写class样式指定验证规则或属性验证规则,可以将该input需要的规则一次性写在里面(具体见页面Middle-1.aspx)。

如:

<asp:TextBox ID="txtAge" runat="server" class="required number" max="99" min="1"></asp:TextBox>

这段代码的意思是必须输入年龄字段,年龄必须是数字,同时必须在0-99范围内,使用起来很方便写几个属性就可以搞定,可以根据需求自由的组合验证规则。

但是就如上面说的许多高级的验证规则无法使用:

range(范围验证,这个就可以替代max,min),

rangeLength(长度范围验证,可以替代maxLength,minLength),

equalTo(比较验证,这个其实可以用,但是如果使用使用的是ASP.NET控件就不行,纯HTML控件可以。

看下代码,我想比较2次输入的密码是否一样时理论上可以这么写:

<asp:TextBox ID="txtRePwd" runat="server" TextMode="Password" CssClass="required" minlength="6" equalTo='#<%=txtPwd.ClientID %>'></asp:TextBox>

但是由于ASP.NET控件的机制问题,会把#<%=txtPwd.ClientID %>进行转译成#&lt;%=txtPwd.ClientID %>这样就导致了要比较的ID无法正确获取,导致验证不成功。

但如果这么写就不会出现问题:

<input type=”password” class=”required” minlenght=”6” equalTo=”txtPwd”/>

 

第二种,同样书写class验证规则,只不过以JSON格式书写,可自定义验证消息,高级验证功能,JS验证规则的简化版(具体见页面Middle-2.aspx):

这种方式由于要以JSON的格式来编写规则,所以需要引用个单独的JS文件:jquery.metadata.js

具体书写代码格式如下:

<asp:TextBox ID="txtUid" runat="server" CssClass="{required:true,messages:{required:'不输入用户名你怎么登陆?'}}"></asp:TextBox>

<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不输入密码怎么行 呢?',minlength:'密码太短啦至少6位'}}"></asp:TextBox>

具体意思分别是:必须输入用户名和必须输入密码同时长度至少6位。

注意:这边我重新定义了验证信息,这样就不用使用原先在jQuery.Validate中的内置的通用消息,可以指定更加人性化的消息,看下截图(可以对比下内置提示信息和自定义提示信息):

 

使用了这种方式后,我们就可以使用第一种验证方式中无法使用的一些验证规则了,如range:

<asp:TextBox ID="txtAge" runat="server" class="{required:true,number:true,range:[1,99],messages:{range:'您的年龄有问题 把,得在1-99岁之间哦'}}"></asp:TextBox>

同样我这边也修改了具体具体的消息,而rangelength的用法也与这个类似我就不演示了。

同样很遗憾的,由于ASP.NET控件特性问题equalTo在这也不能使用,HTML还是有效的。

 

 

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

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

01 function InitRules() {
02     opts = {
03          rules:
04          {
05                 <%=txtUid.UniqueID %>:
06                 {
07                     required: true
08                 },
09                 <%=txtPwd.UniqueID %>:
10                 {
11                     required: true,
12                     minlength: 6
13                 },
14                 <%=txtRePwd.UniqueID %>:
15                 {
16                     required: true,
17                     minlength: 6,
18                     equalTo:"#<%=txtPwd.ClientID %>"
19                 },
20                 <%=txtName.UniqueID %>:
21                 {
22                     required: true
23                 },
24                 <%=txtAge.UniqueID %>:
25                 {
26                     required: true,
27                     number: true,
28                     range: [1,99]
29                 },
30                 <%=txtEmail.UniqueID %>:
31                 {
32                     email: true
33                 }
34          },
35          messages:
36          {
37                 <%=txtPwd.UniqueID %>:
38                 {
39                     required:"不输入用户名你怎么登陆?"
40                 },
41                 <%=txtPwd.UniqueID %>:
42                 {
43                     required:"你不输入密码怎么行呢?",
44                     minlength:"密码太短啦至少6位"
45                 },
46                 <%=txtAge.UniqueID %>:
47                 {
48                     range:"您的年龄有问题把,得在1-99岁之间哦"
49                 }
50          }
51     }
52 }

这种方式虽然可以使用所有的高级功能,验证规则也分 离出来了,但是就是书写起来不简便,所以我的个人建议是如果不是要求很高的情况下,可以将如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种验证方式更改验证规则所处的属性、指定验证信息显示位置等。

源代码下载:

转载于:https://www.cnblogs.com/yongheng178/archive/2010/11/27/1889503.html

转载地址:https://blog.csdn.net/weixin_30781107/article/details/97184714 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Jenkins安装及环境搭建
下一篇:VHF、UHF的频率范围

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年03月10日 08时55分09秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java spring上传文件_Java Spring文件上传,Java文件上传,Java通用文件上传 2019-04-21
linux 模拟键盘输入到进程,Linux 下模拟键盘输入 2019-04-21
linux服务器上已安装R 用户下载R包,R语言安装R package的2种方法 2019-04-21
linux 7 磁盘空间太小,Linux下磁盘保留空间的调整,解决df看到的空间和实际磁盘大小不一致的问题... 2019-04-21
linux下mysql 备份方法,Linux下mysql数据库备份方法小结 2019-04-21
bootstrap 页面垂直居中_iframe中如何让layer提示框显示在垂直居中的位置 2019-04-21
肺部ct重建_胸片检查容易漏诊肺癌,去年正常今年晚期常发生,体检一定要做CT... 2019-04-21
3dmax如何拆分模型_3D建模大佬如何制作出惊艳四方的游戏建模,看完这篇文章我知道了... 2019-04-21
x86so文件装换成arm64位_64位系统正式发布说明及介绍!! 2019-04-21
for循环中取出最大最小 累加_LeetCode之长度最小的子数组 2019-04-21
如何打开老公人脸识别_【话题】南宁已有小区启用人脸识别门禁,有人点赞有人忧... 2019-04-21
makex机器人程序_机器人教育为相城青少年叩开科学世界大门 2019-04-21
一寸照纯红色底图片_Ella陈嘉桦也是“时髦精”,穿玫红色西装配拼色半身裙,高级洋气... 2019-04-21
米哈游客户端笔试题_Garena校招 游戏客户端开发通关面经 2019-04-21
airpodspro没有弹窗_使用AirPods Pro一天的主观感受 2019-04-21
创建物化视图commit_视图及范式 2019-04-21
函数传参字典_Python新手上车17:函数传递任意多个参数 2019-04-21
去掉数组最后一个元素_【一天一大 lee】在排序数组中查找元素的第一个和最后一个位置 (难度:中等) Day20201201... 2019-04-21
秦九韶算法递推公式_算法讲解之复杂度分析 2019-04-21
添加绝对路径_网站中如何添加绝对路径 2019-04-21