日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
5種方法教你用jQuery重寫表單驗(yàn)證

前面我們?cè)榻B過使用jQuery技巧來(lái)提高代碼質(zhì)量，因?yàn)閖Query非常容易上手并使用簡(jiǎn)單。重寫表單驗(yàn)證是程序員們經(jīng)常做的事情，使用jQuery我們有五種方法可以選擇，同時(shí)也能夠解決亂碼的問題。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括巴林左旗網(wǎng)站建設(shè)、巴林左旗網(wǎng)站制作、巴林左旗網(wǎng)頁(yè)制作以及巴林左旗網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，巴林左旗網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到巴林左旗省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

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

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

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

 
 
 
    
  
  
  
  1.    
    2.   
  
  
  2. 用戶昵稱:   
    3.   
  
  
  3. 輸入密碼:   
    4.   
  
  
  4. 確認(rèn)密碼:   
    5.   
  
  
  5.    
    6.   
  
  
  6.    
    7.   
  
  
  7.   
    8.

必要說明：

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

2、用來(lái)存放異步對(duì)象返回的結(jié)果。

 
 
 
    
  
  
  
  1. jQuery代碼如下：  
    2.   
  
  
  2.  
    3.   
  
  
  3.    
    4.   
  
  
  4.   
    5.

必要說明：

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

2、判斷是否有輸入時(shí)，用的全是JavaScript語(yǔ)法。

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

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

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

 
 
 
    
  
  
  
  1. action.asp處理頁(yè)代碼如下：  
    2.   
  
  
  2.  
    3.   
  
  
  3. <%   
    4.   
  
  
  4. if(Request("user")="eko") then   
    5.   
  
  
  5. Response.Write "Sorry, " & Request("user") & " already exists."   
    6.   
  
  
  6. else   
    7.   
  
  
  7. Response.Write Request("user")&" is ok."   
    8.   
  
  
  8. end if   
    9.   
  
  
  9. %> 
    10.

必要說明：

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

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

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

#p#

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

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

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

 
 
 
    
  
  
  
  1.    
    2.   
  
  
  2.  
    3.

必要說明：

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

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

3、因?yàn)槭且詆et方式處理，說明這里不需要進(jìn)行編碼和解碼。下面以post方式處理，則需要編碼和解碼了，代碼如下

 
 
 
    
  
  
  
  1. function createQueryString(){   
    2.   
  
  
  2.     //使用encodeURI()編碼解決中文亂碼問題   
    3.   
  
  
  3.     var username=encodeURI($("#User").val());   
    4.   
  
  
  4.     //組合成對(duì)象的形式   
    5.   
  
  
  5.     var queryString={user:username};   
    6.   
  
  
  6.     return queryString;   
    7.   
  
  
  7.     }   
    8.   
  
  
  8. function startCheck(oInput){   
    9.   
  
  
  9.     //首先判斷是否有輸入，沒有輸入直接返回，并提示   
    10.   
  
  
  10.     if(!oInput.value){   
    11.   
  
  
  11.         oInput.focus(); //聚焦到用戶名的輸入框   
    12.   
  
  
  12.         document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
    13.   
  
  
  13.         return;   
    14.   
  
  
  14.     }   
    15.   
  
  
  15.     oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格   
    16.   
  
  
  16.     $.post("action.asp",createQueryString(),   
    17.   
  
  
  17.         function(data){   
    18.   
  
  
  18.             $("#UserResult").html(decodeURI(data));   
    19.   
  
  
  19.     });   
    20.   
  
  
  20. }   
    21.   
  
  
  21.  
    22.

#p#

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

語(yǔ)法說明：盡管load()、$.get()和$.post()非常方便實(shí)用，但卻不能控制錯(cuò)誤和很多交互的細(xì)節(jié)，可以說這3種方法對(duì)Ajax的可控性較差。jQuery提供了一個(gè)強(qiáng)大的函數(shù)$.ajax(options)來(lái)設(shè)置Ajax訪問服務(wù)器的各個(gè)細(xì)節(jié)，它的語(yǔ)法十分簡(jiǎn)單，就是設(shè)置Ajax的各個(gè)選項(xiàng)，然后指定相應(yīng)的值?！翱勺詣?dòng)校驗(yàn)表單”實(shí)例代碼如下：

 
 
 
    
  
  
  
  1.    
    2.   
  
  
  2.  
    3.

必要說明：

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

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

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

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

#p#

第四、表單插件

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

 
 
 
    
  
  
  
  1.    
    2.   
  
  
  2. 用戶昵稱:   
    3.   
  
  
  3. 輸入密碼:   
    4.   
  
  
  4. 確認(rèn)密碼:   
    5.   
  
  
  5.    
    6.   
  
  
  6.  
    7.

HTML框架加了一個(gè)“檢查”的按鈕(使用手動(dòng)校驗(yàn)的方法)，jQuery如下：

 
 
 
    
  
  
  
  1.    
    2.   
  
  
  2.    
    3.   
  
  
  3.  
    4.

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

文章轉(zhuǎn)自qibaiyilang的博客，

原文地址：http://hi.baidu.com/qibaiyilang/blog/item/8a65ef54e69b0858574e0058.html


網(wǎng)站標(biāo)題：5種方法教你用jQuery重寫表單驗(yàn)證
轉(zhuǎn)載來(lái)于：http://www.5511xx.com/article/cosjshc.html