jquery表单验证jqueryvalidate全攻略.docx
- 文档编号:7226246
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:16
- 大小:20.44KB
jquery表单验证jqueryvalidate全攻略.docx
《jquery表单验证jqueryvalidate全攻略.docx》由会员分享,可在线阅读,更多相关《jquery表单验证jqueryvalidate全攻略.docx(16页珍藏版)》请在冰豆网上搜索。
jquery表单验证jqueryvalidate全攻略
jquery表单验证,jquery.validate全攻略
jquery表单验证,jquery.validate全攻略
文章分类:
Web前端
一、准备工作
需要JQuery版本:
1.2.6+,兼容1.3.2
官网地址:
http:
//bassistance.de/jquery-plugins/jquery-plugin-validation/
最新版本:
1.5.5
本地下载:
jquery.validate.zip
二、默认校验规则
Java代码
(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
(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
三、默认的提示
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:
$.validator
.format("Pleaseenteratleast{0}characters."),
rangelength:
$.validator
.format("Pleaseenteravaluebetween{0}and{1}characterslong."),
range:
$.validator
.format("Pleaseenteravaluebetween{0}and{1}."),
max:
$.validator
.format("Pleaseenteravaluelessthanorequalto{0}."),
min:
$.validator
.format("Pleaseenteravaluegreaterthanorequalto{0}.")
},
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:
$.validator
.format("Pleaseenteratleast{0}characters."),
rangelength:
$.validator
.format("Pleaseenteravaluebetween{0}and{1}characterslong."),
range:
$.validator
.format("Pleaseenteravaluebetween{0}and{1}."),
max:
$.validator
.format("Pleaseenteravaluelessthanorequalto{0}."),
min:
$.validator
.format("Pleaseenteravaluegreaterthanorequalto{0}.")
},
如需要修改,可在js代码中加入:
Js代码
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}的值")
});
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}的值")
});
推荐做法,将此文件放入messages_cn.js中,在页面中引入
四、使用方式
1.将校验规则写到控件中
Html代码
<scriptsrc="../js/jquery.js"type="text/javascript"></script>
<scriptsrc="../js/jquery.validate.js"type="text/javascript"></script>
<scriptsrc="./js/jquery.metadata.js"type="text/javascript"></script>$().ready(function(){
$("#signupForm").validate();
});
<formid="signupForm"method="get"action="">
<p>
<labelfor="firstname">Firstname</label>
<inputid="firstname"name="firstname"class="required"/>
</p>
<p>
<labelfor="email">E-Mail</label>
<inputid="email"name="email"class="requiredemail"/>
</p>
<p>
<labelfor="password">Password</label>
<inputid="password"name="password"type="password"class="{required:
true,minlength:
5}"/>
</p>
<p>
<labelfor="confirm_password">确认密码</label>
<inputid="confirm_password"name="confirm_password"type="password"class="{required:
true,minlength:
5,equalTo:
'#password'}"/>
</p>
<p>
<inputclass="submit"type="submit"value="Submit"/>
</p>
</form>
<scriptsrc="../js/jquery.js"type="text/javascript"></script>
<scriptsrc="../js/jquery.validate.js"type="text/javascript"></script>
<scriptsrc="./js/jquery.metadata.js"type="text/javascript"></script>$().ready(function(){
$("#signupForm").validate();
});
<formid="signupForm"method="get"action="">
<p>
<labelfor="firstname">Firstname</label>
<inputid="firstname"name="firstname"class="required"/>
</p>
<p>
<labelfor="email">E-Mail</label>
<inputid="email"name="email"class="requiredemail"/>
</p>
<p>
<labelfor="password">Password</label>
<inputid="password"name="password"type="password"class="{required:
true,minlength:
5}"/>
</p>
<p>
<labelfor="confirm_password">确认密码</label>
<inputid="confirm_password"name="confirm_password"type="password"class="{required:
true,minlength:
5,equalTo:
'#password'}"/>
</p>
<p>
<inputclass="submit"type="submit"value="Submit"/>
</p>
</form>
使用class="{}"的方式,必须引入包:
jquery.metadata.js可以使用如下的方法,修改提示内容:
class="{required:
true,minlength:
5,messages:
{required:
'请输入内容'}}"在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:
true,minlength:
5,equalTo:
'#password'}"另外一个方式,使用关键字:
meta(为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项)
Tellthevalidationplugintolookinsideavalidate-propertyinmetadataforvalidationrules.
例如:
Html代码
meta:
"validate"
<inputid="password"name="password"type="password"class="{validate:
{required:
true,minlength:
5}}"/>
meta:
"validate"
<inputid="password"name="password"type="password"class="{validate:
{required:
true,minlength:
5}}"/>
再有一种方式:
$.metadata.setType("attr","validate");这样可以使用validate="{required:
true}"的方式,或者class="required",但class="{required:
true,minlength:
5}"将不起作用2.将校验规则写到代码中
$().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:
"两次输入密码不一致不一致"
}
}
});
});//messages处,如果某个控件没有message,将调用默认的信息
<formid="signupForm"method="get"action="">
<p>
<labelfor="firstname">Firstname</label>
<inputid="firstname"name="firstname"/>
</p>
<p>
<labelfor="email">E-Mail</label>
<inputid="email"name="email"/>
</p>
<p>
<labelfor="password">Password</label>
<inputid="password"name="password"type="password"/>
</p>
<p>
<labelfor="confirm_password">确认密码</label>
<inputid="confirm_password"name="confirm_password"type="password"/>
</p>
<p>
<inputclass="submit"type="submit"value="Submit"/>
</p>
</form>
required:
true必须有值
required:
"#aa:
checked"表达式的值为真,则需要验证
required:
function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素
五、常用方法及注意问题
1.用其他方式替代默认的SUBMIT$().ready(function(){
$("#signupForm").validate({
submitHandler:
function(form){
alert("submitted");
form.submit();
}
});
});
可以设置validate的默认值,写法如下:
$.validator.setDefaults({
submitHandler:
function(form){alert("submitted!
");form.submit();}
});
如果想提交表单,需要使用form.submit()而不要使用$(form).submit()
2.deb
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 表单 验证 jqueryvalidate 攻略