【】jQuery Validate网址
http://jqueryvalidation.org/
【】jQuery validation引入
先引入jQuery,再引入jquery validation插件，以及支持I18N的插件文件
<script type=\"大众text/javascript\"大众 src=\公众../jqueryvalidate/jquery.validate.min.js\"大众></script>
<script type=\公众text/javascript\公众 src=\"大众../jqueryvalidate/localization/messages_zh.min.js\公众></script>
【】jQuery validation插件的利用
1.定义表单
可以利用HTML form表单元素，也可以利用Struts2表单元素
<%@ page language=\公众java\公众 contentType=\"大众text/html; charset=UTF-8\公众
pageEncoding=\"大众UTF-8\"大众%>
<%@ taglib uri=\公众/struts-tags\"大众 prefix=\"大众s\公众 %>
<s:form id=\"大众departmentaddform\"大众 action=\"大众../department/add.action\公众 method=\公众post\公众>
<s:textfield id=\公众departmentcode\"大众 name=\"大众dv.code\公众 label=\公众部门编码\公众></s:textfield>
<s:textfield id=\"大众departmentname\"大众 name=\"大众dv.name\公众 label=\"大众部门名称\公众></s:textfield>
<s:submit value=\公众提交\"大众></s:submit>
</s:form>
2.JavaScript引入jQuery validation
//部门表单验证
$(\"大众form#departmentaddform\"大众).validate({
rules: {
\"大众dv.code\"大众: {
required: true,
rangelength: [5,10]
},
\"大众dv.name\"大众:{
required: true
}
}
});
【】jQuery validation常用的验证规则
默认校验规则
(1)required:true 必输字段
(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
【】验证规则的利用
$().ready(function() {
$(\"大众#signupForm\"大众).validate({
rules: {
firstname: \公众required\公众,
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: \公众#password\"大众
}
},
messages: {
firstname: \"大众请输入姓名\公众,
email: {
required: \"大众请输入Email地址\公众,
email: \"大众请输入精确的email地址\"大众
},
password: {
required: \公众请输入密码\"大众,
minlength: jQuery.format(\"大众密码不能小于{0}个字符\"大众)
},
confirm_password: {
required: \"大众请输入确认密码\"大众,
minlength: \"大众确认密码不能小于5个字符\"大众,
equalTo: \"大众两次输入密码不一致不一致\"大众
}
}
});
});
【】常用验证规则的利用
1.required 必填
$( \公众#myform\"大众 ).validate({
rules: {
username: {
required: true
}
}
});
2. remote 远程验证
$( \"大众#myform\"大众 ).validate({
rules: {
email: {
required: true,
email: true,
remote: \"大众check-email.php\"大众
}
}
});
3.minlength
field: {
required: true,
minlength: 3
}
4.maxlength
field: {
required: true,
maxlength: 4
}
5.rangelength
field: {
required: true,
rangelength: [2, 6]
}
7.min,max, range
field: {
required: true,
min: 13,
max:20,
range:[10,20]
}
8.date 必须是date类型
field: {
required: true,
date: true
}
9.number 输入必须是数值
field: {
required: true,
number: true
}
10.equalTo 与另一个元素相等
rules: {
password: \"大众required\"大众,
password_again: {
equalTo: \"大众#password\"大众
}
}
在利用 equalTo 关键字时，后面的内容必须加上引号，代码如下所示：
equalTo:'#password'
11. accept 文件域文件吸收限定验证，Makes a file upload accept only specified mime-types.
指定MIME类型，如image/,
多个限定，利用逗号间隔。
$( \公众#myform\"大众 ).validate({
rules: {
field: {
required: true,
accept: \"大众audio/,image/jpeg\公众
}
}
});
【】通过AJAX调用远程URL进行验证
$( \公众#myform\"大众 ).validate({
rules: {
email: {
required: true,
email: true,
remote: \公众check-email.php\"大众
}
}
});
通过remote:\"大众url\公众, //调用url指定的做事器端要求地址进行验证
remote：URL
利用ajax办法进行验证，默认会提交当前验证的值到远程地址，如果须要提交其他的值，可以利用data选项
remote: \"大众check-email.php\"大众
remote: {
url: \公众check-email.php\公众, //后台处理程序
type: \"大众post\"大众, //数据发送办法
dataType: \"大众json\公众, //接管数据格式
data: { //要通报的数据
username: function() {
return $(\公众#username\"大众).val();
}
}
}
远程地址只能输出 \"大众true\"大众 或 \公众false\"大众，不能有其它输出
【】jQuery validation自定义验证规则
addMethod：name, method, message
自定义验证方法
// 中笔墨两个字节
jQuery.validator.addMethod(\公众byteRangeLength\"大众, function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, $.validator.format(\"大众请确保输入的值在{0}-{1}个字节之间(一个中笔墨算2个字节)\公众));
// 邮政编码验证
jQuery.validator.addMethod(\"大众isZipCode\"大众, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, \公众请精确填写您的邮政编码\"大众);
//jQuery.validate的optional(element)，用于表单控件的值不为空时才触发验证
此时定义的byteRangeLength,isZipCode规则可以像内置规则一样利用。
postcode:{
isZipCode:true
},
//
jQuery.validator.addMethod(\"大众laxEmail\"大众, function(value, element) {
// allow any non-whitespace characters as the host part
return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value );
}, 'Please enter a valid email address.');
【】常用的自定义验证案例：
jQuery.validator.addMethod(\公众byteMaxLength\"大众, function(value,
element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length <= param);
}, $.validator.format(\"大众不能超过{0}个字节(一个中笔墨算2个字节)\"大众));
jQuery.validator.addMethod(\"大众numFormat\公众,function(value,element,param){
return this.optional(element) || /^\d$/.test(value);
}
//,$.validator.format(\"大众请输入数字{0}位以内\"大众)
);
//number(9,3)
jQuery.validator.addMethod(\"大众numFormat63\公众,function(value,element){
return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
},$.validator.format(\"大众请输入合法数字,精度格式123456.0\公众)
);
jQuery.validator.addMethod(\公众postcodeVal\"大众,function(value,element){
return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);
},$.validator.format(\"大众请输入合法的邮编\"大众)
);
jQuery.validator.addMethod(\"大众numberAndLettersVal\"大众,function(value,element){
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
},$.validator.format(\"大众请输入字母或数字\"大众)
);
jQuery.validator.addMethod(\"大众sfzhValidate\"大众,function(value,element){
return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
},$.validator.format(\"大众请输入合法身份证号\"大众)
);
jQuery.validator.addMethod(\"大众valiEnglish\"大众,function(value,element){
return this.optional(element) || /^[a-zA-Z ]$/.test(value);
},$.validator.format(\"大众请输入字母或者空格\"大众)
);
【】验证的提示:
默认提示
messages: {
required: \"大众This field is required.\公众,
remote: \"大众Please fix this field.\"大众,
email: \公众Please enter a valid email address.\"大众,
url: \"大众Please enter a valid URL.\"大众,
date: \"大众Please enter a valid date.\公众,
dateISO: \公众Please enter a valid date (ISO).\"大众,
dateDE: \"大众Bitte geben Sie ein gültiges Datum ein.\公众,
number: \"大众Please enter a valid number.\"大众,
numberDE: \"大众Bitte geben Sie eine Nummer ein.\"大众,
digits: \"大众Please enter only digits\"大众,
creditcard: \"大众Please enter a valid credit card number.\公众,
equalTo: \"大众Please enter the same value again.\"大众,
accept: \"大众Please enter a value with a valid extension.\"大众,
maxlength: $.validator.format(\"大众Please enter no more than {0} characters.\"大众),
minlength: $.validator.format(\公众Please enter at least {0} characters.\"大众),
rangelength: $.validator.format(\公众Please enter a value between {0} and {1} characters long.\公众),
range: $.validator.format(\公众Please enter a value between {0} and {1}.\公众),
max: $.validator.format(\公众Please enter a value less than or equal to {0}.\"大众),
min: $.validator.format(\"大众Please enter a value greater than or equal to {0}.\公众)
},
如果要修正默认的验证，利用如下方法：
jQuery.extend(jQuery.validator.messages, {
required: \公众必选字段\"大众,
remote: \"大众请改动该字段\"大众,
email: \"大众请输入精确格式的电子邮件\"大众,
url: \公众请输入合法的网址\"大众,
date: \公众请输入合法的日期\公众,
dateISO: \"大众请输入合法的日期 (ISO).\"大众,
number: \"大众请输入合法的数字\"大众,
digits: \"大众只能输入整数\"大众,
creditcard: \"大众请输入合法的信用卡号\"大众,
equalTo: \"大众请再次输入相同的值\"大众,
accept: \"大众请输入拥有合法后缀名的字符串\"大众,
maxlength: jQuery.validator.format(\"大众请输入一个 长度最多是 {0} 的字符串\"大众),
minlength: jQuery.validator.format(\公众请输入一个 长度最少是 {0} 的字符串\公众),
rangelength: jQuery.validator.format(\公众请输入 一个长度介于 {0} 和 {1} 之间的字符串\"大众),
range: jQuery.validator.format(\公众请输入一个介于 {0} 和 {1} 之间的值\公众),
max: jQuery.validator.format(\"大众请输入一个最大为{0} 的值\公众),
min: jQuery.validator.format(\"大众请输入一个最小为{0} 的值\"大众)
});
【】验证规则中直接写验证文本
$().ready(function() {
$(\"大众#signupForm\公众).validate({
rules: {
firstname: \公众required\"大众,
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: \公众#password\"大众
}
},
messages: {
firstname: \公众请输入姓名\"大众,
email: {
required: \"大众请输入Email地址\"大众,
email: \公众请输入精确的email地址\"大众
},
password: {
required: \"大众请输入密码\"大众,
minlength: jQuery.format(\"大众密码不能小于{0}个字 符\公众)
},
confirm_password: {
required: \"大众请输入确认密码\公众,
minlength: \"大众确认密码不能小于5个字符\"大众,
equalTo: \公众两次输入密码不一致不一致\"大众
}
}
});
});
