插件也称为扩展,是一种遵循一定规范的应用程序接口编写出来的程序,最新最全的插件可以从jQuery官方网站的插件版块中获取,网站地址为:http://plugins.jquery.com/。
一.jQuery表单验证插件—Validation
1.Validation简介
作为一个标准的验证方法库,Validation拥有如下特点:
- 内置验证规则:拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。
- 自定义验证规则:可以很方便地自定义验证规则。
- 简单 强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能。
- 实时验证:可以通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证。
2.下载地址
jQuery Validation插件的下载地址:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
3.快速上手
进行以下操作就可以将一个普通的表单改造为可以进行Validation验证的表单:
- 引入jQuery库和Validation插件
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.validation.js" type="text/javascript"></script>
- 确定哪个表单需要验证
$("#commentForm").validate();
- 针对不同的字段,进行验证规则编码,设置字段相应的属性
class=”required”为必须填写,minlength=”2”为最小长度为2.
<input id="cusername" name="username" size="25" class="required" minlength="2"/>
class=”required email”为必须填写和内容需要符合E-mail格式。
class=”url”为url格式验证。
4.不同的验证写法
在上例中,开发者必须把required、url和email写到class属性里,要把minlength属性值设置为2,才能完成验证,很麻烦,Validation充分考虑到这一点,可以将所有验证有关的信息写到class属性中方便管理。
- 引入一个新的jQuery插件—jquery.metadata.js
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
- 改变调用的验证方法
$("#commentForm").validate({meta:"validate"});
- 将验证规则全部写到class属性中
<input id="cusername" name="username" size="25" class="{validate:{required:true,minlength:2}}"/>
在上例中,验证行为和HTML结构并没有完全脱钩,下面介绍一种行为和结构分离的方法,通过name属性关联字段和验证规则的验证手法:
$(document).ready(function(){
$("#commentForm").validate({
rules:{
username:{required:true, minlength:2},
email:{required:true, email:true},
url:"url",
comment:"required"
}
});
});
5.验证信息
- 国际化
将验证信息改为中文,只需引入Validation提供的中文验证信息库即可:
<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></script>
- 自定义验证信息
class="{validate:{required:true,minlength:2,
messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}"
- 自定义验证信息并美化
我们也需要为验证提示信息加些漂亮的图片,例如验证成功后的对勾,对于Validation插件来说很简单,在jquery代码中增加如下代码:
errorElement:"em", //用来创建错误提示信息标签
success:function(label){ //验证成功后执行的回调函数,label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addclass("success"); //加上自定义的success类
}
在CSS代码中增加如下代码,以便和errorElement相关联
em.error{
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left:16px;
}
em.success{
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left:16px;
}
6.自定义验证规则(包括验证码等)
7.API
Validation插件的官方API地址为:
http://docs.jquery.com/Plugins/Validation.
二.jQuery表单插件—Form
1.Form插件简介
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入的升级HTML表单以支持Ajax。jQuery Form有两个核心方法—ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进程的功能。
2.下载地址
http://jquery.malsup.com/form#download
3.快速上手
在HTML页面上添加一个form表单,然后引入jQuery库和Form插件,并编写Ajax提交jQuery代码。
4.核心方法—ajaxForm()和ajaxSubmit()
可以通过核心方法ajaxForm()很容易将表单升级为Ajax提交方式:
$('#myForm').ajaxForm(function(){
$('#output1').html("提交成功!欢迎下次再来!").show();
});
还有一个核心方法ajaxSubmit(),也能完成同样功能:
$('#myForm').submit(function(){
$(this).ajaxSubmit(function(){
$('#output1').html("提交成功!欢迎下次再来!").show();
});
return false; //阻止表单默认提交
});
5.ajaxForm()和ajaxSubmit()方法的参数
以上两种方法都能接受0个或者1个参数,当是一个参数时,既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面说options对象,首先定义一个对象options,然后在对象里设置参数:
var options={
target:'#output1', //把服务器返回的内容放入id为output1的元素中
beforeSubmit:showRequest, //提交前的回调函数
success:showResponse, //提交后的回调函数
url:url, //默认是form的action,如果申明,则会覆盖
type:type, //默认是form的method(‘get’or‘post’),如果申明,则会覆盖
dataType:null, //‘xml’,‘script’,or‘json’(接受服务端返回的类型)
clearForm:true, //成功提交后,清除所有表单元素的值
resetForm:true, //成功提交后,重置所有表单元素的值
timeout:3000 //限制请求的时间,当请求大于3秒后,跳出请求
};
6.表单提交之前验证表单
大多数情况下,表单提交之前都会对表单进行验证,如果不符合验证规则,则阻止表单提交,beforeSubmit会在表单提交前被调用,定义一个回调函数validate:
beforeSubmit:validate
编写validate函数,有三个参数:
function validate(formData,jqForm,options){
//若不符合验证,则返回false阻止提交,直至符合规则
var queryString=$.param(formDate); //组装数据
return true;
}
Form插件获取表单数据的方式有多种,其中有下面三种方式:
- 利用参数formDate:这是一个数组对象,由于是数组,因此可以根据循环来获取每个元素的值,然后判断是否符合验证。
- 利用参数jqForm:参数jqForm是一个jQuery对象,封装了表单元素,可以把它转为DOM对象来访问,然后通过form.name.value和form.address.value来获取值。
- fieldValue()方法会把匹配元素的值插入到数组中,然后返回这个数组。
三.模态窗口插件—SimpleModal
1.SimpleModal插件简介
它是一个轻量级的jQuery插件,为模态窗口的开发提供了一个强有力的接口,可以把它当做模态窗口的框架。
2.下载地址
http://www.ericmmartin.com/projects/simplemodal/
3.快速上手
它提供了两种简单方法来调用模态窗口: - 第一种是作为一个链式的jQuery函数,可以在一个用jQuery获取的元素上调用modal()函数,之后用这个元素的内容来显示一个模态窗口:
$("#element-id").modal();
- 第二种方法是作为一个单独函数使用,通过传递一个jQuery对象,DOM元素或纯文本来创建一个模态窗口:
$.modal("<div><h1>SimpleModal</h1></div>",{options});
上面的例子只是创建非常基本的没有样式模态窗口,我们也可以通过外部CSS,选项对象或两个一起来应用样式。SimpleModal在内部定义了如下CSS类:simplemodal-overlay,simplemodal-container,simplemodal-wrap和simplemodal-data。
4.关闭模态窗口
SimpleModal自动为模态窗口内class是“simplemodal-close”的元素绑定了关闭函数。
四.管理Cookie的插件—Cookie
1.Cookie插件简介
Cookie是网站设计者放置在客户端的小文本文件,Cookie能为用户提供很多的便利,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻。在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息。
2.下载地址
https://github.com/carhartl/jquery-cookie
3.Cookie API
- 写入Cookie
$.cookie('the_cookie','the_value'); //the_cookie为待写入的Cookie名,the_value为待写入的值
- 读取Cookie
$.cookie('the_cookie'); //待读取的Cookie名
- 删除Cookie
$.cookie('the_cookie',null); //必须使用与之前设置时相同的路径(path)和域名(domain)。
- 其他可选参数
$.cookie('the_cookie','the_value',{
expires:7, //有效期
path:'/', //cookie的路径属性
damain:'jquery.com', //cookie的域名属性
secure:true //若为true,此cookie的传输会要求一个安全协议,例如HTTPS。
});