如果你想成为一名优秀的 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;}