欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript使用表單元素驗證表單的示例代碼

 更新時間：2019年08月20日 09:44:37   作者：小明1996  
這篇文章主要介紹了JavaScript使用表單元素驗證表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

JavaScript的主要作用:驗證表單

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

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

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

例子:

<!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/>
      確認:<input type="password" name=""/><br/><br/>
      <input type="submit" value="注冊" />
    </form>
  </body>
</html>

1.2綁定驗證功能

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

例子:

​ 注冊事件

<!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/>
      確認:<input type="password" name=""/><br/><br/>
      <input type="submit" 
      value="注冊"
       onclick="return eg.regCheck();"/>    
    </form>
    <script >
      //聲明一個對象,當做命名空間來使用
      var eg = {};
      eg.regCheck = function(){
        
      }
    </script>
  </body>
</html>

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

例子:

​ 給表單添加驗證功能

<!DOCTYPE html>
<html>
  <!--給表單添加驗證功能-->
  <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/>
      確認:<input type="password" name="" id="userpwd2"/><br/><br/>
      <input type="submit" 
      value="注冊"
      onclick="return eg.regCheck();"/>
    </form>
    <script >
      //聲明一個對象,當做命名空間來使用
      //定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
      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綁定驗證的另一種方式

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

例子:

​ form表單綁定驗證完整范例

<!DOCTYPE html>
<html>
<!--
綁定驗證的另一種方式,form表單綁定驗證完整示例
-->
  <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/>
      確認:<input type="password" name="" id="userpwd2"/><br/><br/>
      <input type="submit" 
      value="注冊"
       />
    </form>
    <script>
      //聲明一個對象,當做命名空間來使用
      //定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
      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

要求:在注冊表單的基礎上加"簡介"字段，可以為空，但是最長不超過60個字符，同時要統(tǒng)計一下，用戶輸入錯誤的次數(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/>
      確認:<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"
      style="display: none;" id="regUnlock">
    </form>
    <script>
      //聲明一個對象,當做命名空間來使用
      //定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
      var eg = {};
      eg.$ = function(id){
        return document.getElementById(id);
        };
      //主要的驗證方法
      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ù)
      eg.err = function () {
        var el = eg.$("errnum");
        var old = el.value;
        //把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來
        el.value = parseInt(old)+1;
        //用來檢查是否應該鎖定
        eg.lock();
      };
      //通過次數(shù)判斷是否要鎖定
      eg.lock = function(){
        var err = eg.$("errnum");
        if (parseInt(err.value)>2){
          eg.$("regBtn").disabled = true;
          //根據(jù)業(yè)務需求,輸錯3次就鎖定
          eg.$("regUnlock").style.display="block";
          //同時顯示解鎖按鈕
        }
      };
      eg.unlock = function(){
        eg.$("regBtn").disabled = false;
        //根據(jù)業(yè)務需求，解鎖就是讓用戶可以重新注冊
        eg.$("regUnlock").style.display="none";
        //元素所有樣式都掛載到style屬性下
      }
    </script>
  </body>
</html>

現(xiàn)在制作一個錯誤統(tǒng)計,可以為后臺系統(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/>
      確認:<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"
      style="display: none;" id="regUnlock">
    </form>
    <script>
      //聲明一個對象,當做命名空間來使用
      //定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
      var eg = {};
      eg.$ = function(id){
        return document.getElementById(id);
        };
      //主要的驗證方法
      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ù)
      eg.err = function () {
        var el = eg.$("errnum");
        var old = el.value;
        //把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來
        el.value = parseInt(old)+1;
        //用來檢查是否應該鎖定
        eg.lock();
      };
      //通過次數(shù)判斷是否要鎖定
      eg.lock = function(){
        var err = eg.$("errnum");
        if (parseInt(err.value)>2){
          eg.$("regBtn").disabled = true;
          //根據(jù)業(yè)務需求,輸錯3次就鎖定
          eg.$("regUnlock").style.display="block";
          //同時顯示解鎖按鈕
        }
      };
      eg.unlock = function(){
        eg.$("regBtn").disabled = false;
        //根據(jù)業(yè)務需求，解鎖就是讓用戶可以重新注冊
        eg.$("regUnlock").style.display="none";
        //元素所有樣式都掛載到style屬性下
      }
    </script>
  </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論