jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/
最近由于公司决定使用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插件使用很简单:
{
// 验证规则
rules:
{},
// 验证提示信息(失败时)
message:{},
errorElement: 'span', // 放置错误信息的元素,可以是其他的。
errorPlacement: function(error,element) // 将错误提示信息放在什么地方
{},
// 成功时执行
success: function(label)
{
label.text(" ") // 将错误内容清空,一定要是" "有空格,否则IE有问题。
.addClass("success");
}
});
其中"formId"是表单的form元素的ID属性。
rules和message分别都对应一个对象,该对象只包含属性,其中,属性名为表单中input的name(包括select的name),值为要应用的规则对象。如:
userName:{
required:true,
maxlength:20,
emote: {
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据,默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}
}
}
message对应是一样的,只是把规则的值改为提示信息,如:required:‘必填项'。
validation内置的验证规则如下:
required:true 必填
minlength:最小长度
maxlength:最大长度
rangelength: [3,10] 长度介于 3 和 {1} 之间的字符串
range:[100,1000] 只能是100和 1000 之间的值”
min:最小值
max:最大值
email:true 验证邮箱
url:true 验证是否是合法的网址
date:true 验证是否是合法的日期 new Date() 类型格式
dateISO:true 验证是否是合法的日期 年/月/日 或 年-月-日 格式
number:true 验证是否是合法的数字
digits:true 验证是否为整数
creditcard: 验证合法的信用卡号
equalTo:”要匹配的元素” 如:’#cnfpass’ , 验证两次输入值是否相同
accept: “gif|png|jpg” 验证是否是合法后缀名的字符串
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据,默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}
注意:remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。
除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod方法实现的,语法 为:jQuery.validator.addMethod("name",function,message)。其中name为验证规则的名 称,function定义验证的规则,message是验证失败时的提示信息。如:
return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
// 增加只能是字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");
/**
* 自定义验证规则——对电话号码进行验证
*/
$.validator.addMethod(
"isPhone",
function(value, element)
{
// “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种:010-82839278、(010)82839278、01082839278等,但是,这样有一个问题
// 如:(01082839278这样的也会匹配。当然可以用分支条件"|"解决,比较麻烦。而且以什么开始或结束也没有匹配。
// 为了简单起见,去掉有"()"的形式。匹配区号3位,则本地号8位,区号4位,则本地号7位的号码。
var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;
return this.optional(element) || (tel.test(value));
}
, "电话号码格式不对."
);
还可以定义其他的验证规则。应用自定义的规则很容易,自定义规则和内置规则用法是一样的。
在此,提供一个有用的验证规则,那就是针对select下拉框的验证:
* 自定义验证规则——增加对select的验证
*/
$.validator.addMethod(
"selectNone", // name验证方法名
function(value, element) // 验证规则
{
if (value == "none") // select默认值需要设置为"none"(当然可以自定义其他值)
{
return false;
}
else
{
return true;
}
},
"必须选择一项" // 默认验证消息(自定义规则信息的国际化是否不起作用?)
);
二、验证信息的国际化
验证信息国际化是很方便的,默认验证信息是英文的,只需导入validation已写好的国际化文件,如:
<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>
在验证时,去掉message,提示信息就会变成中文。
可以改国际化文件中的提示信息内容,使其更加个性化、符合项目要求。另外,如果在验证时使用了message,message中指定的字段提示信息会覆盖国际化文件中的信息。
这里有一个问题,国际化时似乎没法根据浏览器的locale来自动识别该用什么语言来显示。笔者测试了一下,当导入多国语言文件时,总是会使用最 后一次导入的语言。因此,要实现真正的国际化,可以通过一个链接之类的来选择语言,然后用javascript来导入不同的语言文件。
三、远程验证
远程验证很有用,用户体验很好,因为不需要提交表单就知道自己注册用户的是否已被注册。validation插件通过remote规则来实现验证。在此讲解一下如果将请求提交给struts2的action来验证。
remote规则的格式为:
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据,默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}
由于remote规则只允许后台返回true或false,因此struts2的action得不同于一般的action,不能返回一个字符串,然后 dispatch一个视图之类的。研究之后,发现struts2中有一种result类型:stream,通过该类型可以实现返回true或false。 action代码如下:
// 定义返回的输入流
private InputStream inputStream;
// 定义需要到远程验证的字段
private String userName;
private String email;
// 定义返回值:只能为Boolean类型
private Boolean valid;
/**
* Action执行的方法:实现远程验证,将业务逻辑交给后台处理,并接收结果
* 同时,将结果返回。
* @return
*/
public String execute()
{
// 根据userName判断该SP/CP是否已被注册;根据email判断该账号是否已被占用
if(spcpPreApprovalService.existSpcpAccount(userName, email))
{
valid = false;
}
else
{
valid = true;
}
inputStream = new ByteArrayInputStream(valid.toString().getBytes());
return Action.SUCCESS;
}
// 省略getter、setter
struts.xml文件的配置为:
<action name="validateSpId" class="validateSpcpAction">
<result type="stream">
<param name="contentType">text/html</param><!-- 默认为text/plain -->
<param name="inputName">inputStream</param><!-- 默认就为inputStream -->
</result>
</action>
</package>
这样便可以实现远程验证功能。
总结
可以看出validation使表单验证变得很容易,实现起来很轻松。validation插件还有其他一些功能,需要了解可以查看官方文档。
由于写的demo是把公司项目的一些页面改为ajax+struts2,所以在此不方便把所有的代买贴出来。如果遇到什么问题,可以联系我。
jQuery学习之:Validation表单验证插件的更多相关文章
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- jquery validation表单验证插件。
这个是刚学的,觉得对以后挺有用的,就想把自己所学的分享一下. 校验规则: (1)required:true 必输字段 (2)number:true 必须输入合法的数字(负数,小数) (3)digits ...
- jquery validation表单验证插件2。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 云平台项目--学习经验--BootstrapValidate表单验证插件
使用前提,需要加载jquery和bootstrap库.并且引入bootstrapValidator.js和bootstrapValidator.css文件然后建立一个form表单,添加表单控件,表单控 ...
- jQuery之Validation表单验证插件使用
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
随机推荐
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- Pandas-数据探索
Pandas包对数据的常用探索功能,方便了解数据描述性属性. 目录 基础属性 shape indexs columns values dtype/dtypes 汇总和计算描述统计 count() va ...
- noip2015 运输计划
描述 公元 2044 年,人类进入了宇宙纪元.L 国有 nn 个星球,还有 n−1n−1 条双向航道,每条航道建立在两个星球之间,这 n−1n−1 条 航道连通了 L 国的所有星球. 小 P 掌管一家 ...
- eclipse version
查看Eclipse的版本号: 1. 找到eclipse安装目录 2. 进入readme文件夹,打开readme_eclipse.html 3. readme_eclipse.html呈现的第二行即数字 ...
- 《UNIX环境高级编程第三版》apue.h等源码文件的编译安装
操作系统:Ubuntu 12/14 1.下载书中的源代码:点击下载 2.编译 tar -zxvf *.tar.gz cd ./apue.3e make 报错: can,t find -lbsd 解决办 ...
- 【Alpha版本】冲刺阶段——Day 2
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 进阶系列一【绝对干货】---SQL语句执行效率优化
1.尽量适用联接查询来取代子查询 2.如果要用子查询,用EXISTS替代IN.用NOT EXISTS替代NOT IN,因为EXISTS引入的子查询只是测试是否存在符合子查询中指定条件的行,效率较高.无 ...
- css如何实现水平居中呢?css实现水平居中的方法?
面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中. 首先分两种情况,行内元素还是块级元素.然而块级元素又分为定宽块状元素和不定款块状元素.先来看下行内元素如何水平居中 ...
- 拖拽对DOM的影响
前一段时间公司要对上传列表中多文本输入框添加富文本编辑功能,所以最初的想法是引入富文本编辑器插件,对每个多文本输入框实例化一次.但是上传列表还有一个可以拖拽排序的功能,在初次实例化以后,再拖拽元素就会 ...
- WebAPI返回数据类型
最近开始使用WebAPI,上手很容易,然后有些疑惑 1.WebAPI默认返回什么数据类型,json还是xml? 2.怎么修改WebAPI的返回数据类型,我用IE浏览器请求返回的数据都是JSON格式的, ...