jquery表单验证jqueryvalidate全攻略文档格式.docx
《jquery表单验证jqueryvalidate全攻略文档格式.docx》由会员分享,可在线阅读,更多相关《jquery表单验证jqueryvalidate全攻略文档格式.docx(16页珍藏版)》请在冰豆网上搜索。
(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
true必输字段
使用ajax方法调用check.php验证输入值
true必须输入正确格式的电子邮件
true必须输入正确格式的网址
true必须输入正确格式的日期
2009-06-23,1998/01/22只验证格式,不验证有效性
true必须输入合法的数字(负数,小数)
true必须输入整数
必须输入合法的信用卡号
输入值必须和#field相同
输入拥有合法后缀名的字符串(上传文件的后缀)
5输入长度最多是5的字符串(汉字算一个字符)
10输入长度最小是10的字符串(汉字算一个字符)
)(汉字算一个字符)
[5,10]输入值必须介于5和10之间
5输入值不能大于5
10输入值不能小于10
三、默认的提示
Js代码
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}."
)
},
{
required:
remote:
email:
url:
date:
dateISO:
dateDE:
number:
numberDE:
digits:
creditcard:
equalTo:
accept:
maxlength:
$.validator
.format("
),
minlength:
rangelength:
range:
max:
min:
)
},
如需要修改,可在js代码中加入:
jQuery.extend(jQuery.validator.messages,{
required:
必选字段"
remote:
请修正该字段"
email:
请输入正确格式的电子邮件"
url:
请输入合法的网址"
date:
请输入合法的日期"
dateISO:
请输入合法的日期(ISO)."
number:
请输入合法的数字"
digits:
只能输入整数"
creditcard:
请输入合法的信用卡号"
equalTo:
请再次输入相同的值"
accept:
请输入拥有合法后缀名的字符串"
maxlength:
jQuery.validator.format("
请输入一个长度最多是{0}的字符串"
minlength:
请输入一个长度最少是{0}的字符串"
rangelength:
请输入一个长度介于{0}和{1}之间的字符串"
range:
请输入一个介于{0}和{1}之间的值"
max:
请输入一个最大为{0}的值"
min:
请输入一个最小为{0}的值"
});
jQuery.extend(jQuery.validator.messages,{
required:
remote:
email:
url:
date:
dateISO:
number:
digits:
creditcard:
equalTo:
accept:
maxlength:
minlength:
rangelength:
range:
max:
min:
推荐做法,将此文件放入messages_cn.js中,在页面中引入
四、使用方式
1.将校验规则写到控件中
Html代码
&
lt;
scriptsrc="
../js/jquery.js"
type="
text/javascript"
gt;
/script&
../js/jquery.validate.js"
./js/jquery.metadata.js"
$().ready(function(){
$("
#signupForm"
).validate();
formid="
signupForm"
method="
get"
action="
p&
labelfor="
firstname"
Firstname&
/label&
inputid="
name="
class="
required"
/&
/p&
email"
E-Mail&
requiredemail"
password"
Password&
{required:
true,minlength:
5}"
confirm_password"
确认密码&
5,equalTo:
'
#password'
}"
inputclass="
submit"
value="
Submit"
/&
/form&
$().ready(function(){
使用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,将调用默认的信息
true必须有值
#aa:
checked"
表达式的值为真,则需要验证
function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素
五、常用方法及注意问题
1.用其他方式替代默认的SUBMIT$().ready(function(){
submitHandler:
function(form){
alert("
submitted"
form.submit();
}
可以设置validate的默认值,写法如下:
$.validator.setDefaults({
function(form){alert("
submitted!
}
如果想提交表单,需要使用form.submit()而不要使用$(form).submit()
2.deb