快捷導(dǎo)航

JavaScript使用表單元素驗(yàn)證表單的示例代碼

更新時(shí)間：2019年08月20日 09:44:37 作者：小明1996

這篇文章主要介紹了JavaScript使用表單元素驗(yàn)證表單的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

JavaScript的主要作用:驗(yàn)證表單

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

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

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

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>簡(jiǎn)單列表的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="注冊(cè)" />
    </form>
  </body>
</html>

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

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

例子:

注冊(cè)事件

<!DOCTYPE html>
<html>
  <!--綁定驗(yàn)證功能，注冊(cè)事件-->
  <head>
    <meta charset="utf-8">
    <title>簡(jiǎn)單列表的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="注冊(cè)"
       onclick="return eg.regCheck();"/>    
    </form>
    <script >
      //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用
      var eg = {};
      eg.regCheck = function(){
        
      }
    </script>
  </body>
</html>

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

例子:

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

<!DOCTYPE html>
<html>
  <!--給表單添加驗(yàn)證功能-->
  <head>
    <meta charset="utf-8">
    <title>簡(jiǎn)單列表的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="注冊(cè)"
      onclick="return eg.regCheck();"/>
    </form>
    <script >
      //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用
      //定義一個(gè)公共函數(shù)來(lái)獲取指定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就會(huì)阻止表單form提交
          return false;
        }
        if(upwd.value == ''){
          alert('密碼不能為空!');
          //返回false就會(huì)阻止表單form提交
          return false;
        }
        if(upwd.value != upwd2.value){
          alert('兩次輸入密碼不相同!');
          //返回false就會(huì)阻止表單form提交
          return false;
        }
        return true;
      };
    </script>
  </body>
</html>

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

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

例子:

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

<!DOCTYPE html>
<html>
<!--
綁定驗(yàn)證的另一種方式,form表單綁定驗(yàn)證完整示例
-->
  <head>
    <meta charset="utf-8">
    <title>簡(jiǎn)單列表的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="注冊(cè)"
       />
    </form>
    <script>
      //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用
      //定義一個(gè)公共函數(shù)來(lái)獲取指定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就會(huì)阻止表單form提交
          return false;
        }
        if(upwd.value == ''){
          alert('密碼不能為空!');
          //返回false就會(huì)阻止表單form提交
          return false;
        }
        if(upwd.value != upwd2.value){
          alert('兩次輸入密碼不相同!');
          //返回false就會(huì)阻止表單form提交
          return false;
        }
        return true;

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

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

2.1，input,textarea,hidden和button

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

例子:

處理各種類型表單一

<!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/>
      簡(jiǎn)介:
        <textarea name="" rows="4" cols="18" id="about">
        </textarea><br/><br/>
      <input type="submit"
      value="注冊(cè)" id="regBtn"
       />
      <input type="button" value="解鎖" onclick="eg.unlock"
      style="display: none;" id="regUnlock">
    </form>
    <script>
      //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用
      //定義一個(gè)公共函數(shù)來(lái)獲取指定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("簡(jiǎn)介太長(zhǎng)!");
          eg.err();
          return false;

        }
        //返回true就會(huì)提交表單
        return true;

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

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

2.2checkbox,radio和select

知道用戶性別,年齡,興趣愛(ài)好

例子:

處理各種類型表單二

<!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/>
      簡(jiǎn)介:
        <textarea name="" rows="4" cols="18" id="about">
        </textarea><br/><br/>
      <input type="submit"
      value="注冊(cè)" id="regBtn"
       />
      <input type="button" value="解鎖" onclick="eg.unlock"
      style="display: none;" id="regUnlock">
    </form>
    <script>
      //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用
      //定義一個(gè)公共函數(shù)來(lái)獲取指定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("簡(jiǎn)介太長(zhǎng)!");
          eg.err();
          return false;

        }
        //返回true就會(huì)提交表單
        return true;

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: