如果你想成为一名优秀的java架构师，看这里 → 乐字节免费公开课（腾讯课堂）
如需要跟多资料请点击右侧（记住入群暗号：66） → 这是一条不归路，有秃头风险，请慎重选择！
表单
表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。
获取表单
前两种常用
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>获取表单元素
获取input元素
如 text password hidden textarea等，前两种常用。
1)、通过 id 获取：document.getElementById(元素 id);2)、通过 form.名称形式获取: myform.元素名称; name属性值3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始4)、通过 tagName 数组 :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();" >获取元素内容</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>获取单选按钮
前提：将一组单选按钮设置相同的name属性值
(1)获取单选按钮组：
document.getElementsByName("name属性值"); (2)遍历每个单选按钮，并查看单选按钮元素的checked属性若属性值为true表示被选中，否则未被选中
选中状态设定： checked='checked' 或 checked='true' 或 checked
未选中状态设定： 没有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>获取多选按钮
操作方式与单选同理，不同之处在于可以多选
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标签的内容
若存在value属性，则取value属性的值
（4）获取选中项 options 的 text：
var txt = ufrom.options[idx].text;选中状态设定：selected='selected'、selected=true、selected
未选中状态设定：不设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); //获取选中项的text var txt = ufrom.options[idx].text; console.log("选中项的text：" + txt); } }</script>提交表单
（1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit(); （2）使用submit按钮 + onclick="return 函数()" +函数编写代码: 最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码: 最后必须返回：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，调用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>/** 要求： 1、验证用户名 1)不能为空 2)长度为 6-12 位 2、验证密码 1)不能为空 * 2)长度为 6-12 位 3)不能包含用户名 3、年龄: 必须选择 你懂得 4、爱好: 必须选择一项 5、来自: 必须选择一项 满足以上条件 1、弹出所有的内容 2、提交表单 否则 1、说明错误原因 2、不能提交表单*/// 通过id属性值得到dom对象function $(id) { return document.getElementById(id);}// 重置表单所有元素 注意函数不能命名为 clear reset 等function resetForm(){ // 获取说明 div var validate =$('validate'); validate.innerHTML ="";}// 表单校验function checkForm () { var flag =true; // 获取说明 div var validate = $('validate'); validate.innerHTML =""; // 1、验证用户名 // 1)、获取用户名的值 var uname = $('uname').value; // 1)不能为空 -->后期正则处理 // 2)长度为 6-12 位 if("" === uname || uname.length == 0 ){ validate.innerHTML += "*用户名不能为空</br>"; flag = false; }else if(uname.length < 6 || uname.length > 12){ validate.innerHTML += "*用户名长度在 6-12 位</br>"; flag = false; } // 2、验证密码 var upwd = $('upwd').value; // 1)不能为空 // 2)长度为 6-12 位 // 3)不能包含用户名 if("" === upwd || upwd.length == 0 ){ validate.innerHTML += "*密码不能为空</br>"; flag = false; } else if(upwd.length < 6 ||upwd.length > 12){ validate.innerHTML += "*密码长度在 6-12 位</br>"; flag = false; } else if(uname.length > 0 && upwd.indexOf(uname) >= 0){ validate.innerHTML += "*密码中不能出现用户名</br>"; flag = false; } // 3、年龄: 必须选择 你懂得 var ageGroup = document.getElementsByName("uage"); var age ; for (var i = 0; i < ageGroup.length; i++) { if(ageGroup[i].checked){ age = ageGroup[i].value; } } if(age == 0){ flag = false; validate.innerHTML += "*小屁孩，妈妈喊你回家</br>"; } // 4、爱好: 必须选择一项 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); if(favstr.length < 1){ flag = false; validate.innerHTML += "*人生真无趣</br>"; } // 5、来自 var ufrom = $('ufrom'); var idx = ufrom.selectedIndex ; var val = ufrom.options[idx].value; var valTxt = ufrom.options[idx].text; if(-1 == val){ flag = false; validate.innerHTML += "*你来自火星吗?</br>"; } // 满足以上条件 弹出内容 if(flag){ var str = ""; str += "您的姓名是:" + uname + "\n"; str += "您的密码是:" + upwd + "\n"; str += "您的年龄是:" + "可以赢取白富美了" + "\n"; str += "您的爱好是:" + favstr + "\n"; str += "您来自于:" + valTxt + "\n"; alert(str); // 设置表单提交的地址 myform.action="http://www.baidu.com"; // 提交表单 myform.submit(); return false; } else { return false; }