jqueryvalidate全攻略教程方法Word下载.docx
《jqueryvalidate全攻略教程方法Word下载.docx》由会员分享，可在线阅读，更多相关《jqueryvalidate全攻略教程方法Word下载.docx（9页珍藏版）》请在冰豆网上搜索。
）（汉字算一个字符）
（15）range:
输入值必须介于5和10之间
（16）max:
输入值不能大于5
（17）min:
输入值不能小于10
默认的提示
messages:
{
required:
"
Thisfieldisrequired."
remote:
Pleasefixthisfield."
email:
Pleaseenteravalidemailaddress."
url:
PleaseenteravalidURL."
date:
Pleaseenteravaliddate."
dateISO:
Pleaseenteravaliddate（ISO）."
dateDE:
BittegebenSieeing眉ltigesDatumein."
number:
Pleaseenteravalidnumber."
numberDE:
BittegebenSieeineNummerein."
digits:
Pleaseenteronlydigits"
creditcard:
Pleaseenteravalidcreditcardnumber."
equalTo:
Pleaseenterthesamevalueagain."
accept:
Pleaseenteravaluewithavalidextension."
maxlength:
$.validator.format（"
Pleaseenternomorethan{0}characters."
）,
minlength:
Pleaseenteratleast{0}characters."
rangelength:
Pleaseenteravaluebetween{0}and{1}characterslong."
range:
Pleaseenteravaluebetween{0}and{1}."
max:
Pleaseenteravaluelessthanorequalto{0}."
min:
Pleaseenteravaluegreaterthanorequalto{0}."
）
},
如需要修改，可在js代码中加入：
jQuery.extend（jQuery.validator.messages,{
必选字段"
请修正该字段"
请输入正确格式的电子邮件"
请输入合法的网址"
请输入合法的日期"
请输入合法的日期（ISO）."
请输入合法的数字"
只能输入整数"
请输入合法的信用卡号"
请再次输入相同的值"
请输入拥有合法后缀名的字符串"
jQuery.validator.format（"
请输入一个长度最多是{0}的字符串"
请输入一个长度最少是{0}的字符串"
请输入一个长度介于{0}和{1}之间的字符串"
请输入一个介于{0}和{1}之间的值"
请输入一个最大为{0}的值"
请输入一个最小为{0}的值"
}）;
推荐做法，将此文件放入messages_cn.js中，在页面中引入
<
scriptsrc="
../js/messages_cn.js"
type="
text/javascript"
>
/script>
使用方式
1.将校验规则写到控件中
../js/jquery.js"
../js/jquery.validate.js"
./js/jquery.metadata.js"
$（）.ready（function（）{
$（"
#signupForm"
）.validate（）;
formid="
signupForm"
method="
get"
action="
<
labelfor="
firstname"
Firstname<
/label>
inputid="
name="
class="
required"
/>
email"
E-Mail<
requiredemail"
password"
Password<
{required:
true,minlength:
5}"
confirm_password"
确认密码<
5,equalTo:
'
#password'
}"
inputclass="
submit"
value="
Submit"
/>
/form>
使用class="
{}"
的方式，必须引入包：
jquery.metadata.js
可以使用如下的方法，修改提示内容：
class="
5,messages:
请输入内容'
}}"
在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
另外一个方式，使用关键字：
meta（为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项）
Tellthevalidationplugintolookinsideavalidate-propertyinmetadataforvalidationrules.
例如：
meta:
validate"
{validate:
5}}"
再有一种方式：
$.metadata.setType（"
attr"
"
）;
这样可以使用validate="
true}"
的方式，或者class="
，但class="
将不起作用
2.将校验规则写到代码中
）.validate（{
rules:
firstname:
true,
true
},
password:
5
confirm_password:
5,
#password"
}
messages:
请输入姓名"
请输入Email地址"
请输入正确的email地址"
请输入密码"
jQuery.format（"
密码不能小于{0}个字符"
请输入确认密码"
确认密码不能小于5个字符"
两次输入密码不一致不一致"
}）;
//messages处，如果某个控件没有message，将调用默认的信息
required:
true必须有值
#aa:
checked"
表达式的值为真，则需要验证
function（）{}返回为真，表时需要验证
后边两种常用于，表单中需要同时填或不填的元素
常用方法及注意问题
1.用其他方式替代默认的SUBMIT
submitHandler:
function（form）{
alert（"
submitted"
form.submit（）;
}
可以设置validate的默认值，写法如下：
$.validator.setDefaults（{
submitHandler:
function（form）{alert（"
submitted!
form.submit（）;
如果想提交表单,需要使用form.submit（）而不要使用$（form）.submit（）
2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
debug:
true
如果一个页面中有多个表单，用
}）
3.ignore：
忽略某些元素不验证
ignore:
.ignore"
4.errorPlacement：
CallbackDefault:
把错误信息放在验证的元素后面
指明错误放置的位置，默认情况是：
error.appendTo（element.parent（））;
即把错误信息放在验证的元素后面
errorPlacement:
function（error,element）{
error.appendTo（element.parent（））;
}
//示例：
tr>
tdclass="
label"
labelid="
lfirstname"
for="
FirstName<
/td>
field"
text"
maxlength="
100"
status"
/tr>
tdstyle="
padding-right:
5px;
dateformat_eu"
dateformat"
radio"
0"
ldateformat_eu"
14/02/07<
padding-left:
dateformat_am"
1"
ldateformat_am"
02/14/07<
td>
&
nbsp;
colspan="
2"
divid="
termswrap"
terms"
checkbox"
lterms"
IhavereadandaccepttheTermsofUse.<
function（error,element）{
if（element.is（"
:
））
error.appendTo（element.parent（）.next（）.next（））;
elseif（element.is（"
error.appendTo（element.next（））;
else
error.appendTo（element.parent（）.next（））;
代码的作用是：
一般情况下把错误信息显示在<
中，如果是radio显示在<
中，如果是checkbox显示在内容的后面
errorClass：
StringDefault:
error"
指定错误提示的css类名，可以自定义错误提示的样式
errorElement：
用什么标签标记错误，默认的是label你可以改成em
errorContainer：
Selector
显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大
errorContainer:
#messageBox1,#messageBox2"
errorLabelContainer：
把错误信息统一放在一个容器里面。
wrapper：
String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏
div.error"
errorLabelContainer:
$（"
#signupFormdiv.error"
wrapper:
li"
设置错误提示的样式，可以增加图标显示
input.error{border:
1pxsolidred;
label.error{
background:
url（"
./demo/images/unchecked.gif"
）no-repeat0px0px;
16px;
padding-bottom:
2px;
font-weight:
bold;
color:
#EA5200;
label.checked{
./demo/images/checked.gif"
success：
String,Callback
要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数
success:
function（label）{
//set&
astextforIE
label.html（"
）.addClass（"
//label.addClass（"
valid"
）.text（"
Ok!
添加"
到验证元素,在CSS中定义的样式<
style>
label.valid{}<
/style>
nsubmit：
BooleanDefault:
true
提交时验证.设置唯false就用其他方法去验证
onfocusout：
BooleanDefault:
失去焦点是验证（不包括checkboxes/radiobuttons）
onkeyup：
在keyup时验证.
onclick：
在checkboxes和radio点击时验证
focusInvalid：
提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点
focusCleanup：
false
如果是true那么当未通过验证的元素获得焦点时，移除错误提示。
避免和focusInvalid一起用
//重置表单
varvalidator=$（"
#reset"
）.click（function（）{
validator.resetForm（）;
remote：
URL
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote:
check-email.php"
check-email.p
升级会员 