第八次网页前端培训笔记 [p40-p43]

JS表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

获取表单：

（1）document.getElementById（“id属性值”）；通过from标签的id属性值获取表单对象

<form id="myform1" name="myform1" action=""></form>
console.log(document.getElementById("myform1"));

（2）document.表单的name属性值；通过表单的name属性值获取表单对象

<form id="myform2" name="myform2" action=""></form>
console.log(document.myform2);

（3）document.froms[下标] 通过指定下标获取表单元素

document.froms：获取HTML文档中所有的表单对象

//获取所有的表单对象
console.log(document.forms);

console.log(document.forms[0]);

（4）document.forms[表单的name属性值]   通过表单的name属性值获取表单对象

<form id="myform2" name="myform2" action=""></form>
console.log(document.forms['myform2']);

获取表单元素：

获取input元素：

（1）doccument.getElementById（“id属性值”）；通过元素的id属性值获取表单元素对象

（2）表单对象.表单元素的name属性值；通过表单对象中对应的元素的name属性值获取

（3）document.getElementsByName（“name属性值”）； 通过表单元素的name属性值获取

（4）document.getElementsByTagName（“标签名/元素名”）； 通过标签名获取表单元素对象

<form id="myform" name="myform" action="" method="get">
   姓名:<input type="text" id="uname" name="uname" value="lisi" />
   <br />
   密码:<input type="password" id="upwd" name="upwd" value="123456"/>
   <br />
   <input type="hidden" id="uno" name="uno" value="隐藏域" />
   <br />
   个人说明:<textarea name="utron"></textarea>
   <br />
   <button type="button" onclick="getTX();">获取元素内容</button>
  </form>

  <script type="text/javascript">
  function getTX(){
   var uname=document.getElementById("uname").value;
   console.log(uname);
   var pwd=document.getElementById("myform").upwd.value;
   console.log(pwd);
   var uno=document.getElementsByName("uno")[0].value;
   console.log(uno);
   var intro=document.getElementsByTagName("textarea")[0].value;
   console.log(intro);
  }
  
  </script>

提交表单：

使用普通按钮 type="button"

（1）给按钮绑定click点击事件，绑定函数

（2）在函数中，进行表单校验（非空校验、合法性校验等）

（3）如果校验通过，则手动提交表单

表单对象.submit();

使用提交按钮  type="submit"：

给按钮绑定click点击事件，绑定函数