web前端之鋒利的jQuery八：jQuery外掛的使用（表單驗證、表單提交）
1.jQuery表單驗證外掛－Validation： 最常使用JavaScript的場合就是表單的驗證，而jQuery作為一個優秀的JavaScript庫，也提供了一個優秀的表單驗證外掛－Validation，其擁有以下優點： 內建驗證規則：擁有必填、數字、email、URL和信用卡號等19類內建驗證規則。 自定義驗證規則：可以很方便地自定義驗證規則 簡單強大的驗證資訊提示：默認了驗證資訊提示，並提供自定義覆蓋預設提示資訊的功能 實時驗證：可以通過keyup和blur事件觸發驗證，而不僅僅在表單提交的時候驗證
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Validation</title> <script type="text/javascript" src="../js/jquery-3.1.1.js"></script> <script type="text/javascript" src="../js/jquery.validate.js"></script> <script type="text/javascript" src="../js/jquery.validate.messages_cn.js"></script> <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; } .submit{ margin-left: 12em; } em{ font-weight: bold; padding-right: 1em; vertical-align: top; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#commentForm").validate(); }); </script> </head> <body> <form class="cmxform" id="commentForm" method="get" action="#"> <fieldset> <legend>一個簡單的驗證帶驗證提示的評論例子</legend> <p> <label for="cusername">姓名</label><em>*</em> <input id="cusername" name="username" size="25" class="required" minlength="2" /> </p> <p> <label for="cemail">電子郵件</label><em>*</em> <input id="cemail" name="email" size="25" class="required email" /> </p> <p> <label for="curl">網址</label><em>*</em> <input id="curl" name="url" size="25" class="url" value="" /> </p> <p> <label for="ccomment">你的評論</label><em>*</em> <textarea id="ccomment" name="comment" cols="22" class="required"></textarea> </p> <p> <input class="submit" type="submit" value="提交" /> </p> </fieldset> </form> </body> </html>
首先引入：
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>確定哪個表要被驗證 $(“#commentForm”).validate();
針對不同欄位，進行驗證規則編碼 class=”required” 為必須填寫 minlength=”2” 為最小長度為2 class=”required email” 必須填寫，內容必須是email格式 class=”url” 為url格式驗證
使提示是中文，匯入：
<script type="text/javascript" src="../js/jquery.validate.messages_cn.js"></script>
2.jQuery表單外掛——Form： jQuery Form外掛是一個優秀的Ajax表單外掛，可以非常容易的，無侵入的升級HTML表單以支援Ajax。jQuery Form有兩個核心方法－ajaxForm()和ajaxSubmit,他們集合了從控制表單formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()、resetForm()等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>外掛</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//繫結id為myForm的表單並提供一個簡單的回撥函式
$("#myForm").ajaxForm(function(){
$("#output1").html("提交成功！歡迎下次再來！").show();
});
});
</script>
</head>
<body>
<form id="myForm" action="demo.php" method="post">
名稱：<input type="text" name="name" /><br>
地址：<input type="text" name="address" /><br>
自我介紹：<textarea name="comment"></textarea><br>
<input type="submit" id="test" value="提交" /><br>
<div id="output1" style="display:none;"></div>
</form>
</body>
</html>當表單被提交時，“姓名”、“地址”、“自我介紹”欄位的值會以無重新整理的方式提交到檔案demo.PHP中。如果伺服器返回一個成功的狀態，那麼使用者就會看到“提交成功！歡迎下次再來”的提示
核心方法 ajaxForm()和ajaxSubmit()
通過核心方法ajaxForm()，能很容易地將表單升級為Ajax提交方式
$("#myForm").ajaxForm(function(){
$("#output1").html("提交成功！歡迎下次再來！").show();
});
Form外掛還有一個核心方法就是ajaxSubmit()，也能完成用同樣的功能
$("#myForm").submit(function(){
$(this).ajaxSubmit(function(){
$("#output1").html("提交成功！歡迎下次再來！").show();
});
return false;//阻止表單預設提交
});ajaxForm()和ajaxSubmit()的引數 ajaxForm()和ajaxSubmit()都能接受0個或者1個引數。當為單個的引數時，該引數既可以是一個回撥函式，也可以是一個option物件。上面例子的引數就是回撥函式。接下來介紹options物件，通過給ajaxForm()方法和ajaxSubmit()方法傳遞options物件，使得他們對錶單擁有更多的控制權。 首先定義一個物件options，然後在物件裡設定引數
var options={
target="#output1"//把伺服器返回的內容放入id為output1的元素中
,beforeSubmit:showRequest//提交前的回撥函式
,success:showResponse//提交後的回撥函式
,url:url//預設是form的action，如果申明，則被覆蓋
,type:type//預設是form的method ，如果申明，則被覆蓋
,dedaType:null//“xml”、“script”、“json”等資料型別
,clearForm:true//成功提交後，清除所有表單元素的值
,resetForm:true//成功提交後，重置所有表單元素的值
,timeout:3000//限制請求時間，當大於3秒後，跳出請求
};定義options物件之後，就可以把這個物件傳遞給ajaxForm方法：
$("#myForm").ajaxForm(options);或者傳遞給ajaxSubmit方法：
$("#myForm").submit(function(){
$(this).ajaxSubmit(options);
return false;
});在options物件裡，指定兩個回撥函式，即beforeSubmit:showRequest和success:showResponse,他們分別會在表單提交前和表單提交後被呼叫。
beforeSubmit－提交前的回撥函式
function showRequest(formData,jqForm,options){
var queryString =$.para(formData);
return ture;
}這個回撥函式有三個引數，第一個引數formData是陣列物件。在這裡，使用$.param()方法把它轉化成字串，得到以下這種格式：name1&address=2 需要注意的是，當表單提交時，Form外掛會以Ajax方式自動提交這些資料 第二個引數jqForm是一個DOM元素，可以把jqForm轉換成DOM物件。 var formElement=jqForm[0]; var address=formElement.address.valse; 第三個引數options就是options物件。 這個回撥函式中只要不返回false，表單豆漿杯允許提交；如果返回false，則會阻止表單提交。
success－提交後的回撥函式
function showResponse(responseText,statusText,xhr,$form){
alert('狀態：'+statusText+'n 反悔的內容是：n'+responseText);
}這個回撥函式有四個引數responseText,statusText,xhr,$form。其中responseText,statusText兩個引數比較常用。 statusText只是返回一個狀態，例如success、error等。 responseText攜帶著伺服器返回的資料內容。responseText會根據設定的options物件中的dataType屬性來返回相應資料格式的內容，具體情況如下。 （1）對於預設的HTML返回，回撥函式的第一個引數是XMLHttpRequest物件的responseText屬性。 （2）當dataType屬性被設定為xml時，回撥函式的第一個引數是XMLHttpRequest物件的responseXML屬性。
$("#xmlForm").ajaxForm({
dataType:'xml';
success:processXml
});
function processXml(responseXML){
var name=$('name',responseXML).text();
var address=$('address',responseXML).text();
$("#xmlOut").html(name+" "+address);
}（3）當dataType屬性被設定為json時，回撥函式的第一個引數是從伺服器返回的json資料物件
$("#myForm").ajaxForm({
dataType:'json';
success:processJson
});
function processJson(data){
$("#jsonOut").html(data.name+" "+data.address);
}