今天就跟大家聊聊有關(guān)如何在JavaScript中使用表單元素驗證表單，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

秦安ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

1最簡單的表單驗證-禁止空白的必填項目

1.1最簡單的HTML結(jié)構(gòu)

網(wǎng)站最基礎(chǔ)的就是注冊,它是一個系統(tǒng)的交互基礎(chǔ).

例子:

  
    
    
  
  
    
      賬戶:


      密碼:


      確認:


      
    
  

1.2綁定驗證功能

因為用戶最后要去點擊"注冊"按鈕,所以我們就在"注冊"按鈕上添加一個onclick事件屬性,引用eg.regCheck()

例子:

注冊事件

  
  
    
    
  
  
    
      賬戶:


      密碼:


      確認:


          
    
    
      //聲明一個對象,當做命名空間來使用
      var eg = {};
      eg.regCheck = function(){
        
      }
    
  

eg.regCheck()函數(shù)需要添加的行為,獲取用戶輸入的賬戶信息,給input標簽加上一個id屬性,JavaScript再通過這個指定的id去取得相應(yīng)的信息,然后返回驗證結(jié)果true或false

例子:

給表單添加驗證功能

  
  
    
    
  
  
    
      賬戶:


      密碼:


      確認:


      
    
    
      //聲明一個對象,當做命名空間來使用
      //定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復(fù)用率
      var eg = {};
      eg.$ = function(id){
        return document.getElementById(id);
        };
        eg.regCheck = function(){
          var uid = eg.$("userid");
          var upwd = eg.$("userpwd");
          var upwd2 = eg.$("userpwd2");  
        if(uid.value == ''){
          alert('賬戶不能為空!');
          //返回false就會阻止表單form提交
          return false;
        }
        if(upwd.value == ''){
          alert('密碼不能為空!');
          //返回false就會阻止表單form提交
          return false;
        }
        if(upwd.value != upwd2.value){
          alert('兩次輸入密碼不相同!');
          //返回false就會阻止表單form提交
          return false;
        }
        return true;
      };
    
  

1.3綁定驗證的另一種方式

把驗證放在"注冊"按鈕的onclick事件屬性里使用,還有另一種調(diào)用方式,即form標簽的onsubmit事件屬性

例子:

form表單綁定驗證完整范例

  
    
    
  
  
    
      賬戶:


      密碼:


      確認:


      
    
    
  

2,處理各種類型的表單元素

2.1，input,textarea,hidden和button

要求:在注冊表單的基礎(chǔ)上加"簡介"字段，可以為空，但是最長不超過60個字符，同時要統(tǒng)計一下，用戶輸入錯誤的次數(shù)，輸入超過3次，就鎖定"注冊"按鈕,然后要"解鎖"才能重新使用

例子:

處理各種類型表單一

  
    
    
  
  
    
      賬戶:


      密碼:


      確認:


      簡介:
        
        


      
      
    
    
  

現(xiàn)在制作一個錯誤統(tǒng)計,可以為后臺系統(tǒng)保存起來用于分析用戶的錯誤率，甚至可以分析出用戶一般會在哪些字段上出錯。記錄錯誤信息不需要給用戶看到，可以選擇input的type屬性是hidden的元素來存儲

2.2checkbox,radio和select

知道用戶性別,年齡,興趣愛好

例子:

處理各種類型表單二

  
    
    
  
  
    

      賬戶:


      密碼:


      確認:


      簡介:
        
        


      
      
    
    
  

看完上述內(nèi)容，你們對如何在JavaScript中使用表單元素驗證表單有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。