表單是我們頁面向后臺傳輸數(shù)據(jù)的一種非常常見的方式，在進行數(shù)據(jù)發(fā)送（請求發(fā)出）之前，我們應該現(xiàn)在頁面進行一系列數(shù)據(jù)合法性的驗證，節(jié)省不必要的錯誤數(shù)據(jù)的傳輸，以及提高用戶的體驗度。
前兩種常用
1、document.表單名稱2、document.getElementById(表單 id);3、document.forms[表單名稱]4、document.forms[索引]; //從 0 開始
例如：
<body>
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form></body><script>
//四種方式var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);</script>如 text password hidden textarea等，前兩種常用。
1)、通過 id 獲取：document.getElementById(元素 id);2)、通過 form.名稱形式獲取: myform.元素名稱; name屬性值3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始4)、通過 tagName 數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隱藏域" />
個人說明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >獲取元素內(nèi)容</button>
</form></body><script>
function getTxt(){
var uno = document.getElementById("uno");
var uname = myform.uname;
console.log(uname + "--------");
var upwd = document.getElementsByTagName('input')[1] ;
var intro = document.getElementsByName("intro")[0];
console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
}</script>本文是java大數(shù)據(jù)教程里Javascript部分教學課件文檔，如需全套java架構(gòu) 大數(shù)據(jù)學習教程和資料請+V：xiaole888899999前提：將一組單選按鈕設(shè)置相同的name屬性值
(1)獲取單選按鈕組：
document.getElementsByName("name屬性值");(2)遍歷每個單選按鈕，并查看單選按鈕元素的checked屬性：
若屬性值為true表示被選中，否則未被選中
選中狀態(tài)設(shè)定： checked='checked' 或 checked='true' 或 checked
未選中狀態(tài)設(shè)定： 沒有checked屬性 或 checked='false'
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" />1
<input type="radio" name="rad" value="2" /> 2</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad');
//radios[0].checked = 'checked'for(var i = 0; i<radios.length; i++){
console.log(radios[i].checked + '---' + radios[i].value)
}</script>本文是java大數(shù)據(jù)教程里Javascript部分教學課件文檔，如需全套java架構(gòu) 大數(shù)據(jù)學習教程和資料請+V：xiaole888899999操作方式與單選同理，不同之處在于可以多選
var ufav = document.getElementsByName("ufav");var favstr = "";
for (i = 0;i < ufav.length; i++){
if(ufav[i].checked){
favstr += ufav[i].value+",";
}
}favstr = favstr.substr(0,favstr.length-1);（1）獲取 select 對象：
var ufrom = document.getElementById("ufrom");（2）獲取選中項的索引：
var idx = ufrom.selectedIndex;
（3）獲取選中項 options 的 value屬性值：
var val = ufrom.options[idx].value;
注意：當通過options獲取選中項的value屬性值時，
若沒有value屬性，則取option標簽的內(nèi)容
若存在value屬性，則取value屬性的值
（4）獲取選中項 options 的 text：
var txt = ufrom.options[idx].text;
選中狀態(tài)設(shè)定：selected='selected'、selected=true、selected
未選中狀態(tài)設(shè)定：不設(shè)selected屬性
<body onload="init()">
<form id='myform' name="myform" action="" method="">
來自:
<select id="ufrom" name="ufrom">
<option value="-1" >請選擇</option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
</select><br />
<button type="button" id="sub" name="sub">提交</button>
</form></body><script>
function init () {
var sub = document.getElementById("sub");
sub.onclick = function () {
//獲取select對象var ufrom = document.getElementById("ufrom");
console.log("表單對象：" + ufrom);
//獲取選中的索引var idx = ufrom.selectedIndex;
console.log("選中項的索引值：" + idx);
//獲取選中項的value值var val = ufrom.options[idx].value;
console.log("選中項的value屬性值：" + val);
//獲取選中項的textvar txt = ufrom.options[idx].text;
console.log("選中項的text：" + txt);
}
}</script>本文是java大數(shù)據(jù)教程里Javascript部分教學課件文檔，如需全套java架構(gòu) 大數(shù)據(jù)學習教程和資料請+V：xiaole888899999（1）使用普通button按鈕+onclick事件+事件中編寫代碼:
獲取表單.submit(); （2）使用submit按鈕 + onclick="return 函數(shù)()" +函數(shù)編寫代碼:
最后必須返回：return true|false;
（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數(shù)();" +函數(shù)編寫代碼:
最后必須返回：return true|false;
<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
<input name="test" id="uname"/><span id="msg"></span><br />
<!--通過js事件：sub()提交表單-->
<input type="button" onclick="sub();" value="提交表單1" />
<input type="submit" onclick="return sub2();" value="提交表單2" />
<input type="submit" value="提交onsubmit" /><br />
<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
width="60px" height="40px" /></form><script type="text/javascript">
// input的type=button，調(diào)用submit()方法提交function sub(){
document.myform2.submit();
}
// 進行校驗，返回值為true才能提交function sub2(){
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交}
document.getElementById("msg").innerHTML = "不能空著?。。?！";
document.getElementById("msg").style.color="red";
return false; // 不提交}
// onsubmit事件提交function onsub () {
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交}
document.getElementById("msg").innerHTML = "填寫點兒東西唄！(ˉ▽￣～) 切~~";
document.getElementById("msg").style.color="red";
return false; // 不提交}</script><form id='myform' name="myform"> 姓名:<input type="text" id="uname" name="uname" /><br /> 密碼:<input type="password" id="upwd" name="upwd" /><br /> 年齡:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩 <input type="radio" name="uage" value="1"/>你懂得 <br /> 愛好:<input type="checkbox" name="ufav" value="籃球"/>籃球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代碼"/>代碼<br /> 來自:<select id="ufrom" name="ufrom"> <option value="-1" selected="selected">請選擇</option> <option value="0">北京</option> <option value="1">上海</option> </select><br /> <div id="validate" style="color: red;"></div> <button type="submit" onclick="return checkForm();">提交</button> <button type="reset" onclick="resetForm();">重置</button></form>本文是java大數(shù)據(jù)教程里Javascript部分教學課件文檔，如需全套java架構(gòu) 大數(shù)據(jù)學習教程和資料請+V：xiaole888899999
以下略，如需獲取全套學習教程幫助請留言評論或聯(lián)系作者。
聯(lián)系客服
