溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能

發(fā)布時(shí)間：2021-05-21 14:06:43 來(lái)源：億速云 閱讀：260 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

5.1.5 表單驗(yàn)證

      表單作為 HTML 最重要的一個(gè)組成部分，幾乎在每個(gè)網(wǎng)頁(yè)上都有體現(xiàn)，例如用戶提交信息、用戶反饋信息和用戶查詢信息等，因此它是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。在表單中，表單驗(yàn)證的作用也是非常重要的，它能使表單更加靈活、美觀和豐富。

      以一個(gè)簡(jiǎn)單的用戶注冊(cè)為例。首先新建一個(gè)表單， HTML 代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>jQueryStudy</title>
 <style type="text/css">
 .int{ height: 30px; text-align: left; width: 600px; }
 label{ width: 200px; margin-left: 20px; }
 .high{ color: red; }
 .msg{ font-size: 13px; }
 .onError{ color: red; }
 .onSuccess{ color: green; }
 </style>
 <script type="text/javascript" src="jquery-1.10.2.js"></script> 
</head>
<body>
 <form method="post" action="">
 <div class="int">
  <label for="name">名稱：</label>
  <input type="text" id="name" class="required" />
 </div>
 <div class="int">
  <label for="email">郵箱：</label>
  <input type="text" id="email" class="required" />
 </div>
 <div class="int">
  <label for="address">地址：</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="int">
  <input type="submit" value="提交" id="send"  />
  <input type="reset" value="重置" id="res" />
 </div>
 </form>
 <script type="text/javascript"></script>
</body>
</html>

      顯示效果如圖 1 所示。

如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能

                             圖 1 表單初始化

     在表單內(nèi) class 屬性為 “required” 的文本框是必須填寫(xiě)的，因此需要將它與其他的非必須填寫(xiě)的表單元素加以區(qū)別，即在文本框后面追加一個(gè)紅色的星號(hào)標(biāo)識(shí)?？梢允褂?append() 方法來(lái)完成，代碼如下：

<script type="text/javascript">
 //為表單的必填文本框添加提示信息（選擇form中的所有后代input元素）
 $("form :input.required").each(function () {
 //創(chuàng)建元素
 var $required = $("<strong class='high'>*</strong>");
 //將它追加到文檔中
 $(this).parent().append($required);
 });
</script>

      顯示效果如圖 2 所示。

如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能

                           圖 2 用小紅星標(biāo)識(shí)

      用戶在“名稱”文本框中填寫(xiě)完信息后，將光標(biāo)的焦點(diǎn)從“名稱”文本框中移出時(shí)，需要即時(shí)判斷名稱是否符合驗(yàn)證規(guī)則。當(dāng)光標(biāo)的焦點(diǎn)從“郵箱”文本框移出時(shí)，也需要即時(shí)判斷“郵箱”填寫(xiě)是否正確，因此需要給表單元素添加失去焦點(diǎn)事件，即 blur 事件。 jQuery 代碼如下：

<script type="text/javascript">
 //為表單的元素添加失去焦點(diǎn)事件
 $("form :input").blur(function () {
 // ...省略代碼
 });
</script>

      驗(yàn)證表單元素步驟如下。

     （1）判斷當(dāng)前失去焦點(diǎn)的元素是“名稱”還是“郵箱”，然后分別處理。   

     （2）如果是“名稱”，判斷元素的值的長(zhǎng)度是否小于 6 ，如果小于 6 ，則用紅色字體提醒用戶輸入不正確，反之，則用綠色提醒用戶輸入正確。

     （3）如果是“郵箱”，判斷元素的值是否符合郵箱的格式，如果不符合，則用紅色字體提醒用戶輸入不正確，反之，則用綠色字體提醒用戶輸入正確。   

     （4）將提醒信息追加到當(dāng)前的父元素的最后。   

      【注】：為了使用方便，當(dāng) text 文本框中的內(nèi)容格式錯(cuò)誤時(shí)，程序應(yīng)盡量把所有提示都顯示出來(lái)，而不是每次驗(yàn)證一種格式后只與之相關(guān)的錯(cuò)誤提醒信息。

       根據(jù)以上分析，可以寫(xiě)出如下 jQuery 代碼：

