如果你想成为一名优秀的java架构师，看这里 → 乐字节免费公开课（腾讯课堂）
如需要跟多资料请点击右侧（记住入群暗号：66） → 这是一条不归路，有秃头风险，请慎重选择！
#
表单
表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。
获取表单
前两种常用
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始例如：
获取表单元素
获取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开始
获取单选按钮
前提：将一组单选按钮设置相同的name属性值
(1)获取单选按钮组：
document.getElementsByName("name属性值");(2)遍历每个单选按钮，并查看单选按钮元素的checked属性 若属性值为true表示被选中，否则未被选中
选中状态设定： checked='checked' 或 checked='true' 或 checked
未选中状态设定： 没有checked属性 或 checked='false'
获取多选按钮
操作方式与单选同理，不同之处在于可以多选
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属性
提交表单
（1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
（2）使用submit按钮 + onclick="return 函数()" +函数编写代码: 最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码: 最后必须返回：return true|false;
表单校验
/**
要求：
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 += "*用户名不能为空";
flag = false;
}else if(uname.length < 6 || uname.length > 12){
validate.innerHTML += "*用户名长度在 6-12 位";
flag = false;
}
// 2、验证密码
var upwd = $('upwd').value;
// 1)不能为空
// 2)长度为 6-12 位
// 3)不能包含用户名
if("" === upwd || upwd.length == 0 ){
validate.innerHTML += "*密码不能为空";
flag = false;
} else if(upwd.length < 6 ||upwd.length > 12){
validate.innerHTML += "*密码长度在 6-12 位";
flag = false;
} else if(uname.length > 0 && upwd.indexOf(uname) >= 0){
validate.innerHTML += "*密码中不能出现用户名";
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 += "*小屁孩，妈妈喊你回家";
}
// 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 += "*人生真无趣";
}
// 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 += "*你来自火星吗?";
}
// 满足以上条件 弹出内容
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;
}