這篇文章主要講解了“如何用jQuery重寫表單驗證”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何用jQuery重寫表單驗證”吧！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、做網(wǎng)站、淥口網(wǎng)絡(luò)推廣、小程序設(shè)計、淥口網(wǎng)絡(luò)營銷、淥口企業(yè)策劃、淥口品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供淥口建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.rwnh.cn

前面我們曾介紹過使用jQuery技巧來提高代碼質(zhì)量，因為jQuery非常容易上手并使用簡單。重寫表單驗證是程序員們經(jīng)常做的事情，使用jQuery我們有五種方法可以選擇，同時也能夠解決亂碼的問題。

首先，對編碼知識進(jìn)行簡要的說明，請務(wù)必理解后再看下面的代碼。發(fā)送中文字符請求時，如果使用get方式，運行正常；而使用post方法則會出現(xiàn)亂碼。這是由于異步對象XMLHttpRequest在處理返回的responseText的時候，是按UTF-8編碼進(jìn)行解碼的。

如果你原來的網(wǎng)頁編碼是gb2312的話，當(dāng)然會發(fā)生編碼的沖突了；如果你原來的網(wǎng)頁編碼是utf-8，那么就不會出現(xiàn)中文亂碼的問題了。

出現(xiàn)了中文亂碼該怎么辦呢？通常的解決辦法是用escape()對發(fā)送的數(shù)據(jù)進(jìn)行編碼，然后在返回的responseText上再用unescape()進(jìn)行解碼。然而在JavaScript編程中通常不推薦使用escape()和unescape()，而推薦使用encodeURI()和decodeURI()。請看下面的“表單驗證實例”，或許對你學(xué)習(xí)編碼知識有一定的幫助。

***、jQuery的load(url,[data],[callback])方法

語法說明：url為異步請求的地址，data用來向服務(wù)器傳送請求數(shù)據(jù)，為可選參數(shù)。一旦data參數(shù)啟用，整個請求過程將以post的方式進(jìn)行，否則默認(rèn)為get方式。如果希望在get方式下也傳遞數(shù)據(jù)，可以在url地址后面用類似“dataname1=data1&dataName2=data2”的方法。

callback為Ajax加載成功后運行的回調(diào)函數(shù)。另外使用load()方法返回的數(shù)據(jù)，不再需要考慮是文本還是XML，jQuery都會自動進(jìn)行處理。好了，下面馬上使用load()方法實現(xiàn)“自動表單驗證”實例。首先是，html框架，5個例子都是一樣的，如下：

<form>   用戶昵稱:<input type="text" onblur="startCheck(this)" name="User" id="User"><span id="UserResult"></span><br />   輸入密碼:<input type="password" name="passwd1"><br />   確認(rèn)密碼:</td><td><input type="password" name="passwd2"><br />   <input type="submit" value="注冊" class="button">   <input type="reset" value="重置" class="button">   </form>

必要說明：

1、onblur="startCheck(this)" 這是JavaScript代碼(簡稱js) ，意思是text文本框失去焦點時觸發(fā)自定義函數(shù)startCheck(),this是指代text文本框的值。

2、<span id="UserResult"></span>用來存放異步對象返回的結(jié)果。