<script type="text/javascript">
 //為表單的必填文本框添加提示信息（選擇form中的所有后代input元素）
 $("form :input.required").each(function () {
 //創(chuàng)建元素
 var $required = $("<strong class='high'>*</strong>");
 //將它追加到文檔中
 $(this).parent().append($required);
 });
 //為表單元素添加失去焦點(diǎn)事件
 $("form :input").blur(function(){
 var $parent = $(this).parent();
 //驗(yàn)證名稱
 if($(this).is("#name")){
  if($.trim(this.value) == "" || $.trim(this.value).length < 6){
  var errorMsg = " 請(qǐng)輸入至少6位的名稱！";
  //class='msg onError' 中間的空格是層疊樣式的格式
  $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  }
  else{
  var okMsg=" 輸入正確";
  $parent.find(".high").remove();
  $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }
 }
 //驗(yàn)證郵箱
 if($(this).is("#email")){
  if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
  var errorMsg = " 請(qǐng)輸入正確的E-Mail地址！";
  $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  }
  else{
  var okMsg=" 輸入正確";
  $parent.find(".high").remove();
  $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }
 }
 });
</script>

      當(dāng)連續(xù)幾次輸入錯(cuò)誤的格式后，會(huì)出現(xiàn)如圖 3 所示的效果

如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能

                                    圖 3 操作多次的提示效果

      由于每次在元素失去焦點(diǎn)后，都會(huì)創(chuàng)建一個(gè)新的提醒元素，然后將它追加到文檔中，最后就出現(xiàn)了多次的提醒信息。因此，需要在創(chuàng)建提醒元素之前，將當(dāng)前元素以前的提醒元素都刪除?？梢允褂?remove() 方法來(lái)完成，代碼如下： 

//為表單元素添加失去焦點(diǎn)事件
$("form :input").blur(function(){ 
 var $parent = $(this).parent();
 $parent.find(".msg").remove(); //刪除以前的提醒元素
 // ...省略代碼
});

      顯示效果如圖 4 所示。

如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能

                               圖 4 正確的效果

      當(dāng)鼠標(biāo)在表單元素中多次失去焦點(diǎn)時(shí)，都可以提醒用戶填寫(xiě)是否正確。但是，如果用戶無(wú)視錯(cuò)誤提醒，執(zhí)意要單擊“提交”按鈕時(shí)，為了使表單填寫(xiě)準(zhǔn)確，在表單提交之前，需要對(duì)表單的必須填寫(xiě)元素進(jìn)行一次整體的驗(yàn)證?？梢灾苯佑?trigger() 方法來(lái)觸發(fā)blur事件，從而達(dá)到驗(yàn)證效果。如果填寫(xiě)錯(cuò)誤，就會(huì)以紅色提醒用戶；如果名稱和郵箱都不符合規(guī)則，那么就有兩處錯(cuò)誤，即有兩個(gè) class 為 “onError” 的元素，因此可以根據(jù) class 為 “onError” 元素的長(zhǎng)度來(lái)判斷是否可以提交。如果長(zhǎng)度為 0 ，即 true ，說(shuō)明已經(jīng)可以提交了；如果長(zhǎng)度大于0，即 false ，說(shuō)明有錯(cuò)誤，需要阻止表單提交。阻止表單提交可以直接用 “return false” 語(yǔ)句。     

      根據(jù)上面的分析，可以在提交事件中寫(xiě)出如下jQuery代碼： 

//點(diǎn)擊重置按鈕時(shí)，觸發(fā)文本框的失去焦點(diǎn)事件
$("#send").click(function(){
 //trigger 事件執(zhí)行完后，瀏覽器會(huì)為submit按鈕獲得焦點(diǎn)
 $("form .required:input").trigger("blur"); 
 var numError = $("form .onError").length;
 if(numError){
 return false;
 }
 alert("注冊(cè)成功，密碼已發(fā)到你的郵箱");
});

      顯示效果如圖 5 所示。

如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能

                          圖 5 正確提交

      用戶也許會(huì)提出：為什么每次都要等字段元素失去焦點(diǎn)后，才提醒是否正確？如果輸入時(shí)就可以提醒，這樣就可以更加即時(shí)了。

      為了達(dá)到用戶提出的需求，需要給表單元素綁定 keyup 事件和 focus 事件，keyup 事件能在用戶每次松開(kāi)按鍵時(shí)觸發(fā)，實(shí)現(xiàn)即時(shí)提醒；focus 事件能在元素得到焦點(diǎn)的時(shí)候觸發(fā)，也可以實(shí)現(xiàn)即時(shí)提醒。

      代碼如下：

