JQuery笔记（表单验证）
jquery.validate.js 是 jquery 旗下的一个验证插件，借助 jquery 的优势，我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。
举个例子，有这么一个表单：
view plaincopy to clipboardprint?
在这个表单中，有名、姓、用户名、密码、确认密码和 email 。他们都为非空，并且电子邮件需要是格式正确的地址、确认密码和密码一致。使用 jQuery 验证最简单的方式是引入 jquery.js 和 jquery validation.js 两个 js 文件。然后分别在 input 中加入 class 即：
view plaincopy to clipboardprint?
class=\"required\" equalTo=\"#password\"/>
以下列出 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 事件中，加入如下方法：
这样，当 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:\" 格式有误\" } }
}); })
如果你还想在错误信息上显示特别的样式 ( 比如字体为红色 ) 即可通过添加：
继续添加对输入密码长度的验证规则：
$(document).ready(function(){
$(\"#signupForm\").validate({
rules:{
firstname:\"required\
lastname:\"required\
username:\"required\
password:{
required:true,
minlength:4,
maxlength:15 },
confirm_password:{
required:true,
equalTo:\"#password\" },
email:{
required:true,
email:true }
},
messages:{
firstname:\" 必填项\
lastname:\" 必填项\
username:\" 必填项\
password:{
required:\" 必填项\
minlength:jQuery.format(\" 密码长度不少于 {0} 位 \"),
maxlength:jQuery.format(\" 密码长度不超过 {0} 位 \") },
confirm_password:{
required:\" 必填项\
equalTo:\" 密码不一致\" },
email:{
required:\" 必填项\
email:\" 格式有误\" } }
}); })
使用remote
可以通过 event 指定触发效验方式（ 可选值有 keyup( 每次按键时 ) ， blur( 当控件失去焦点时 ) ，不指定时就只在按提交按钮时触发 ）
$(document).ready(function(){
$(\"#signupForm\").validate({
event:\"keyup\" || \"blur\" }) })
如果通过指定 debug 为 true 则表单不会提交只能用来验证 ( 默认为提交 ) ，可用来调试
$(document).ready(function(){
$(\"#signupForm\").validate({
debug:true })
})
如果在提交前还需要进行一些自定义处理使用 submitHandler 参数
$(document).ready(function(){
$(\"#signupForm\").validate({
SubmitHandler:function(){
alert( \"success\"); } }) })
JQuery笔记（表单验证） 二 收藏
验证:
\"http://www.w3.org/TR/html4/loose.dtd\" >
参考：http://docs.jquery.com/Plugins/Validation
rules( ) Returns: Options
Return the validations rules for the first selected element. rules( \"add\
JQuery笔记（表单验证） 三 收藏 Test for jQuery validate() plugin
< type=\"text/javascript\">
jQuery Validation Plugin Demo Login Form Username
Password
回到主页query-plugin-validation： |下载 |Changelog |Demos |Documentation
点击[Login]后 如下图：
代码 errorcontainer-demo_1.html
view plaincopy to clipboardprint?
mce_src=\"http://code.jquery.com/jquery-latest.js\"> mce_src=\"http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js\"> mce_href=\"http://bassistance.de/jquery-plugins/jquery-plugin-validation/\">jQuery Validation Plugin Demo |title=\"zip-Archive with source code, minified and packed version, demos and examples\">下载 |mce_href=\"http://jquery.bassistance.de/validate/changelog.txt\">Changelog | mce_href=\"http://jquery.bassistance.de/validate/demo/\">Demos |Documentation JQuery笔记（表单验证）四 errorcontainer-demo_2.html 收藏 Test for jQuery validate() plugin < type=\"text/javascript\"> jQuery Validation Plugin Demo There are serious errors in your form submission, please see below for details. Please enter your email address Please enter your phone number (between 2 and 8 characters) Please enter your address (at least 3 characters) Please select an image (png, jpg, jpeg, gif) Please select a document (doc, docx, txt, pdf) Validating a complete form Email Favorite Color Red Blue Yellow Phone Address Avatar Please agree to our policy CV There are serious errors in your form submission, please see details above the form! 回到主页query-plugin-validation： |下载 |Changelog |Demos |Documentation 代码 errorcontainer-demo_2.html view plaincopy to clipboardprint? 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> mce_src=\"jquery.validate.js\" type=\"text/javascript\"> class=\"error\">Please enter your email address mce_href=\"http://bassistance.de/jquery-plugins/jquery-plugin-validation/\">回到主页query-plugin-validation： |title=\"zip-Archive with source code, minified and packed version, demos and examples\">下载 |Changelog |Demos \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> address mce_href=\"http://bassistance.de/jquery-plugins/jquery-plugin-validation/\">回到主页query-plugin-validation： |title=\"zip-Archive with source code, minified and packed version, demos and examples\">下载 < type=\"text/javascript\"> JQuery笔记（表单验证）五 errorcontainer-demo_3.html meta:string 收藏 < type=\"text/javascript\"> jquery.validate.js简介（续1）{meta:string} Demo 代码 errorcontainer-demo_3.html view plaincopy to clipboardprint? mce_src=\"http://code.jquery.com/jquery-latest.js\"> JQuery笔记（表单验证）六 errorcontainer-demo_4.html errorClass 收藏 < type=\"text/javascript\"> jquery.validate.js简介（续1）{errorClass:string} Demo 代码 errorcontainer-demo_4.html view plaincopy to clipboardprint? JQuery笔记（表单验证）七 errorcontainer-demo_5.html errorElement 收藏 < type=\"text/javascript\"> jquery.validate.js简介（续1）{errorElement:String } Demo 代码 errorcontainer-demo_5.html view plaincopy to clipboardprint? mce_src=\"http://code.jquery.com/jquery-latest.js\"> JQuery笔记（表单验证）八 metadata-demo.html jquery.metadata.js 收藏 < type=\"text/javascript\"> ... Item 1 Item 2 {item_id: 1, item_label: 'Label'} Item 3 < type=\"metadata\"> Item 4 代码 metadata-demo.html view plaincopy to clipboardprint? XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> mce_src=\"http://code.jquery.com/jquery-latest.js\"> 因篇幅问题不能全部显示，请点此查看更多更全内容mce_href=\"http://bassistance.de/jquery-plugins/jquery-plugin-validation/\">jQuery Validation Plugin Demo
There are serious errors in your form submission, please see below for details.
There are serious errors in your form submission, please see details above the form!
mce_href=\"http://bassistance.de/jquery-plugins/jquery-plugin-validation/\">jQuery Validation Plugin Demo
There are serious errors in your form submission, please see below for details.
There are serious errors in your form submission, please see details above the form!
jquery.validate.js简介（续1）{meta:string} Demo
jquery.validate.js简介（续1）{meta:string} Demo
jquery.validate.js简介（续1）{errorClass:string} Demo
jquery.validate.js简介（续1）{errorElement:String } Demo