jquery插件使用 jquery validate
jQuery验证客户端验证插件的辅助数据[] jQuery验证URLhttp://jqueryvalidation.org/【】jQuery验证介绍先介绍jquery，再介绍jQuery验证插件，以及支持I18N的插件文件。& ltscri
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)maxlength:5输入最大长度为5的字符串(汉字算作一个字符)。
(13)minlength:10输入最小长度为10的字符串(汉字算作一个字符)。
(14)rangelength:[5，10]输入一个长度必须在5到10之间的字符串"(汉字计为一个字符)
(15)范围:[5，10]输入值必须介于5和10之间。
(16)max:5输入值不能大于5。
(17)最小:10输入值不能小于10。
【】验证规则的使用
$().ready(function() {
$("#signupForm ")。验证({
规则:{
名字:“必填”，
电子邮件:{
必填:真，
电子邮件:真的
},
密码:{
必填:真，
最小长度:5
},
确认密码:{
必填:真，
minlength: 5，
等于:" #密码"
}
},
消息:{
第一:“请输入你的名字”，
电子邮件:{
必填:“请输入电子邮件地址”，
邮件:“请输入正确的电子邮件地址”
},
密码:{
必填:“请输入密码”，
Minlength: jQuery.format("密码不能少于{0}个字符")
},
确认密码:{
必填:“请输入确认密码”，
Minlength:“确认密码不能少于5个字符”，
EqualTo:"输入两次不一致的密码"
}
}
});
});
【常用验证规则的使用】
1.required是必需的。
$( "#myform ")。验证({
规则:{
用户名:{
必填:真
}
}
});
2.远程远程认证
$( "#myform ")。验证({
规则:{
电子邮件:{
必填:真，
邮件:没错，
远程:“check-email.php”
}
}
});
3 .最小长度
字段:{
必填:真，
最小长度:3
}
4 .最大长度
字段:{
必填:真，
最大长度:4
}
5 .范围长度
字段:{
必填:真，
范围长度:[2，6]
}
7 .最小、最大、范围
字段:{
必填:真，
分钟:13，
最大:20，
范围:[10，20]
}
8 .日期必须是日期类型
字段:{
必填:真，
日期:真
}
9 .数字输入必须是一个数值。
字段:{
必填:真，
数字:真
}
10.equalTo等于另一元素。
规则:{
密码:“必填”，
再次输入密码:{
等于:" #密码"
}
}
使用equalTo关键字时，必须引用以下内容，代码如下:
等于:' #密码'
11.接受文件域文件接收限制验证，使文件上载只接受指定的mime类型。
指定MIME类型，例如image/*，
多个限制，用逗号分隔。
$( "#myform ")。验证({
规则:{
字段:{
必填:真，
接受:“音频/*，图像/jpeg”
}
}
});
【】通过AJAX调用远程URL进行验证
$( "#myform ")。验证({
规则:{
电子邮件:{
必填:真，
邮件:没错，
远程:“check-email.php”
}
}
});
远程验证:“url”，//调用url指定的服务器端请求地址
远程:URL
当使用ajax进行验证时，默认情况下，当前验证的值将被提交到远程地址。如果需要提交其他值，可以使用data选项。
远程:“check-email.php”
远程:{
URL:“check-email . 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.format("请确保输入值在{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(" laxEmail "，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.format("不能超过{0}字节(一个汉字算2字节)")；
jquery . validator . add method(" num format "，function(value，element，param){
返回this.optional(element) || /^d*$/.测试(值)；
}
//，$.validator.format("请输入{0}位数以内的数字")
);
//number(9，3)
jquery . validator . add method(" num format 63 "，function(value，element){
返回this . optional(element)| | /^[0-9]{1,6}(.d{1，3})$/。测试(值)；
}，$.validator.format("请输入精度格式为123456.0的合法数字")
);
jquery . validator . add method(" post deval "，function(value，element){
返回this . optional(element)| | /^[0-9]d{5}(？！d)$/。测试(值)；
}，$.validator.format("请输入合法的邮政编码")
);
jquery . validator . add method(" numberAndLettersVal "，function(value，element){
返回this . optional(element)| | /^[a-za-z0-9]+$/.测试(值)；
}，$.validator.format("请输入字母或数字")
);
jquery . validator . add method(" sfzhValidate "，function(value，element){
返回this . optional(element)| | /^(d{14}|d{17})(d|[xx])$/.测试(值)；
}，$.validator.format("请输入您的合法身份证号码")
);
jquery . validator . add method(" vali English "，function(value，element){
return this . optional(element)| | /^[a-za-z]* $/。测试(值)；
}，$.validator.format("请输入字母或空单元格")
);
【】验证提示:
默认提示
消息:{
必填:“此字段是必填的。”,
远程:“请修复此字段。”,
电子邮件:“请输入有效的电子邮件地址。”,
url:“请输入有效的URL。”,
日期:“请输入有效日期。”,
日期ISO:“请输入有效的日期(ISO)。”,
日期:“请给我一个日期。”,
号码:“请输入有效号码。”,
"请给我一个数字。",
数字:“请仅输入数字”，
信用卡:“请输入有效的信用卡号码。”,
equalTo:“请再次输入相同的值。”,
接受:“请输入一个带有有效扩展名的值。”,
maxlength: $.validator.format("请输入不超过{0}个字符。"),
minlength: $.validator.format("请至少输入{0}个字符。"),
rangelength: $.validator.format("请输入一个长度介于{0}和{1}个字符之间的值。"),
范围:$.validator.format("请输入一个介于{0}和{1}之间的值，"),
max: $.validator.format("请输入一个小于或等于{0}的值。"),
min: $.validator.format("请输入一个大于或等于{0}的值，")
},
如果要修改默认验证消息，请使用以下方法:
jquery . extend(jquery . validator . messages，{
必填:“必填字段”，
远程:“请修复此字段”，
电子邮件:“请以正确的格式输入电子邮件”，
网址:“请输入合法网址”，
日期:“请输入一个合法日期”，
DateISO:“请输入一个合法的日期(ISO)。”,
号码:“请输入一个合法号码”，
数字:“只能输入整数”，
信用卡:“请输入合法的信用卡号码”，
EqualTo:“请再次输入相同的值”，
接受:“请输入带有合法后缀的字符串”，
maxlength:jquery . validator . format("请输入最大长度为{0} ")的字符串，
Length: jquery.validator.format("请输入长度至少为{0} ")的字符串，
Range: jquery.validator.format("请输入长度在{0}和{1}之间的字符串"，
Range: jQuery.validator.format("请输入一个介于{0}和{1}之间的值"，
Max: jQuery.validator.format("请输入最大值{0} ")，
Min: jQuery.validator.format("请输入最小值{0} ")
});
【】直接在验证规则中写验证消息文本。
$().ready(function() {
$("#signupForm ")。验证({
规则:{
名字:“必填”，
电子邮件:{
必填:真，
电子邮件:真的
},
密码:{
必填:真，
最小长度:5
},
确认密码:{
必填:真，
minlength: 5，
等于:" #密码"
}
},
消息:{
第一:“请输入你的名字”，
电子邮件:{
必填:“请输入电子邮件地址”，
邮件:“请输入正确的电子邮件地址”
},
密码:{
必填:“请输入密码”，
Minlength: jQuery.format("密码不能少于{0}个字符")
},
确认密码:{
必填:“请输入确认密码”，
Minlength:“确认密码不能少于5个字符”，
EqualTo:"输入两次不一致的密码"
}
}
});
});
