JQuery笔记(表单验证)

JQuery笔记（表单验证）
jquery.validate.js 是 jquery 旗下的一个验证插件，借助 jquery 的优势，我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。

举个例子，有这么一个表单：
view plaincopy to clipboardprint?
<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
在这个表单中，有名、姓、用户名、密码、确认密码和 email 。

他们都为非空，并且电子邮件需要是格式正确的地址、确认密码和密码一致。

使用 jQuery 验证最简单的方式是引入jquery.js 和 jquery validation.js 两个 js 文件。

然后分别在 input 中加入 class 即：
view plaincopy to clipboardprint?
<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>
<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>
以下列出 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 事件中，加入如下方法：
<script>
$(document).ready(function(){
$("#signupForm").validate();
}
</script>
这样，当 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:" 格式有误"
}
}
});
})
如果你还想在错误信息上显示特别的样式 ( 比如字体为红色 ) 即可通过添加：<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>
继续添加对输入密码长度的验证规则：$(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笔记（表单验证）二收藏
验证:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"/TR/html4/loose.dtd" >
<html>
<head>
<!--<style>label.valid {
background:
url('/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
height:16px;
width:16px;
display: block;
position: absolute;
top: 4px;
left: 152px;
}</style>-->
<script src="/jquery-latest.js"></script>
<script type="text/javascript"
src="/view/trunk/plugins/validate/lib/jquery.delegate.js"> </script>
<script type="text/javascript"
src="/view/trunk/plugins/validate/jquery.validate.js"></sc ript>
<script type="text/javascript">
jQuery.validator.setDefaults( {
debug : true ,
success : "valid"
});;
</script>
<script>
$(document).ready( function () {
// 1
$( "#myform" ).validate({
rules : {
fruit : "required"
},
errorPlacement : function (error, element) { //if
( element.is(":radio") )
error.appendTo(element.parent());
}
});
// 2
$( "#myinput" ).rules(
"add" ,
{
required : true ,
minlength : 2,
messages : {
required : "Required input" ,
minlength : jQuery.format( "Please, at least {0} characters are necessary" )
}
}
);
// 3
$( ":radio" ).each( function () {
$( this ).rules( "add" , {
required : true ,
minlength : 2,
messages : {
required : "Required input 必填 " ,
minlength : jQuery.format( "Please, at least {0} characters are necessary" )
}
}
)
});
});
</script>
</head>
<body>
<form id="myform">
<table border="1">
<tr>
<td>
<label for="fruit">
Please select a fruit
</label>
</td>
<td>
<select id="fruit" name="fruit" title="Please select something!">
<option value=""></option>
<option value="1">
Banana
</option>
<option value="2">
Apple
</option>
<option value="3">
Peach
</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="myinput" />
</td>
<td>
<input type="submit" value="submit!" /> </td>
</tr>
<tr>
<td>
<input type="radio" name="radio3">
radio3
<input type="radio" name="radio3">
radio3
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio2">
radio2
<input type="radio" name="radio2">
radio2
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio1">
radio1
<input type="radio" name="radio1">
radio1
</td>
</tr>
</table>
</form>
</body>
</html>
参考：/Plugins/Validation
rules( ) Returns: Options
Return the validations rules for the first selected element. rules( "add", rules ) Returns: Options
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?
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test for jQuery validate() plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />
<mce:script src="/jquery-latest.js" mce_src="/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="/view/trunk/plugins/validate/lib/jquery.delegate. js"></mce:script>
<mce:script type="text/javascript" src="/view/trunk/plugins/validate/jquery.validate.js"
mce_src="/view/trunk/plugins/validate/jquery.validate.js"> </mce:script>
<mce:script
type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.met adata.js"></mce:script>
<mce:style type="text/css"><!--
/*
.cmxform fieldset p.error label { color: red; }
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
.container label.error {
display: inline;
}*/
form.cmxform { width: 30em; }
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
--></mce:style><style type="text/css" mce_bogus="1">/*
.cmxform fieldset p.error label { color: red; }
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
.container label.error {
display: inline;
}*/
form.cmxform { width: 30em; }
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}</style>
<mce:script type="text/javascript"><!--
// only for demo purposes
$.validator.setDefaults({
submitHandler: function() {
alert("submitted! (skipping validation for cancel button)");
}
});
$().ready(function() {
$("#form1").validate({
errorLabelContainer: $("#form1 div.error")
});
/*
var container = $('div.container');
// validate the form when it is submitted
var validator = $("#form2").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
meta: "validate"
});
*/
$(".cancel").click(function() {
validator.resetForm();
});
});
// --></mce:script>
</head>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"
mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuer y Validation Plugin</a> Demo</h1>
<div id="main">
<form method="get" class="cmxform" id="form1" action="">
<legend>Login Form</legend>
<p>
<label>Username</label>
<input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
</p>
<p>
<label>Password</label>
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
</p>
<div class="error">
</div>
<p>
<input class="submit" type="submit" value="Login"/>
</p>
</fieldset>
</form>
<!-- our error container -->
<!--<div class="container">
<h4>There are serious errors in your form submission, please see below for details.</h4>
<ol>
<li><label for="email" class="error">Please enter your email address</label></li>
<li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
<li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
<li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
<li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
</ol>
</div>-->
<!--<form class="cmxform" id="form2" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="email">Email</label>
<input id="email" name="email" class="{validate:{required:true,email:true}}" />
<p>
<label for="agree">Favorite Color</label>
<select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}">
<option></option>
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
</p>
<p>
<label for="phone">Phone</label>
<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
</p>
<p>
<label for="address">Address</label>
<input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
</p>
<p>
<label for="avatar">Avatar</label>
<input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
</p>
<p>
<label for="cv">CV</label>
<input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
<input class="cancel" type="submit" value="Cancel"/>
</p>
</fieldset>
</form>-->
<!--<div class="container">
<h4>There are serious errors in your form submission, please see details above
the form!</h4>
</div>-->
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">回到主页query-plugin-validation：</a>
|<a href="http://jquery.bassistance.de/validate/jquery.validate.zip" mce_href="http://jquery.bassistance.de/validate/jquery.validate.zip"
title="zip-Archive with source code, minified and packed version, demos and examples">下载</a>
|<a href="http://jquery.bassistance.de/validate/changelog.txt" mce_href="http://jquery.bassistance.de/validate/changelog.txt">Changelog</a> |<a href="http://jquery.bassistance.de/validate/demo/" mce_href="http://jquery.bassistance.de/validate/demo/">Demos</a>
|<a href="/Plugins/Validation" mce_href="/Plugins/Validation">Documentation</a>
</div>
<mce:script src="/urchin.js" mce_src="/urchin.js"
type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
_uacct = "UA-2623402-1";
urchinTracker();
// --></mce:script>
</body>
</html>
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?
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test for jQuery validate() plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />
<mce:script src="../lib/jquery.js" mce_src="lib/jquery.js" type="text/javascript"></mce:script>
<mce:script src="../lib/jquery.metadata.js" mce_src="lib/jquery.metadata.js" type="text/javascript"></mce:script>
<mce:script src="../jquery.validate.js" mce_src="jquery.validate.js" type="text/javascript"></mce:script>
<!--
<mce:script src="/jquery-latest.js" mce_src="/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="/view/trunk/plugins/validate/lib/jquery.delegate.
js"></mce:script>
<mce:script type="text/javascript" src="/view/trunk/plugins/validate/jquery.validate.js"
mce_src="/view/trunk/plugins/validate/jquery.validate.js"> </mce:script>
<mce:script
type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.met adata.js"></mce:script>
--><mce:style type="text/css"><!--
/*
.cmxform fieldset p.error label { color: red; }*/
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
/*
.container label.error {
display: inline;
}
*/
/*
form.cmxform { width: 30em; }
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
*/
--></mce:style><style type="text/css" mce_bogus="1">/*
.cmxform fieldset p.error label { color: red; }*/
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
/*
.container label.error {
display: inline;
}
*/
/*
form.cmxform { width: 30em; }
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
*/</style>
<mce:script type="text/javascript"><!--
// only for demo purposes
$.validator.setDefaults({
submitHandler: function() {
alert("submitted! (skipping validation for cancel button)"); }
});
$().ready(function() {
/*$("#form1").validate({
errorLabelContainer: $("#form1 div.error")
});*/
var container = $('div.container');
// validate the form when it is submitted
var validator = $("#form2").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
meta: "validate"
});
$(".cancel").click(function() {
validator.resetForm();
});
});
// --></mce:script>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"
mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuer y Validation Plugin</a> Demo</h1>
<div id="main">
<!--<form method="get" class="cmxform" id="form1" action="">
<fieldset>
<legend>Login Form</legend>
<p>
<label>Username</label>
<input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
</p>
<p>
<label>Password</label>
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
</p>
<div class="error">
</div>
<p>
<input class="submit" type="submit" value="Login"/>
</p>
</fieldset>
</form>-->
<!-- our error container -->
<div class="container">
<h4>There are serious errors in your form submission, please see below for details.</h4>
<ol>
<li><label for="email" class="error">Please enter your email address</label></li>
<li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
<li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
<li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
<li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
</ol>
<form class="cmxform" id="form2" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="email">Email</label>
<input id="email" name="email" class="{validate:{required:true,email:true}}" />
</p>
<p>
<label for="agree">Favorite Color</label>
<select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}">
<option></option>
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
</p>
<p>
<label for="phone">Phone</label>
<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
</p>
<p>
<label for="address">Address</label>
<input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
</p>
<p>
<label for="avatar">Avatar</label>
<input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
</p>
<p>
<label for="cv">CV</label>
<input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
</p>。