jquery表单验证.docx
- 文档编号:2242026
- 上传时间:2022-10-28
- 格式:DOCX
- 页数:43
- 大小:27.14KB
jquery表单验证.docx
《jquery表单验证.docx》由会员分享,可在线阅读,更多相关《jquery表单验证.docx(43页珍藏版)》请在冰豆网上搜索。
jquery表单验证
JQuery笔记(表单验证大全)
jquery.validate.js是jquery旗下的一个验证插件,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法。
举个例子,有这么一个表单:
viewplaincopytoclipboardprint?
在这个表单中,有名、姓、用户名、密码、确认密码和email。
他们都为非空,并且电子邮件需要是格式正确的地址、确认密码和密码一致。
使用jQuery验证最简单的方式是引入jquery.js和jqueryvalidation.js两个js文件。
然后分别在input中加入class即:
viewplaincopytoclipboardprint?
以下列出validate自带的默认验证
required:
"必选字段",
remote:
"请修正该字段",
email:
"请输入正确格式的电子邮件",
url:
"请输入合法的网址",
date:
"请输入合法的日期",
dateISO:
"请输入合法的日期(ISO).",
number:
"请输入合法的数字",
digits:
"只能输入整数",
creditcard:
"请输入合法的信用卡号",
equalTo:
"请再次输入相同的值",
accept:
"请输入拥有合法后缀名的字符串",
maxlength:
jQuery.format("请输入一个长度最多是{0}的字符串"),
minlength:
jQuery.format("请输入一个长度最少是{0}的字符串"),
rangelength:
jQuery.format("请输入一个长度介于{0}和{1}之间的字符串"),
range:
jQuery.format("请输入一个介于{0}和{1}之间的值"),
max:
jQuery.format("请输入一个最大为{0}的值"),
min:
jQuery.format("请输入一个最小为{0}的值")
然后,在document的read事件中,加入如下方法:
$(document).ready(function(){
$("#signupForm").validate();
}
这样,当form被提交的时候,就会根据input指定的class来进行验证了。
如果失败,form的提交就会被阻止。
并且,将提示信息显示在input的后面。
不过,这样感觉不好,因为验证规则侵入了我们的html代码。
还有一个方式,便是使用“rules”。
我们将input的那些验证用class删除掉。
然后修改document的ready事件响应代码:
$(document).ready(function(){
$("#signupForm").validate({
rules:
{
firstname:
"required",
lastname:
"required",
username:
"required",
password:
"required",
confirm_password:
{
required:
true,
equalTo:
"#password"
},
email:
{
required:
true,
email:
true
}
}
});
})
这样以来,也能达到相同的效果。
那么,接下的问题,就是显示的错误提示是默认的。
我们需要使用自定义的提示:
$(document).ready(function(){
$("#signupForm").validate({
rules:
{
firstname:
"required",
lastname:
"required",
username:
"required",
password:
"required",
confirm_password:
{
required:
true,
equalTo:
"#password"
},
email:
{
required:
true,
email:
true
}
},
messages:
{
firstname:
"必填项",
lastname:
"必填项",
username:
"必填项",
password:
"必填项",
confirm_password:
{
required:
"必填项",
equalTo:
"密码不一致"
},
email:
{
required:
"必填项",
email:
"格式有误"
}
}
});
})
如果你还想在错误信息上显示特别的样式(比如字体为红色)即可通过添加:
#signupFormlabel.error{
padding-left:
16px;
margin-left:
2px;
color:
red;
background:
url(img/unchecked.gif)no-repeat0px0px;
}
继续添加对输入密码长度的验证规则:
$(document).ready(function(){
$("#signupForm").validate({
rules:
{
firstname:
"required",
lastname:
"required",
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 表单 验证