jQuery代碼如下：   <script language="javascript" src="jquery.min.js"></script>   <script language="javascript">   function startCheck(oInput){       //首先判斷是否有輸入，沒有輸入直接返回，并提示       if(!oInput.value){           oInput.focus(); //聚焦到用戶名的輸入框           document.getElementById("UserResult").innerHTML = "User cannot be empty.";           return;       }       oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格       var sUrl = "action.asp?user=" + oInput;       sUrl=encodeURI(sUrl); //使用encodeURI()編碼，解決中文亂碼問題       $("#UserResult").load(sUrl,function(data){           $("#UserResult").html(decodeURI(data)); //使用decodeURI()解碼           }       );   }   </script>

必要說明：

1、使用jQuery時，都必須加載jquery.min.js文件，可以到http://jquery.com/官網(wǎng)下載***的版本。

2、判斷是否有輸入時，用的全是JavaScript語法。

3、對傳遞給“處理頁”的參數(shù)進(jìn)行encodeURI編碼，以解決中文亂碼問題。

4、load()中的function函數(shù)是為了對返回結(jié)果進(jìn)行decodeURI解碼，以解決中文亂碼問題。

5、對$.trim()、$("#UserResult")、html等jQuery語法不理解的，可以參考jQuery中文手冊。本站提供下載。

action.asp處理頁代碼如下：   <%   if(Request("user")="eko") then   Response.Write "Sorry, " & Request("user") & " already exists."   else   Response.Write Request("user")&" is ok."   end if   %>

必要說明：

1、action.asp處理頁的編碼是GB2312，如果把"Sorry..already exists..is ik"等英文改為中文，請看下面的說明。

2、使用post方法會出現(xiàn)亂碼，這是由于異步對象XMLHttpRequest在處理返回的responseText的時候，是按UTF-8編碼進(jìn)行解碼的。

3、所以post方式的話，必須把a(bǔ)ction.asp頁另存為時，第三項的編碼由 ANST 改為 UTF-8 (請務(wù)必記住!!)。

第二、使用$.get(url,[data],[callback])和$.post(url,[data],[callback])方法

語法說明：盡管load()方法可以實現(xiàn)get和post兩種方式，但很多時候開發(fā)者還是希望能夠指定發(fā)送方式，并且處理服務(wù)器返回的值。jQuery提供了$.get()和$.post()兩種方法，分別針對這兩種請求方式。

其中，url為請求地址，data為請求數(shù)據(jù)的列表，是可選參數(shù)，callback為請求成功后的回調(diào)函數(shù)，該函數(shù)接受兩個參數(shù)，***個參數(shù)為服務(wù)器返回的數(shù)據(jù)，第二個參數(shù)為服務(wù)器的狀態(tài)，是可選參數(shù)。$.post()中的type為請求數(shù)據(jù)的類型，可以是html、xml、json等。 “可自動校驗表單實例”的jQuery代碼如下，html如上所述。

<script language="javascript" src="jquery.min.js"></script>   <script language="javascript">   function createQueryString(){       var username=$("#User").val();       //組合成對象的形式       var queryString={user:username};       return queryString;       }   function startCheck(oInput){       //首先判斷是否有輸入，沒有輸入直接返回，并提示       if(!oInput.value){           oInput.focus(); //聚焦到用戶名的輸入框           document.getElementById("UserResult").innerHTML = "User cannot be empty.";           return;       }       oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格       $.get("action.asp",createQueryString(),           function(data){               $("#UserResult").html(data);       });   }   </script>

必要說明：

1、對$.trim()、$("#UserResult")、html、val()等jQuery語法不理解的，可以參考jQuery中文手冊。本站提供下載。

2、自定義函數(shù)createQueryString()，是對傳入“處理頁”的參數(shù)，進(jìn)行處理。一種常規(guī)的方法。

3、因為是以get方式處理，說明這里不需要進(jìn)行編碼和解碼。下面以post方式處理，則需要編碼和解碼了，代碼如下

function createQueryString(){       //使用encodeURI()編碼解決中文亂碼問題       var username=encodeURI($("#User").val());       //組合成對象的形式       var queryString={user:username};       return queryString;       }   function startCheck(oInput){       //首先判斷是否有輸入，沒有輸入直接返回，并提示       if(!oInput.value){           oInput.focus(); //聚焦到用戶名的輸入框           document.getElementById("UserResult").innerHTML = "User cannot be empty.";           return;       }       oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格       $.post("action.asp",createQueryString(),           function(data){               $("#UserResult").html(decodeURI(data));       });   }   </script>

第三、使用$.ajax()方法

語法說明：盡管load()、$.get()和$.post()非常方便實用，但卻不能控制錯誤和很多交互的細(xì)節(jié)，可以說這3種方法對Ajax的可控性較差。jQuery提供了一個強(qiáng)大的函數(shù)$.ajax(options)來設(shè)置Ajax訪問服務(wù)器的各個細(xì)節(jié)，它的語法十分簡單，就是設(shè)置Ajax的各個選項，然后指定相應(yīng)的值?！翱勺詣有ｒ灡韱巍睂嵗a如下：

<script language="javascript" src="jquery.min.js"></script>   <script language="javascript">   function createQueryString(){       //使用encodeURI()編碼解決中文亂碼問題       var username=encodeURI($("#User").val());       //組合成對象的形式       var queryString={user:username};       return queryString;   }   function startCheck(oInput){       //首先判斷是否有輸入，沒有輸入直接返回，并提示       if(!oInput.value){       oInput.focus(); //聚焦到用戶名的輸入框       document.getElementById("UserResult").innerHTML = "User cannot be empty.";       return;       }       oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格       $.ajax({           type: "GET",           url: "action.asp",           data: createQueryString(),           success: function(data){               $("#UserResult").html(decodeURI(data));           }       });   }   </script>

必要說明：

1、代碼基本同上，只是$.ajax(options)稍有不同，對于其參數(shù)不理解可以參考jQuery中文手冊。

2、給個建議，無論是get方式還是post方式，都習(xí)慣進(jìn)行編碼，以防出現(xiàn)中文亂碼的問題。

3、再強(qiáng)調(diào)一下，無論使用哪種程序，如果遇到問題了，都可以參考相關(guān)的手冊說明，這是建站所必需的。

上面的實例使用了jQuery的load()方法、$.get()、$.post()、$.ajax()的4種方法，都要考慮中文亂碼的問題，下面推薦一個方法，進(jìn)一步簡化jQuery代碼，呵呵。

第四、表單插件

表單插件（Form Plugin）是一款功能非常強(qiáng)大的插件，在jQuery官方網(wǎng)站上目前為4***推薦，下載后為jquery.form.js文件。該插件提供獲取表單數(shù)據(jù)、重置表單項目、使用Ajax提交數(shù)據(jù)等一系列功能，深受開發(fā)人員的喜愛。使用表單插件，再次重寫“表單校驗實例”，完整代碼如下：

<form id="myform" action="action.asp">   用戶昵稱:<input type="text" onblur="startCheck(this)" name="User" id="User"><input type="button" value="檢 查" class="button"><span id="UserResult"></span><br />   輸入密碼:<input type="password" name="passwd1"><br />   確認(rèn)密碼:</td><td><input type="password" name="passwd2"><br /><br />   <input type="submit" value="注冊" class="button"><input type="reset" value="重置" class="button">   </form>

HTML框架加了一個“檢查”的按鈕(使用手動校驗的方法)，jQuery如下：

<script language="javascript" src="jquery.min.js"></script>   <script language="javascript" src="jquery.form.js"></script>   <script language="javascript">   function startCheck(oInput){       //首先判斷是否有輸入，沒有輸入直接返回，并提示       if(!oInput.value){           oInput.focus(); //聚焦到用戶名的輸入框           document.getElementById("UserResult").innerHTML = "User cannot be empty.";           return;       }   }   $(function(){       $("input[type=button]").click(function(){           var options={               target: "#UserResult"           };           //表單的Ajax化           $("#myform").ajaxSubmit(options);       });   });   </script>

必要說明：
 
1、使用表單插件，必須加載jquery.form.js文件。
 
2、按Ajax方式提交數(shù)據(jù)，可以使用表單插件的ajaxSubmit(options)來按照Ajax的方式直接提交表單或者使用ajaxform(options)方法，通常在頁面加載完成時執(zhí)行，用來將表單統(tǒng)一Ajax化，并且提交表單依然使用傳統(tǒng)的submit按鈕，只不過進(jìn)行的是Ajax提交。其中參數(shù)options與$.ajax(options)的參數(shù)基本相同。

感謝各位的閱讀，以上就是“如何用jQuery重寫表單驗證”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何用jQuery重寫表單驗證這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

文章名稱：如何用jQuery重寫表單驗證
瀏覽地址：http://www.rwnh.cn/article12/pgsogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、搜索引擎優(yōu)化、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、全網(wǎng)營銷推廣、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)