本文介绍jQuery validation插件的基本使用方法，包括不同验证规则的设置方式、国际化及自定义提示信息，并展示了如何利用metadata.js进行更灵活的验证配置。此外，还介绍了自定义验证规则的方法以及cookie插件的使用。
一、validation插件
表单验证：
使用方式：①引入jQuery库和validation插件
②确定那个表单需要验证，$(“#表单域id”).validate()
③给表单域设置验证规则。
class=”required” 为必须填写，minlength=”2”为最小长度为2，class=”required email” 必填且符合email格式，class=”url” 为 url格式验证。
验证原理：验证失败后，在表单域后动态创建一个class为error的label标签，同样是左浮动，需要清除浮动，如果不清除浮动，label.error样式会达不到想要的效果。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个validation插件程序</title>
<style type="text/css">
* {
font-family: verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
/*如果不符合验证规则 则自动在被验证的文本框后面加一个class属性为error的label
作为提示信息 因为上面已经设置了label为浮动 所以自动生成的显示提示信息的label
也是浮动的 所以效果有些问题 需要给自动生成的label修改它的float为none
如果想控制提示信息和文本框的距离 可以设置padding-left* */
label.error {
float: none;
color: red;
padding-left: 5em;
vertical-align: top;
background-color: burlywood;
}
p {
clear: both;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
.submit {
margin-left: 12em;
}
</style>
<!--第一步 导入jQuery库和validation插件-->
<script src="../../jsJava库/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jsJava库/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#commentForm").validate();
});
</script>
</head>
<body>
<form id="commentForm" action="#" method="get">
<fieldset>
<legend>带验证的评论</legend>
<p>
<label for="username">姓名</label><em>*</em>
<input type="text" name="username" id="username" size="25" class="required" minlength="2" />
</p>
<p>
<label for="email">电子邮件</label><em>*</em>
<input type="text" name="email" id="email" size="25" class="required email" />
</p>
<p>
<label for="url">网址</label><em> </em>
<input type="text" name="url" id="url" size="25" class="url" />
</p>
<p>
<label for="comment">你的评论</label><em>*</em>
<textarea id="comment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
</body>
</html>二、metadata.js插件
metadata.js 是与 validation.js 不同的验证方法。
两种不同的验证写法
（一）class=”required” 和 minlength=”2”都写在class里
使用方式：①引入jQuery、validation、metadata.js，注意：validation 和 metadata 版本要配套。
②$(“表id”).validate({meta:”validate”});
③将规则写入class,
示例：
<form id="commentForm" action="#" method="get">
<fieldset>
<legend>带验证的评论</legend>
<p>
<label for="username">姓名</label><em>*</em>
<input type="text" name="username" id="username" size="25" class="{validate:{required:true, minlength:2}}" />
</p>
<p>
<label for="email">电子邮件</label><em>*</em>
<input type="text" name="email" id="email" size="25" class="{validate:{required:true, email:true}}" />
</p>
<p>
<label for="url">网址</label><em> </em>
<input type="text" name="url" id="url" size="25" class="{validate:{url:true}}" />
</p>
<p>
<label for="comment">你的评论</label><em>*</em>
<textarea id="comment" name="comment" cols="22" class="{validate:{required:true}}"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>（二）将验证规则和HTML结构分离
先将表单域的class属性移除，使用jQuery修改class
$(function() {
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required"
}
});
});三、验证信息自定义（中文）
（一）国际化
使用方式：①引入jquery.validate.messages_cn.js
其它适用于上例相同，只是英文改成中文。
（二）自定义提示信息
在之前的错误提示位置修改代码：required:’请输入姓名’
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>把验证规则都放到class中统一管理</title>
<style type="text/css">
* {
font-family: verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
padding-left: 5em;
vertical-align: top;
}
p {
clear: both;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
.submit {
margin-left: 12em;
}
</style>
<!--第一步 导入jQuery库和validation插件-->
<script src="../../jsJava库/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jsJava库/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jsJava库/jquery.metadata.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#commentForm").validate({meta: "validate"});
});
</script>
</head>
<body>
<form id="commentForm" action="#" method="get">
<fieldset>
<legend>带验证的评论</legend>
<p>
<label for="username">姓名</label><em>*</em>
<input type="text" name="username" id="username" size="25"
class="{validate:{required:true, minlength:2,messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}" />
</p>
<p>
<label for="email">电子邮件</label><em>*</em>
<input type="text" name="email" id="email" size="25"
class="{validate:{required:true, email:true,messages:{required:'请输入电子邮件',email:'请检查电子邮件的格式'}}}" />
</p>
<p>
<label for="url">网址</label><em> </em>
<input type="text" name="url" id="url" size="25" class="{validate:{url:true,messages:{url:'请检查网址的格式'}}}" />
</p>
<p>
<label for="comment">你的评论</label><em>*</em>
<textarea id="comment" name="comment" cols="22" class="{validate:{required:true,messages:{required:'请输入您的评论'}}}"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
</body>
</html>（三）自定义提示信息并美化
在（二）的基础上加以美化，加上成功或失败图片。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证规则和HTML内容分离.html</title>
<style type="text/css">
* {
font-family: verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
/*padding-left: 5em;*/
vertical-align: top;
background-color: yellowgreen;
background: url("../../../img/unchecked.gif") no-repeat 2px 0px;
padding-left: 18px;
}
label.success {
background: url("../../../img/checked.gif") no-repeat 2px 0px;
padding-left: 18px;
}
p {
clear: both;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
.submit {
margin-left: 12em;
}
</style>
<!--第一步 导入jQuery库和validation插件-->
<script src="../../jsJava库/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jsJava库/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: "url",
comment: "required"
},
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},
errorElement: "label", //可以用其他标签，记住把样式也对应修改
success: function(label) {
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
<body>
<form id="commentForm" action="#" method="get">
<fieldset>
<legend>验证规则和HTML内容分离</legend>
<p>
<label for="username">姓名</label><em>*</em>
<input type="text" name="username" id="username" size="25" minlength="2" />
</p>
<p>
<label for="email">电子邮件</label><em>*</em>
<input type="text" name="email" id="email" size="25" />
</p>
<p>
<label for="url">网址</label><em> </em>
<input type="text" name="url" id="url" size="25" />
</p>
<p>
<label for="comment">你的评论</label><em>*</em>
<textarea id="comment" name="comment" cols="22"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
</body>
</html>（四）自定义验证规则
在页面注册底部，加一个类似验证码的内容，例：7+9=？，如果写的是16，则验证通过。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证规则和HTML内容分离.html</title>
<style type="text/css">
* {
font-family: verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
/*padding-left: 5em;*/
vertical-align: top;
background-color: yellowgreen;
/*假装此处有图片，是个错误提示的图片*/
background: url("../../../img/unchecked.gif") no-repeat 2px 0px;
padding-left: 18px;
}
label.success {
background: url("../../../img/checked.gif") no-repeat 2px 0px;
padding-left: 18px;
}
p {
clear: both;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
.submit {
margin-left: 12em;
}
</style>
<!--第一步 导入jQuery库和validation插件-->
<script src="../../jsJava库/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jsJava库/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//自定义一个验证方法
$.validator.addMethod(
"formula", //验证方法名称
function(value, element, param) { //验证规则
return value == eval(param);
},
'请正确输入数学公式计算后的结果' //验证提示信息
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: "url",
comment: "required",
valCode: {
formula: "7+9"
}
},
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},
errorElement: "label", //可以用其他标签，记住把样式也对应修改
success: function(label) {
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
<body>
<form id="commentForm" action="#" method="get">
<fieldset>
<legend>自定义验证规则</legend>
<p>
<label for="username">姓名</label><em>*</em>
<input type="text" name="username" id="username" size="25" minlength="2" />
</p>
<p>
<label for="email">电子邮件</label><em>*</em>
<input type="text" name="email" id="email" size="25" />
</p>
<p>
<label for="url">网址</label><em> </em>
<input type="text" name="url" id="url" size="25" />
</p>
<p>
<label for="comment">你的评论</label><em>*</em>
<textarea id="comment" name="comment" cols="22"></textarea>
</p>
<p>
<label for="valCode">验证码</label><em>*</em>
<input type="text" name="valCode" id="valCode" size="25" />=7+9
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
</body>
</html>管理cookie的插件–cookie.js
Cookie是网站设计者放置在客户端的小文本文件. 实现 存储用户曾经浏览过的产品列表,记住用户喜欢浏览哪类新闻等.在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息.
1.往cookie中存
.cookie(“属性名”，“属性值”，path:′/′,expires:10)第三个参数，含义是：保存在当前页面，有效期10天。2.取.cookie(“属性名”)；
3.删除cookie
$.cookie(‘cookie名’，null);置为null
以记住用户名为例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Cookie Plugin</title>
<script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jsJava库/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var COOKIE_NAME = 'username';
// alert($.cookie(COOKIE_NAME));
if( $.cookie(COOKIE_NAME) ){
$("#username").val($.cookie(COOKIE_NAME) );
}
$("#check").click(function(){
if(this.checked){
$.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });
}else{
$.cookie(COOKIE_NAME, null, { path: '/' });
}
});
});
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username"/> <br/>
<input type="checkbox" name="check" id="check"/>记住用户名
</body>
</html>自定义插件
方法：①新建一个jquery.自定义插件名.js。
②语法格式：
;(function()//这里写插件代码)(jQuery);这样的格式是立即调用的匿名函数。前面写一个；是为了防止与上一个导入的js文件冲突，通常js文件压缩时，会把最后一个;作为空格处理。这样做解决了不同js之间的冲突。还可以这样写：!function(){
}(jQuery);
//或把！写成+,!+( )的作用都是把函数转化成表达式，立即执行。
插件里的代码格式（不固定）：
$.fn.extend({
//json数据格式
})
示例：修改颜色的插件
;(function ($) {
$.fn.extend({
"color":function (value) {
if(value == undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
})(jQuery);$.extend的作用
把当前对象的属性提取出来，如果重复则合并或覆盖，如果没有就添加。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//合并
var $obj = $.extend({
odd:"odd", /* 偶数行样式*/
even:"even", /* 奇数行样式*/
},{
odd:"111",
selected:"selected"
});
console.info($obj);
});
</script>
</head>
<body>
</body>
</html>
$(“选择器”，上下文（可以写this）);//如果不穿第二个参数，默认上下文是document，从当前整个文档中去找，this是在当前对象下找，提高了查找效率。
扫一扫
1082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
