evilmann1
- 浏览: 24061 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
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"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<!--<style>label.valid {
background: url('http://dev.jquery.com/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="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<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>
参考：http://docs.jquery.com/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.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/">jQuery 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>
</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>
<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="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a>
</div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.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/">jQuery 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>
</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>
<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="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a>
</div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
_uacct = "UA-2623402-1";
urchinTracker();
// --></mce:script>
</body>
</html>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.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/">jQuery 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>
</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>
<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="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a>
</div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
_uacct = "UA-2623402-1";
urchinTracker();
// --></mce:script>
</body>
</html>
< 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?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
meta : "validate", //Tell the validation plugin to look inside a validate-property in metadata for validation rules.
submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{meta:string} Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="{validate:{ required: true, email:true }}" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
meta : "validate", //Tell the validation plugin to look inside a validate-property in metadata for validation rules.
submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{meta:string} Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="{validate:{ required: true, email:true }}" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
JQuery笔记（表单验证）六 errorcontainer-demo_4.html errorClass 收藏
< type="text/javascript">
jquery.validate.js简介（续1）{errorClass:string} Demo
代码 errorcontainer-demo_4.html
view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:style type="text/css"><!--
.myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
--></mce:style><style type="text/css" mce_bogus="1"> .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
</style>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
errorClass:"myerror", // errorClass 类型：String 默认："error" 说明：用此设定的样式来定义错误消息的样式。
submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{errorClass:string} Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="required" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
JQuery笔记（表单验证）七 errorcontainer-demo_5.html errorElement 收藏
< type="text/javascript">
jquery.validate.js简介（续1）{errorElement:String } Demo
代码 errorcontainer-demo_5.html
view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:style type="text/css"><!--
.myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
--></mce:style><style type="text/css" mce_bogus="1"> .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
</style>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
/*
errorElement 类型：String 默认："label"
说明：用html元素类型创建错误消息的容器。
默认的"label"有个优点就是能在错误消息与无效表单之间用for属性建立有意义的联系（一个常常使用的，而不管表单元素是什么的）。
*/
errorElement:"em", submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{errorElement:String } Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="required" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--
<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript" src="../jquery.metadata.js" mce_src="jquery.metadata.js"></mce:script>
-->
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></mce:script>
<mce:script language="javascript"><!--
$(function() {
alert( $("#liangO").metadata().some ); // data
/*
alert( $("#item1" ).metadata().item_id ); // 1
alert( $("#item1" ).metadata({type: "class"})
.item_id ); // 1
*/
alert( $("#item2" ).metadata({"type": "attr"})
.item_label
); // "Label"
alert( $("#item2" ).metadata({"type": "attr",
"name": "metadata"})
.item_label ); // "Label"
/*
alert( $("#item3" ).metadata({"type": "elem"})
.item_label ); // FF下为"Label"，IE下为undefined
alert( $("#item3" ).metadata({"type": "elem",
"name": "metadata"})
.item_label ); // FF下为"Label"，IE下为undefined
alert( $("#item4" ).metadata({"type": "elem",
"name": "script"})
.item_label ); // "Label"
*/
});
// --></mce:script>
</head>
<body>
<ol>
<li id="liangO" class="someclass {some: 'data'} anotherclass">...</li>
<li id="item1" class="someclass {'item_id': 1, item_label: 'Label'}">Item 1</li>
<li id="item2" metadata='{"item_id": 1, "item_label": "Label"}'>Item 2</li>
<li id="item3">
<metadata style="display: none;" mce_style="display: none;">{item_id: 1, item_label: 'Label'}</metadata>
Item 3 </li>
<li id="item4">
<mce:script type="metadata"><!--
{"item_id": 1, "item_label": "Label"}
// --></mce:script>
Item 4 </li>
</ol>
</body>
</html>
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"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<!--<style>label.valid {
background: url('http://dev.jquery.com/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="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<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>
参考：http://docs.jquery.com/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.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/">jQuery 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>
</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>
<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="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a>
</div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/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
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.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/">jQuery 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>
</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>
<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="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a>
</div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
_uacct = "UA-2623402-1";
urchinTracker();
// --></mce:script>
</body>
</html>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.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/">jQuery 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>
</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>
<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="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a>
</div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
_uacct = "UA-2623402-1";
urchinTracker();
// --></mce:script>
</body>
</html>
< 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?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
meta : "validate", //Tell the validation plugin to look inside a validate-property in metadata for validation rules.
submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{meta:string} Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="{validate:{ required: true, email:true }}" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
meta : "validate", //Tell the validation plugin to look inside a validate-property in metadata for validation rules.
submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{meta:string} Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="{validate:{ required: true, email:true }}" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
JQuery笔记（表单验证）六 errorcontainer-demo_4.html errorClass 收藏
< type="text/javascript">
jquery.validate.js简介（续1）{errorClass:string} Demo
代码 errorcontainer-demo_4.html
view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:style type="text/css"><!--
.myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
--></mce:style><style type="text/css" mce_bogus="1"> .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
</style>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
errorClass:"myerror", // errorClass 类型：String 默认："error" 说明：用此设定的样式来定义错误消息的样式。
submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{errorClass:string} Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="required" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
JQuery笔记（表单验证）七 errorcontainer-demo_5.html errorElement 收藏
< type="text/javascript">
jquery.validate.js简介（续1）{errorElement:String } Demo
代码 errorcontainer-demo_5.html
view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:style type="text/css"><!--
.myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
--></mce:style><style type="text/css" mce_bogus="1"> .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }
</style>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
/*
errorElement 类型：String 默认："label"
说明：用html元素类型创建错误消息的容器。
默认的"label"有个优点就是能在错误消息与无效表单之间用for属性建立有意义的联系（一个常常使用的，而不管表单元素是什么的）。
*/
errorElement:"em", submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介（续1）{errorElement:String } Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="required" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--
<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript" src="../jquery.metadata.js" mce_src="jquery.metadata.js"></mce:script>
-->
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></mce:script>
<mce:script language="javascript"><!--
$(function() {
alert( $("#liangO").metadata().some ); // data
/*
alert( $("#item1" ).metadata().item_id ); // 1
alert( $("#item1" ).metadata({type: "class"})
.item_id ); // 1
*/
alert( $("#item2" ).metadata({"type": "attr"})
.item_label
); // "Label"
alert( $("#item2" ).metadata({"type": "attr",
"name": "metadata"})
.item_label ); // "Label"
/*
alert( $("#item3" ).metadata({"type": "elem"})
.item_label ); // FF下为"Label"，IE下为undefined
alert( $("#item3" ).metadata({"type": "elem",
"name": "metadata"})
.item_label ); // FF下为"Label"，IE下为undefined
alert( $("#item4" ).metadata({"type": "elem",
"name": "script"})
.item_label ); // "Label"
*/
});
// --></mce:script>
</head>
<body>
<ol>
<li id="liangO" class="someclass {some: 'data'} anotherclass">...</li>
<li id="item1" class="someclass {'item_id': 1, item_label: 'Label'}">Item 1</li>
<li id="item2" metadata='{"item_id": 1, "item_label": "Label"}'>Item 2</li>
<li id="item3">
<metadata style="display: none;" mce_style="display: none;">{item_id: 1, item_label: 'Label'}</metadata>
Item 3 </li>
<li id="item4">
<mce:script type="metadata"><!--
{"item_id": 1, "item_label": "Label"}
// --></mce:script>
Item 4 </li>
</ol>
</body>
</html>
分享到：
发表评论
相关推荐
总的来说，`jQuery Validate` 插件提供了一种直观且强大的方式来处理表单验证。通过添加预定义的验证类或创建自定义验证方法，我们可以轻松地确保用户输入的数据有效，从而提高应用程序的质量和用户体验。
JQuery中的表单验证是前端开发中一个重要的环节，主要用于确保用户在提交表单时输入的数据符合预设的规则和格式。`jQuery Validate` 插件是实现这一功能的有力工具，它提供了一套便捷、可扩展的验证机制。下面将详细...
**jQuery 表单验证** jQuery 是一款轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理以及AJAX交互。在Web开发中，表单验证是必不可少的一个环节，用于确保用户输入的数据符合预设的规则。jQuery...
在这个背景下，jQuery作为一个强大的JavaScript库，为开发者提供了便利的工具来实现高效且友好的前端表单验证。本文将围绕"jQuery手机移动端注册表单验证代码.zip"这一主题，详细阐述jQuery在移动端注册表单验证中的...
《jQuery表单验证插件深度解析与应用》 在网页开发中，表单验证是必不可少的一环，它能确保用户输入的数据符合预期，减少服务器端的处理负担，提高用户体验。jQuery，作为一款广泛使用的JavaScript库，提供了丰富的...
jQuery的开源社区提供了大量高质量的插件，如轮播图、日期选择器、表单验证等。"myjquerytest"可能是实践项目的一部分，其中可能包含了一些插件的集成和自定义开发，帮助你理解如何在实际项目中应用jQuery。 总的来...
`js`文件夹可能包含一个或多个JavaScript文件，其中至少有一个是用于实现表单验证逻辑的jQuery脚本。这些脚本通过选择器定位到HTML表单元素，然后绑定事件监听器，如`submit`事件（当用户尝试提交表单时触发）和`...
【jQuery常用资质表单验证网站】是一个集合了实用jQuery特效的资源包，主要针对网页中的表单验证功能进行了精心设计和实现。这个压缩包提供的代码适用于开发者在创建网站时，需要对用户输入进行有效性和合法性检查的...
jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互，使得表单验证变得更加简单。 一、HTML5的基础 HTML5作为现代网页开发的标准，引入了一系列新的表单元素和属性，如`...
总之，这个jQuery会员注册表单验证提示代码提供了一个完整的示例，演示了如何利用jQuery进行前端表单验证，并给予用户友好的交互体验。开发者可以根据自己的需求进行适当的修改，以适应各种项目场景。通过深入理解并...
jQuery 社区提供了大量插件，如：轮播图插件（Bootstrap Carousel）、表单验证（validate）、日期时间选择器（datetimepicker）等，极大地扩展了jQuery的功能。 8. **链式操作（Chaining）** jQuery 对象返回的是...
在注册表单验证中，jQuery可以轻松地监听用户输入，如当用户在输入框中键入内容时，立即触发验证规则，提供即时反馈。例如，它可以检查邮箱格式是否正确，手机号码是否符合规范，或者密码强度是否达到最低要求。通过...
jQuery验证框架是一个强大的JavaScript库，用于在客户端进行表单验证，极大地提高了用户界面的交互性和用户体验。本笔记主要涵盖了框架的各个重要方面，包括可选项、插件方法、选择器和实用工具、验证器、内置验证...
2. **表单验证插件**: 如jQuery Validation，对表单输入进行实时验证。 3. **弹出框插件**: 如jQuery UI Dialog，提供可自定义的对话框功能。 4. **下拉菜单插件**: 如Select2，增强HTML Select元素的用户体验。 ...
表单插件`form`是jQuery的一个扩展，主要用于处理表单数据的提交与验证。它提供了异步提交表单的能力，允许用户在不刷新页面的情况下与服务器进行数据交互，从而提高了应用的响应速度和用户体验。这个插件还支持JSON...
在这个"jQuery表单提交滑动验证实例"中，我们将深入探讨如何利用jQuery和相关CSS技术实现一种有效的表单验证机制，特别是滑动验证这种常见且有趣的互动方式。 首先，滑动验证是一种常见的验证码形式，用户通过拖动...
总的来说，这个压缩包提供的代码示例展示了如何使用jQuery进行表单验证，这对于任何需要处理用户输入的Web应用都是非常有价值的。无论是新手还是经验丰富的开发者，都可以从中学到如何利用jQuery来优化前端交互体验...
- **jQuery Validate**: 表单验证插件。 - **jQuery EasyUI**: 用户界面组件库。 - **zTree**: 树形结构插件。 #### 九、jQuery内核研究 1. **源码分析** - 学习jQuery的核心实现机制。 2. **性能优化** - ...
jQuery拥有丰富的插件生态系统，如用于表单验证的jQuery Validation Plugin，图片轮播的bxSlider，以及响应式布局的jQuery Mobile等，极大地扩展了其功能。 **性能优化** 1. **减少DOM操作**: 尽可能批量处理DOM...