7-1 Validation
【代码7-1-1】
使用步骤：
（1）引入jQuery库和Validation插件：
<script src="../../script/jquery-1.3.1.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
（2）确定哪个表单需要被验证：
<form class="cmxform" id="commentForm" method="get" action="">
<input id="cusername" name="username" size="25" class="required" minlength="2" />
<input id="cemail" name="email" size="25" class="required email" />
<input id="curl" name="url" size="25" class="url" value="" />
<textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
【代码7-1-2】
不同的验证写法：
引入一个新的jQuery插件：jquery.metadata.js
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
此时需要改变调用的验证方法
<form class="cmxform" id="commentForm" method="get" action="">
<input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
<input id="cemail" name="email" size="25" class="{validate:{required:true, email:true}}" />
<input id="curl" name="url" size="25" value="" class="{validate:{url:true}}" />
<textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
【代码7-1-3】
（1）将字段中的class属性移除
<form class="cmxform" id="commentForm" method="get" action="">
<input id="cusername" name="username" size="25" />
<input id="cemail" name="email" size="25" />
<input id="curl" name="url" size="25" value="" />
<textarea id="ccomment" name="comment" cols="22"></textarea>
（2）加入如下jQuery代码：
【代码7-1-4】验证显示为中文
<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></script>
只需要在上面的例子中加入这行代码，就可以使验证显示出中文：
【代码7-1-5】自定义验证信息：
引用代码：
<script src="../../script/jquery-1.3.1.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
jQuery代码：
表单信息：
<form class="cmxform" id="commentForm" method="get" action="">
<input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2,messages:{required:'任兴：请输入姓名', minlength:'请至少输入两个字符'}}}" />
<input id="cemail" name="email" size="25" class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}" />
<input id="curl" name="url" size="25" value="" class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />
<textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea>
【代码7-1-6】自定义验证信息并美化
CSS代码：
jQuery代码：
运行结果：
【代码7-1-7】自定义验证规则，如：计算结果
结果如下：
7-2 jQuery表单插件：Form 【在PHP环境下运行】
ajaxForm()方法和ajaxSubmit()方法
【代码7-2-4】demo4.html
（1）引入jquery.form.js
<script src="jquery.form.js" type="text/javascript"></script>
（2）定义一个对象options，然后在对象里设置参数：
（3）把这个options对象传递给ajaxForm()方法：
$('#myForm').ajaxForm(options); //'ajaxForm' 方式的表单
或者传递给ajaxSubmit()方法：
$('#myForm').submit(function() { //或者 'ajaxSubmit' 方式的提交
$(this).ajaxSubmit(options);
return false; //来阻止浏览器提交.
});
（4）研究：提交前的回调函数beforeSubmit: showRequest
（5）提交后的回调函数success: showResponse
【代码7-2-5】demo5.html
表单提交之前验证表单
（1）定义一个validate回调函数，设置为beforeSubmit的值：
（2）编写validate函数，有3个参数：
Form插件获取表单数据常用的有3种方式：
方式一：利用参数formData
方式二：利用参数jqForm 【代码7-2-6】demo6.html
方式三：利用参数fieldValue 【代码7-2-7】demo7.html
运行结果示例：
7-3 动态绑定事件插件：livequery
【代码7-3-1】
引入jquery.livequery.js
<script src="lib/jquery.livequery.js" type="text/javascript"></script>
【代码7-3-2】与复杂选择器结合使用
【代码7-3-3】触发回调函数
7-4 jQuery UI 插件
【代码7-4-1】快速上手
（1）引入sortable库和 ui.core.js
（2）直接让id为“myList”下的元素可以拖动排序
（3）运行结果——拖动直接可以改变位置
【代码7-4-2】与单击事件冲突
【代码7-4-3】触发排序停止后的回调函数
【代码7-4-4】通过sortable(‘serialize’)方法直接获取元素排列的顺序
（需要在PHP环境下运行）
最后，使用POST方式把数据提交到后台：
运行结果如下：
7-5 管理Cookie的插件——Cookie
【代码7-5-1】jQuery Cookie插件快速入门（经测试IE浏览器下可以用）
【代码7-5-2】API
运行结果：（IE10下运行正常）
7-6 编写插件
插件的基本要点：
常见的jQuery插件的形式：
下面是一种常见的jQuery插件的结构：
7.6.4 jQuery插件的机制
