溫馨提示×

溫馨提示×

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

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

如何在JavaScript中使用表單元素驗(yàn)證表單

發(fā)布時(shí)間：2021-03-24 15:15:17 來源：億速云 閱讀：154 作者：Leah 欄目：web開發(fā)

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

1最簡單的表單驗(yàn)證-禁止空白的必填項(xiàng)目

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

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

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>簡單列表的html結(jié)構(gòu)</title>
  </head>
  <body>
    <form method="post" action="">
      賬戶:<input type="text" name=""/><br/><br/>
      密碼:<input type="password" name=""/><br/><br/>
      確認(rèn):<input type="password" name=""/><br/><br/>
      <input type="submit" value="注冊" />
    </form>
  </body>
</html>

1.2綁定驗(yàn)證功能

因?yàn)橛脩糇詈笠c(diǎn)擊"注冊"按鈕,所以我們就在"注冊"按鈕上添加一個(gè)onclick事件屬性,引用eg.regCheck()

例子:

注冊事件

<!DOCTYPE html>
<html>
  <!--綁定驗(yàn)證功能，注冊事件-->
  <head>
    <meta charset="utf-8">
    <title>簡單列表的html結(jié)構(gòu)</title>
  </head>
  <body>
    <form method="post" action="">
      賬戶:<input type="text" name=""/><br/><br/>
      密碼:<input type="password" name=""/><br/><br/>
      確認(rèn):<input type="password" name=""/><br/><br/>
      <input type="submit" 
      value="注冊"
       onclick="return eg.regCheck();"/>    
    </form>
    <script >
      //聲明一個(gè)對象,當(dāng)做命名空間來使用
      var eg = {};
      eg.regCheck = function(){
        
      }
    </script>
  </body>
</html>

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

例子:

給表單添加驗(yàn)證功能

<!DOCTYPE html>
<html>
  <!--給表單添加驗(yàn)證功能-->
  <head>
    <meta charset="utf-8">
    <title>簡單列表的html結(jié)構(gòu)</title>
  </head>
  <body>
    <form method="post" action="">
      賬戶:<input type="text" name="" id="userid"/><br/><br/>
      密碼:<input type="password" name="" id="userpwd"/><br/><br/>
      確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/>
      <input type="submit" 
      value="注冊"
      onclick="return eg.regCheck();"/>
    </form>
    <script >
      //聲明一個(gè)對象,當(dāng)做命名空間來使用
      //定義一個(gè)公共函數(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;
      };
    </script>
  </body>
</html>

1.3綁定驗(yàn)證的另一種方式

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

例子:

form表單綁定驗(yàn)證完整范例

<!DOCTYPE html>
<html>
<!--
綁定驗(yàn)證的另一種方式,form表單綁定驗(yàn)證完整示例
-->
  <head>
    <meta charset="utf-8">
    <title>簡單列表的html結(jié)構(gòu)</title>
  </head>
  <body>
    <form method="post" action="" onsubmit="return eg.regCheck();">
      賬戶:<input type="text" name="" id="userid"/><br/><br/>
      密碼:<input type="password" name="" id="userpwd"/><br/><br/>
      確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/>
      <input type="submit" 
      value="注冊"
       />
    </form>
    <script>
      //聲明一個(gè)對象,當(dāng)做命名空間來使用
      //定義一個(gè)公共函數(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;

      };
    </script>
  </body>
</html>

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

2.1，input,textarea,hidden和button

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

例子:

處理各種類型表單一

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>處理各種類型表單一</title>
  </head>
  <body>
    <form method="post" action="" onsubmit="return eg.regCheck();">
      賬戶:<input type="text" name="" id="userid"/><br/><br/>
      密碼:<input type="password" name="" id="userpwd"/><br/><br/>
      確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/>
      簡介:
        <textarea name="" rows="4" cols="18" id="about">
        </textarea><br/><br/>
      <input type="submit"
      value="注冊" id="regBtn"
       />
      <input type="button" value="解鎖" onclick="eg.unlock"
       id="regUnlock">
    </form>
    <script>
      //聲明一個(gè)對象,當(dāng)做命名空間來使用
      //定義一個(gè)公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復(fù)用率
      var eg = {};
      eg.$ = function(id){
        return document.getElementById(id);
        };
      //主要的驗(yàn)證方法
      eg.regCheck = function () {
        var uid = eg.$("userid");
        var upwd = eg.$("userpwd");
        var upwd2 = eg.$("userpwd2");
        //value是元素自帶屬性
        if(uid.value == ''){
          alert('賬戶不能為空!');
          eg.err();
          return false;
        }
        if(upwd.value == ''){
          alert('密碼不能為空!');
          eg.err();
          return false;
        }
        if(upwd.value != upwd2.value){
          alert('兩次輸入密碼不相同!');
          eg.err();
          return false;
        }
        //新增部分
        var about = eg.$("about");
        //value是字符串類型的屬性
        if (about.value.length>60){
          alert("簡介太長!");
          eg.err();
          return false;

        }
        //返回true就會提交表單
        return true;

      };
      //出錯時(shí)記錄錯誤次數(shù)
      eg.err = function () {
        var el = eg.$("errnum");
        var old = el.value;
        //把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來
        el.value = parseInt(old)+1;
        //用來檢查是否應(yīng)該鎖定
        eg.lock();
      };
      //通過次數(shù)判斷是否要鎖定
      eg.lock = function(){
        var err = eg.$("errnum");
        if (parseInt(err.value)>2){
          eg.$("regBtn").disabled = true;
          //根據(jù)業(yè)務(wù)需求,輸錯3次就鎖定
          eg.$("regUnlock").style.display="block";
          //同時(shí)顯示解鎖按鈕
        }
      };
      eg.unlock = function(){
        eg.$("regBtn").disabled = false;
        //根據(jù)業(yè)務(wù)需求，解鎖就是讓用戶可以重新注冊
        eg.$("regUnlock").style.display="none";
        //元素所有樣式都掛載到style屬性下
      }
    </script>
  </body>
</html>

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

2.2checkbox,radio和select

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

例子:

處理各種類型表單二

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>處理各種類型表單二</title>
  </head>
  <body>
    <form method="post" action="" onsubmit="return eg.regCheck();">

      賬戶:<input type="text" name="" id="userid"/><br/><br/>
      密碼:<input type="password" name="" id="userpwd"/><br/><br/>
      確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/>
      簡介:
        <textarea name="" rows="4" cols="18" id="about">
        </textarea><br/><br/>
      <input type="submit"
      value="注冊" id="regBtn"
       />
      <input type="button" value="解鎖" onclick="eg.unlock"
       id="regUnlock">
    </form>
    <script>
      //聲明一個(gè)對象,當(dāng)做命名空間來使用
      //定義一個(gè)公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復(fù)用率
      var eg = {};
      eg.$ = function(id){
        return document.getElementById(id);
        };
      //主要的驗(yàn)證方法
      eg.regCheck = function () {
        var uid = eg.$("userid");
        var upwd = eg.$("userpwd");
        var upwd2 = eg.$("userpwd2");
        //value是元素自帶屬性
        if(uid.value == ''){
          alert('賬戶不能為空!');
          eg.err();
          return false;
        }
        if(upwd.value == ''){
          alert('密碼不能為空!');
          eg.err();
          return false;
        }
        if(upwd.value != upwd2.value){
          alert('兩次輸入密碼不相同!');
          eg.err();
          return false;
        }
        //新增部分
        var about = eg.$("about");
        //value是字符串類型的屬性
        if (about.value.length>60){
          alert("簡介太長!");
          eg.err();
          return false;

        }
        //返回true就會提交表單
        return true;

      };
      //出錯時(shí)記錄錯誤次數(shù)
      eg.err = function () {
        var el = eg.$("errnum");
        var old = el.value;
        //把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來
        el.value = parseInt(old)+1;
        //用來檢查是否應(yīng)該鎖定
        eg.lock();
      };
      //通過次數(shù)判斷是否要鎖定
      eg.lock = function(){
        var err = eg.$("errnum");
        if (parseInt(err.value)>2){
          eg.$("regBtn").disabled = true;
          //根據(jù)業(yè)務(wù)需求,輸錯3次就鎖定
          eg.$("regUnlock").style.display="block";
          //同時(shí)顯示解鎖按鈕
        }
      };
      eg.unlock = function(){
        eg.$("regBtn").disabled = false;
        //根據(jù)業(yè)務(wù)需求，解鎖就是讓用戶可以重新注冊
        eg.$("regUnlock").style.display="none";
        //元素所有樣式都掛載到style屬性下
      }
    </script>
  </body>
</html>

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

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

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

AI
助
手