jQuery表单验证插件的使用
jQuery表单验证插件下载地址：http://plugins.jquery.com/project/validate
直接上代码了
View Code 
<html xmlns="http://www.w3.org/1999/xhtml" lang="GBK">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta http-equiv="Content-Language" content="GBK" />
<title>测试页面</title>
<link type="text/css" rel="stylesheet" href="css/detailTable.css"/>
<link type="text/css" rel="stylesheet" href="css/validate.css"/>
<script type="text/javascript" src="js/jquery-1.5.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery.metadata.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery.validate.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/messages_cn.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
$('#formTable').validate({
rules: { groupName: {minlength: 2, required: true},
groupDesc: {email: true, required: true}
},
messages: { groupName: {required: "必填", minlength: "最少两个字符" },
groupDesc: {required: "必填", email: "请输入正确email格式" }
},
errorElement: "em",
success: function(label) {
label.text(" ").addClass("success");
}
});
});
</script>
</head>
<body>
<form action="#" method="post" id="formTable">
<input type="hidden" name="groupId" value="<s:property value='multicastGroup.groupId'/>"/>
<table id="detailTable">
<caption>测试修改</caption>
<tbody>
<tr>
<th width="15%">名称</th>
<td colspan="3" width="85%">
<input type="text" name="groupName" id="groupName" size="50"/>
<span id="groupNameTip"></span>
</td>
</tr>
<tr>
<th width="15%">描述</th>
<td width="85%" colspan="3">
<textarea name="groupDesc" id="groupDesc"></textarea>
<span id="groupDescTip"></span>
</td>
</tr>
<tr>
<td width="100%" colspan="4" align="center">
<input type="submit" value="提交" class="controlButton"/>
<input type="button" value="取消" onclick="location.href='MulticastGroup.action'" class="controlButton"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
说明：
引入的js文件：
<script type="text/javascript" src="js/jquery-1.5.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery.metadata.js" charset="UTF-8"></script> //这是一个支持固定格式解析的jQuery插件。
<script type="text/javascript" src="js/jquery.validate.js" charset="UTF-8"></script>
这三个是必须的。
<script type="text/javascript" src="js/messages_cn.js" charset="UTF-8"></script>//默认的中文提示信息。不用也可以，那要自己写这些信息，比如代码中所示。
使用方法：$("#formId").validate({
rules: {
name属性值: { required:true, minlength:2}
},
messages: {
name属性值: { required:'必填', minlength:'最小长度为2'}
},
errorElement: "em",
success: function(label) {
label.text("").addClass("success");
}
})
添加css代码：
em.error{
background:url("error") no-repeat 0px 0px;
padding-left: 16px;
}
em.success{
background:url("success") no-repeat 0px 0px;
padding-left: 16px;
}
jquery validate插件默认验证规则
(2) remote:"check.php" 使用ajax方法调用check.php验证输入值
(3) email:true 必须输入正确格式的电子邮件
(4) url:true 必须输入正确格式的网址
(5) date:true 必须输入正确格式的日期
(6) dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7) number:true 必须输入合法的数字(负数，小数)
(8) digits:true 必须输入整数
(9) creditcard: 必须输入合法的信用卡号
(10) equalTo:"#field" 输入值必须和#field相同
(11) accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12) maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13) minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15) range:[5,10] 输入值必须介于 5 和 10 之间
(16) max:5 输入值不能大于5
(17)min:10 输入值不能小于10
自定义验证规则：
"formula", //验证方法
function(value, element, param) { //验证规则
return value = eval(param);
},
'请输入正确的数学公式结果' //验证信息
);
验证规则参数说明：value代表要验证element的值，param代表例如minlength:2规则中的2.
function返回结果为true时成功，其它失败。
一些其它的验证规则(未验证过) ：
jQuery.validator.addMethod("ip", function(value, element) {
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));
}, "只能输入数字、字母或者它们的组合");
// 自定义验证规则——对电话号码进行验证
$.validator.addMethod("phone",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));
}, "电话号码格式不对." );
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
//长度为11，以13，15，18开头的
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "手机号码格式不对");
// 邮政编码验证
jQuery.validator.addMethod("zip", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "邮政编码格式不对");
//图片格式（后缀）
jQuery.validator.addMethod("photo", function(value, element) {
//后缀jpg,gif,bmp,jpeg,允许大小写混合后缀
var fileName =/^(([a-zA-Z]:)|(\\))((\\)[^\\\*\?\|/:<>]{1,255})+\.(([j,J][p,P][g,G])|([g,G][i,I][f,F]|([b,B][m,M][p,P])|([j,J][p,P][e,E][g,G])))$/;
return this.optional(element) || (fileName.test(value));
}, "只允许后缀为.jpg,.bmp,.gif,jpeg的文件");
ps: this.optional(element)的意义。比如对一个文本框进行最小值验证，当值为空时，
为什么要加上这句呢，想想看你要设定一个minlength:2规则，但这不是必填值。来看下minlength验证规则
minlength: function(value, element, param) {
},
如果没加上this.optional(element) ，当输入值为空时，this.getLength($.trim(value), element) >= param 就是0>=2显然是false.那验证就永远成功不了了。
