表单的属性和方法, 获取表单和表单的元素, 验证表单

时间 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