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插件的機制
