jquery插件使用（jquery validate）

jQuery Validate 客户端验证插件辅助资料

【】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 action="../department/add.action" method="post">

<s:textfield name="dv.code" label="部门编码"></s:textfield>

<s:textfield 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: "两次输入密码不一致不一致"

}

}

});

});