jQuery验证客户端验证插件的辅助数据

[] jQuery验证URL

http://jqueryvalidation.org/

【】jQuery验证介绍

先介绍jquery，再介绍jQuery验证插件，以及支持I18N的插件文件。

& ltscript type = " text/JavaScript " src = "../jquery validate/jquery . validate . min . js " >& lt/script >

& ltscript type = " text/JavaScript " src = "../jquery validate/localization/messages _ zh . min . js " >& lt/script >

jQuery验证插件的使用]

1.定义表单

您可以使用HTML表单表单元素或Struts2表单元素。

& lt% @ page language = " Java " content type = " text/html；字符集=UTF-8 "

page encoding = " UTF-8 " % >

& lt% @ taglib uri = "/struts-tags " prefix = " s " % >

& lts:表单动作= "../department/add . action " method = " post " >

& lts:textfield name = " dv . code " label = " department code " >:</s:textfield >

& lts:textfield name = " dv . name " label = " department name " >:</s:textfield >

& lts:submit value = " submit " >:</s:submit >

& lt/s:form >

2.将jQuery验证引入2。Java Script语言

//部门表单验证

$("form#departmentaddform ")。验证({

规则:{

" dv.code": {

必填:真，

范围长度:[5，10]

},

" dv.name":{

必填:真

}

}

});

jQuery验证的通用验证规则

默认验证规则

(1)必填:true必填字段

(2)远程:“check.php”使用ajax方法调用check.php来验证输入值。

(3)电子邮件:true您必须以正确的格式输入电子邮件。

(4)url:true您必须输入正确格式的url。

(5)日期:真实。您必须以正确的格式输入日期。

(6)dateISO:true您必须以正确的格式输入日期(ISO)，例如:2009年6月23日，1998年1月22日。只验证格式，不验证有效性。

(7)number:true您必须输入一个合法的数字(负数、小数)

(8)位数:真。您必须输入一个整数。

(9)信用卡:您必须输入合法的信用***码。

(10)等于:“#field”输入值必须与#field相同。

(11)接受:输入带有合法后缀(上传文件的后缀)的字符串

(12)***xlength:5输入最大长度为5的字符串(汉字算作一个字符)。

(13)minlength:10输入最小长度为10的字符串(汉字算作一个字符)。

(14)rangelength:[5，10]输入一个长度必须在5到10之间的字符串"(汉字计为一个字符)

(15)范围:[5，10]输入值必须介于5和10之间。

(16)***x:5输入值不能大于5。

(17)最小:10输入值不能小于10。

【】验证规则的使用

$().ready(function() {

$("#signupForm ")。验证({

规则:{

名字:“必填”，

电子邮件:{

必填:真，

电子邮件:真的

},

密码:{

必填:真，

最小长度:5

},

确认密码:{

必填:真，

minlength: 5，

等于:" #密码"

}

},

消息:{

第一:“请输入你的名字”，

电子邮件:{

必填:“请输入电子邮件地址”，

邮件:“请输入正确的电子邮件地址”

},

密码:{

必填:“请输入密码”，

Minlength: jQuery.for***t("密码不能少于{0}个字符")

},

确认密码:{

必填:“请输入确认密码”，

Minlength:“确认密码不能少于5个字符”，

EqualTo:"输入两次不一致的密码"

}

}

});

});

【常用验证规则的使用】

1.required是必需的。

$( "#myform ")。验证({

规则:{

用户名:{

必填:真

}

}

});

2.远程远程认证

$( "#myform ")。验证({

规则:{

电子邮件:{

必填:真，

邮件:没错，

远程:“check-e***il.php”

}

}

});

3 .最小长度

字段:{

必填:真，

最小长度:3

}

4 .最大长度

字段:{

必填:真，

最大长度:4

}

5 .范围长度

字段:{

必填:真，

范围长度:[2，6]

}

7 .最小、最大、范围

字段:{

必填:真，

分钟:13，

最大:20，

范围:[10，20]

}

8 .日期必须是日期类型

字段:{

必填:真，

日期:真

}

9 .数字输入必须是一个数值。

字段:{

必填:真，

数字:真

}

10.equalTo等于另一元素。

规则:{

密码:“必填”，

再次输入密码:{

等于:" #密码"

}

}

使用equalTo关键字时，必须引用以下内容，代码如下:

等于:' #密码'

11.接受文件域文件接收限制验证，使文件上载只接受指定的mime类型。

