表单是我们页面向后台传输数据的一种非常常见的方式,在进行数据发送(请求发出)之前,我们应该现在页面进行一系列数据合法性的验证,节省不必要的错误数据的传输,以及提高用户的体验度。
1.获取表单
前两种常用
1、document.getElementById("id属性值");通过form标签的id属性值获取表单
2、document.表单的name属性值;通过表单的name属性值获取表单对象
3、document.forms[下标] 通过指定下标获取表单元素
4、document.forms[表单的name属性值];通过表单的name属性值获取表单对象
document.forms: 获取HTML文档中所有的表单对象
例如:
<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>
2.获取表单元素
2.1.获取input元素
如 text password hidden textarea等,前两种常用。
1. document.getElementById("id属性值");通过元素的id属性值获取表单元素对象
2.表单对象.表单元素的name属性值;
通过表单对象中对应的元素的name属性值获取
3. document.getELementsByName("name属性值");通过表单元素的name属性值获取
4. document.getELementsByTagName("标签名/元素名");
通过标签名获取表单元素对象
<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>
2.2.获取单选按钮
注:相同的一组单选按钮,需要设置相同的name属性值
1. document.getElementByName("name属性值");通过name属性值获取
2.判断单选按钮是否选中
checked 选中状态
在JS代码中
checked=true 表示选中
checked=false 表示不选中
在HTML标签中
checked=checked或checked 表示选中
不设置checked属性 表示不选中
3.获取单选按钮的值
元素.value;
2.3.获取多选按钮
与单选按钮相同
2.4.获取下拉选项
1. 获取下拉框对象
var 对象=document.getElementById("id属性值”);
2.获取下拉框的下拉选项列表
var options =下拉框对象.options;
3.获取下拉框被选中项的索引
var index = 下拉框对象.selectedIndex;
4.获取下拉框被选中项的值
var 值= 下拉框对象.value;
5.通过选中项的下标获取下拉框被选中项的值
var值=下拉框对象.options[index].value;
6.获取下拉框被选中项的文本
var 文本值 = 下拉框对象.options[index].text;
注:
1.获取下拉框选中项的值时: (value)
如果option标签设置了value属性值,则获取value属性对应的值;
如果option标签未设置value属性值,则获取的是option双标签中的文本值
2.下拉框的选中状态:
选中状态:selected selected、selected、selected=true
未选中状态:不设置selected属性、selected=false
3.提交表单
3.1.使用普通按钮 type="button"
1.给按钮绑定click点击事件,绑定函数
2.在函数中,进行表单校验(非空校验,合法性校验等)
3.如果校验通过,则手动提交标单
表单对象.submit();
3.2.使用提交按钮 type = "submit"
1.给按钮绑定click点击事件,绑定函数
2.函数需要有返回值,返回true或false (如果return false,则表单不会提交;如果return true或不return,则表单提交)
οnclick="return 函数名()"
3.在函数中,进行表单校验,(非空校验,合法行校验等)
4.如果校验通过,返回true,如果校验不通过,则返回false
3.3.使用提交按钮 type ="submit"
1.给表单form元素绑定submit提交事件,绑定函数
2.函数需要有返回值,返回true或false (如果return false,则表单不会提交;如果return true或不return,则表单提交)
οnsubmit="return 函数()"
3.在函数中,进行表单校验,(非空校验,合法行校验等)
4.如果校验通过,返回true,如果校验不通过,则返回false