$("form :input").blur(function(){ 
 //失去焦點(diǎn)處理函數(shù)
 //代碼省略...
}).keyup(function(){
 //triggerHandler 防止事件執(zhí)行完后，瀏覽器自動(dòng)為標(biāo)簽獲得焦點(diǎn)
 $(this).triggerHandler("blur"); 
}).focus(function(){
 $(this).triggerHandler("blur");
});

      這樣當(dāng)用戶將光標(biāo)定位到文本框上和改變文本框的值時(shí)，表單就會(huì)即時(shí)提醒用戶填寫(xiě)是否正確，從而符合了用戶的需求。     

      在前面的章節(jié)已經(jīng)提過(guò)，trigger（“blur”）不僅會(huì)觸發(fā)為元素綁定的blur事件，也會(huì)觸發(fā)瀏覽器默認(rèn)的 blur 事件，即不能講光標(biāo)定位到文本框上。而 triggerHandler（“blur”）只會(huì)觸發(fā)為元素綁定的 blur 事件，而不觸發(fā)瀏覽器默認(rèn)的 blur 事件。     

      至此，表單驗(yàn)證過(guò)程就全部完成。讀者可以根據(jù)自己的實(shí)際需求修改驗(yàn)證規(guī)則。

     【注】：客戶端的驗(yàn)證僅用于提升用戶的操作體驗(yàn)，而服務(wù)器仍需對(duì)用戶輸入的數(shù)據(jù)的合法性進(jìn)行校驗(yàn)。對(duì)于禁用了腳本的用戶和用戶自制的網(wǎng)頁(yè)提交操作，必須在服務(wù)器端驗(yàn)證。

完整代碼：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>jQueryStudy</title>
 <style type="text/css">
 .int{ height: 30px; text-align: left; width: 600px; }
 label{ width: 200px; margin-left: 20px; }
 .high{ color: red; }
 .msg{ font-size: 13px; }
 .onError{ color: red; }
 .onSuccess{ color: green; }
 </style>
 <script type="text/javascript" src="jquery-1.10.2.js"></script> 
</head>
<body>
 <form method="post" action="">
 <div class="int">
  <label for="name">名稱：</label>
  <input type="text" id="name" class="required" />
 </div>
 <div class="int">
  <label for="email">郵箱：</label>
  <input type="text" id="email" class="required" />
 </div>
 <div class="int">
  <label for="address">地址：</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="int">
  <input type="submit" value="提交" id="send"  />
  <input type="reset" value="重置" id="res" />
 </div>
 </form>
 <script type="text/javascript">
 $(document).ready(function(){
 //為表單的必填文本框添加提示信息（選擇form中的所有后代input元素）
 $("form :input.required").each(function(){ 
  //創(chuàng)建元素
  var $required = $("<strong class='high'>*</strong>");
  //將它追加到文檔中
  $(this).parent().append($required);
 });
 //為表單的必填文本框添加相關(guān)事件（blur、focus、keyup）
 $("form :input").blur(function(){
  //注意：這里的this是DOM對(duì)象，$(this)才是jQuery對(duì)象
  var $parent = $(this).parent();
  //刪除之前的錯(cuò)誤提醒信息
  $parent.find(".msg").remove();
  //驗(yàn)證“名稱”
  if($(this).is("#name")){
  //運(yùn)用jQuery中的$.trim()方法，去掉首位空格
  if($.trim(this.value) == "" || $.trim(this.value).length < 6){
   var errorMsg = " 請(qǐng)輸入至少6位的名稱！";
   //class='msg onError' 中間的空格是層疊樣式的格式
   $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
  }
  else{
   var okMsg=" 輸入正確";
   $parent.find(".high").remove();
   $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }  
  }
  //驗(yàn)證郵箱
  if($(this).is("#email")){
  if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
   var errorMsg = "請(qǐng)輸入正確的E-Mail地址！";
   $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  }
  else{
   var okMsg=" 輸入正確";
   $parent.find(".high").remove();
   $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }
  }
 }).keyup(function(){
  //triggerHandler 防止事件執(zhí)行完后，瀏覽器自動(dòng)為標(biāo)簽獲得焦點(diǎn)
  $(this).triggerHandler("blur");
 }).focus(function(){
  $(this).triggerHandler("blur");
 });
 //點(diǎn)擊重置按鈕時(shí)，觸發(fā)文本框的失去焦點(diǎn)事件
 $("#send").click(function(){
  //trigger 事件執(zhí)行完后，瀏覽器會(huì)為submit按鈕獲得焦點(diǎn)
  $("form .required:input").trigger("blur"); 
  var numError = $("form .onError").length;
  if(numError){
  return false;
  }
  alert("注冊(cè)成功，密碼已發(fā)到你的郵箱");
 });
 });
 </script>
</body>
</html>

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，它具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫(huà)，以便快速開(kāi)發(fā)網(wǎng)站。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用jQuery實(shí)現(xiàn)表單驗(yàn)證功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手