表單的屬性和方法, 獲取表單和表單的元素, 驗證表單

時間 2019-11-13

標籤表單屬性方法獲取元素驗證欄目 HTML 简体版

原文原文鏈接

表單的屬性和方法函數

一. 表單字段的屬性(id/name/value/form),這裏用value屬性來舉例
上面的form屬性表明獲取表單字段的父級表單對象

  1. 屬性的獲取

     console.log(document.myform.username.value);

  2. 屬性的設置

     document.myform.username.value="123";

  3. 獲取表單字段的父級表單對象

     console.log(document.myform.username.form);

  4. 禁用表單控件(這裏是禁用username這個輸入控件,等於true表示禁用)

     document.myform.username.disable=true;

二. 表單字段的方法

   1.  focus()  得到焦點後,執行大括號裏的代碼

       document.myform.username.onfocus()=function{.........}

   2.  blur()  失去焦點後,執行大括號裏的代碼

       document.myform.username.onblur()=function{.........}

三. 表單字段的事件(與方法有必定的區別)

   1. focus 事件

   2. blur 事件post

獲取表單的方式orm

獲取表單個數的方式 : document.forms.length

獲取表單的方式:

1.  document.forms[index]  :  經過forms的索引值獲取

    好比: document.forms[0]  :  獲取索引值爲 0 的表單(便是第一個form表單)

2.  document.forms["name的值"]  :  經過表單裏的name屬性的值獲取對應的表單

    好比:  document.forms["myform"]  :  myform是一個表單的name屬性的值

3.  document.forms.表單name的值  :   經過表單裏的name屬性的值獲取對應的表單

    好比:  document.forms.myform  :  myform是一個表單的name屬性的值

4.  document.表單name的值  :  經過表單裏的name屬性的值獲取對應的表單

    好比:  document.myform  :  myform是一個表單的name屬性的值

對象

獲取表單元素的方式索引

一. elements : 表單內的表單字段的集合; 注意: label標籤不屬於表單內的元素

    1. 獲取表單內部元素的個數 : document.myform.elements.length


二. 獲取表單內部元素

   獲取對應表單內某個表單字段的屬性值: (注意: 在表單中,value值表明表單字段內的文本內容)

   方式1 : document.myform.elements[index].屬性名
           解釋: 表單爲myform, 獲取到索引值爲index的表單字段,獲取其屬性值

   方式2 : document.myform.elements["name值"].屬性名
          解釋: 表單爲myform, 獲取到中括號內對應name值的表單字段,獲取其屬性值

   方式3 : document.myform.elements.表單name值.屬性名
          解釋: 表單爲myform, 獲取到表單內爲name值的表單字段,獲取其屬性值

   方式4 : document.myform.表單name值.屬性名 (直接跟表單內的字段name的值)
          解釋: 表單爲myform, 獲取到表單內爲name值的表單字段,獲取其屬性值

   例子以下 :
          document.myform.elements[0].value : 獲取到第一個表單字段的value屬性的值

          document.myform.elements["like[]"].id : 獲取到name值爲like[]字段的id屬性的值

          document.myform.elements.username.value : 獲取到name值爲username字段的value屬性的值

          document.myform.username.id : 獲取到name值爲username字段的id屬性的值

三. 注意事項

    1. elements這個表單元素集合不能用於單選框(type="radio"), 可用於其餘表單字段
    2. 單選框裏的checked屬性有兩個值:
       document.myform.radio[0].checked = true;   表示被選中

       document.myform.radio[0].checked = false;   表示沒被選中

    3. 在if語句中的寫法 : if(document.myform.radio[0].checked)
       表示document.myform.radio[0]被選中
事件

驗證表單ip

方式一:
  1. 在form表單內設置一個 <input type="submit"  value="提交">,這個按鈕是用於提交這個表單內的內容;
  2. 在script塊裏設置一個校驗函數,好比function check(),這個函數用來實現各類控件的驗證需求;
  3. 在form表單的定義中,設置一個onsubmit="return check()",其做用是當點擊提交按鈕時(程序觸發這個事件時),程序實現check函數裏的校驗代碼,而後在反饋給表單所提交到的地址,其中action="#1",就是用於設置表單所提交到的地址

  大概的程序以下:
     <body>
         form< action="#1" id="myform" name="myform" method="post" onsubmit="return check()" >
            <input type="submit" id="tijiao" name="tijiao" value="提交">
         </form>
     </body>
     <script>
         function check(){
              設置驗證需求
          }
     </script>

方式二:
   1. 經過設置的button按鈕來提交本身想要的驗證需求,能夠設置多個button;一個表單中,能夠設置多個提交按鈕;
   2. 在body塊裏設置button按鈕,在script塊裏給button按鈕添加事件;
   3. 事件裏兩條必須的語句:
      document.myform.action="#1";   用於設置表單提交到的地址
      document.myform.submit();  其中的submit()方法表示提交表單,點擊按鈕提交表單

   程序以下:
      <body>
        <input type="button" id="btn" name="btn" value="提交按鈕">
      </body>

      <script>
         document.myform.btn.onclick=function(){
              document.myform.action="#2";
              document.myform.submit();
         }
       </script>

  element

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。