指定MIME类型，例如i***ge/*，

多个限制，用逗号分隔。

$( "#myform ")。验证({

规则:{

字段:{

必填:真，

接受:“音频/*，图像/jpeg”

}

}

});

【】通过AJAX调用远程URL进行验证

$( "#myform ")。验证({

规则:{

电子邮件:{

必填:真，

邮件:没错，

远程:“check-e***il.php”

}

}

});

远程验证:“url”，//调用url指定的服务器端请求地址

远程:URL

当使用ajax进行验证时，默认情况下，当前验证的值将被提交到远程地址。如果需要提交其他值，可以使用data选项。

远程:“check-e***il.php”

远程:{

URL:“check-e***il . PHP”，//后台处理程序

类型:“post”，//数据发送方式

数据类型:“json”，//接受数据格式

Data: {//要传递的数据

用户名:function() {

返回$(" #用户名")。val()；

}

}

}

远程地址只能输出“真”或“假”，不能有其他输出。

【】jQuery验证用户定义的验证规则

addMethod:名称，方法，消息

用户定义的验证方法

//两个字节的汉字

jquery . validator . add method(" byteRangeLength "，function(value，element，param) {

var长度= value.length

for(var I = 0；我& lt值.长度；i++){

if(value.charCodeAt(i)>127){

长度++；

}

}

返回this . optional(element)| |(length >= param[0]&& amp长度& lt= param[1])；

}，$.validator.for***t("请确保输入值在{0}-{1}字节之间(一个汉字算2个字节)"))；

//邮政编码验证

jquery . validator . add method(" iszip code "，function(value，element) {

var tel = /^[0-9]{6}$/；

return this . optional(element)| |(tel . test(value))；

}，“请正确填写您的邮政编码”)；

//jQuery.validate的可选(element)，用于在表单控件的值不是空时触发验证

byterangeengagement是此时定义的邮政编码规则，可以像内置规则一样使用。

邮政编码:{

isZipCode:true

},

jquery . validator . add method(" laxE***il "，function(value，element) {

//允许任何非空白字符作为主机部分

返回this . optional(element)| | /^[a-za-z0-9.！# $ % & amp'*+/=?^_`{|}~-]+@(?:S{1，63})$/。测试(值)；

}，'请输入有效的电子邮件地址。');

[]常见的自定义验证案例:

jquery . validator . add method(" byteMaxLength "，函数(值，

元素，参数){

var长度= value.length

for(var I = 0；我& lt值.长度；i++) {

if (value.charCodeAt(i)>127) {

长度++；

}

}

返回this . optional(element)| |(length <= param)；

}，$.validator.for***t("不能超过{0}字节(一个汉字算2字节)")；

jquery . validator . add method(" num for***t "，function(value，element，param){

返回this.optional(element) || /^d*$/.测试(值)；

}

//，$.validator.for***t("请输入{0}位数以内的数字")

);

//number(9，3)

jquery . validator . add method(" num for***t 63 "，function(value，element){

返回this . optional(element)| | /^[0-9]{1,6}(.d{1，3})$/。测试(值)；

}，$.validator.for***t("请输入精度格式为123456.0的合法数字")

);

jquery . validator . add method(" post deval "，function(value，element){

返回this . optional(element)| | /^[0-9]d{5}(？！d)$/。测试(值)；

}，$.validator.for***t("请输入合法的邮政编码")

);

jquery . validator . add method(" numberAndLettersVal "，function(value，element){

返回this . optional(element)| | /^[a-za-z0-9]+$/.测试(值)；

}，$.validator.for***t("请输入字母或数字")

);

jquery . validator . add method(" sfzhValidate "，function(value，element){

返回this . optional(element)| | /^(d{14}|d{17})(d|[xx])$/.测试(值)；

}，$.validator.for***t("请输入您的合法身份证号码")

);

jquery . validator . add method(" vali English "，function(value，element){

return this . optional(element)| | /^[a-za-z]* $/。测试(值)；

}，$.validator.for***t("请输入字母或空单元格")

);

【】验证提示:

默认提示

消息:{

必填:“此字段是必填的。”,

远程:“请修复此字段。”,

电子邮件:“请输入有效的电子邮件地址。”,

url:“请输入有效的URL。”,

日期:“请输入有效日期。”,

日期ISO:“请输入有效的日期(ISO)。”,

日期:“请给我一个日期。”,

号码:“请输入有效号码。”,

"请给我一个数字。",

数字:“请仅输入数字”，

信用卡:“请输入有效的信用***码。”,

equalTo:“请再次输入相同的值。”,

接受:“请输入一个带有有效扩展名的值。”,

***xlength: $.validator.for***t("请输入不超过{0}个字符。"),

minlength: $.validator.for***t("请至少输入{0}个字符。"),

rangelength: $.validator.for***t("请输入一个长度介于{0}和{1}个字符之间的值。"),

范围:$.validator.for***t("请输入一个介于{0}和{1}之间的值，"),

***x: $.validator.for***t("请输入一个小于或等于{0}的值。"),

min: $.validator.for***t("请输入一个大于或等于{0}的值，")

},

如果要修改默认验证消息，请使用以下方法:

jquery . extend(jquery . validator . messages，{

必填:“必填字段”，

远程:“请修复此字段”，

电子邮件:“请以正确的格式输入电子邮件”，

网址:“请输入合法网址”，

日期:“请输入一个合法日期”，

DateISO:“请输入一个合法的日期(ISO)。”,

号码:“请输入一个合法号码”，

数字:“只能输入整数”，

信用卡:“请输入合法的信用***码”，

EqualTo:“请再次输入相同的值”，

接受:“请输入带有合法后缀的字符串”，

***xlength:jquery . validator . for***t("请输入最大长度为{0} ")的字符串，

Length: jquery.validator.for***t("请输入长度至少为{0} ")的字符串，

Range: jquery.validator.for***t("请输入长度在{0}和{1}之间的字符串"，

Range: jQuery.validator.for***t("请输入一个介于{0}和{1}之间的值"，

Max: jQuery.validator.for***t("请输入最大值{0} ")，

Min: jQuery.validator.for***t("请输入最小值{0} ")

});

【】直接在验证规则中写验证消息文本。

$().ready(function() {

$("#signupForm ")。验证({

规则:{

名字:“必填”，

电子邮件:{

必填:真，

电子邮件:真的

},

密码:{

必填:真，

最小长度:5

},

确认密码:{

必填:真，

minlength: 5，

等于:" #密码"

}

},

消息:{

第一:“请输入你的名字”，

电子邮件:{

必填:“请输入电子邮件地址”，

邮件:“请输入正确的电子邮件地址”

},

密码:{

必填:“请输入密码”，

Minlength: jQuery.for***t("密码不能少于{0}个字符")

},

确认密码:{

必填:“请输入确认密码”，

Minlength:“确认密码不能少于5个字符”，

EqualTo:"输入两次不一致的密码"

}

}

});

});