jQuery学习之:Validation表单验证插件
最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每个人都能够有所掌握,慢慢会用。于是,自己便开始学习……
由于Struts2自己早就学过,因而不需要花多少时间。而AJAX之前没怎么用过。现在AJAX框架如此之多,选择哪一个呢?开始打算选择dojo,但是看了一点后,发现蛮复杂的。在之前有学过一点点jQuery,而网上也说jQuery很强大而且很容易上手。对于我这种情况,正需要上手快的产品。于是,决定选择jQuery。网上jQuery相关的资料很多,如果想学习jQuery,我个人觉得《锋利的jQuery》蛮不错的,推荐看看。
快速的学习完jQuery的基础知识后,便开始做Demo。这时发现一个问题:有些功能反复使用,能不能提取出来?既然我遇到了这样的问题,其他人肯定也遇到了。而jQuery的插件功能如此强大,肯定有相关好用成熟的插件可以使用。于是上网搜到了几个。这篇文章首先跟大家分享一下validation表单验证插件的使用心得。(注:有些来自于网上,在此无法列出作者,请见谅!)
我们都知道,提供客户端验证有很多好处,最重要的好处,我觉得就是能够让用户及时的知道自己填写是否正确,这样是很友好的。软件界有这么一句话:错误发现的越早,损失就会越少……因而,对于WEB开发,表单验证是必不可少的。
说到客户端验证,当然离不开javascript,然而,使用单纯使用javascript有不少问题:1、冗余的代码太多;2、要考虑浏览器的兼容问题;3、工作量大。这几个方面,笔者在项目中深有体会。之前,未进入公司工作时,总觉得公司编码会多么多么的规范,进去之后,发现根本不是这么回事。(当然,有些公司可能还是蛮规范的。)就拿我最近做的项目来说吧,我感觉代码实在是太差了,简直可以用惨不忍睹来形容。其中之一就是代码很不规范,完全就是为了实现功能,我有时跟同事开玩笑:这样的代码,只有自己能看懂吧……当然,不规范最严重的就是页面代码。一个jsp文件中,什么代码都有:java,jsp标签,struts标签,css,javascript等,总之能有的都有,不应该有的也有。其中最糟糕的是:同一个jsp文件中,javascript代码有写在外部js文件中的,有写在jsp文件的<head>中的,有写在<body>中的,还有写在文件最后的。我看了之后很无语。记得又一次,我看他们写的代码,在一个外部js文件中发现有一个变量根本没有定义赋值,很是奇怪,半天没弄明白。一问,他告诉我:在jsp文件的最后有定义那个全局变量……晕。当然,之所以出现这样的情况是多方面得原因,并非同事水平不行,他们一般水平都比我高。还有,现在的项目根本没法在其他浏览器访问,只能IE。正因为如此,我才建议应该重构。说了这么多,目的只有一个,那就是在应用中,我们应该考虑多方面,同时规范编码。同时,有些东西是重复的,为了提高工作效率,我们应该使用一些成熟的框架。下面就讲讲validation的相关知识。
一、validate是jQuery的一个表单验证插件,它不仅实现了客户端表单的多种验证规则,而且,还是用ajax实现了服务器端远程验证。它内置有多种验证规则,同时,可以很方便的定义自己的规则。在此,说明一些常用的功能,详细的介绍,可以参考官方文档。http://docs.jquery.com/Plugins/Validation
validation插件使用很简单:
JavaScript代码:
1 $("#formId").validate(
2 {
3 // 验证规则
4 rules:
5 {},
6 // 验证提示信息(失败时)
7 message:{},
8 errorElement: 'span', // 放置错误信息的元素,可以是其他的。
9 errorPlacement: function(error,element) // 将错误提示信息放在什么地方
10 {},
11 // 成功时执行
12 success: function(label)
13 {
14 label.text(" ") // 将错误内容清空,一定要是" "有空格,否则IE有问题。
15 .addClass("success");
16
17 }
18 });
其中"formId"是表单的form元素的ID属性。
rules和message分别都对应一个对象,该对象只包含属性,其中,属性名为表单中input的name(包括select的name),值为要应用的规则对象。如: