第八次前端培训（JavaScript）

最新推荐文章于 2023-11-15 20:40:59 发布

apres_guo

最新推荐文章于 2023-11-15 20:40:59 发布

阅读量430

点赞数

分类专栏：前端学习文章标签：前端 javascript

本文链接：https://blog.csdn.net/apres_guo/article/details/122892780

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应在现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传递，以及提高用户的体验度。

获取表单:

document.getElementById("id属性值")——通过from标签的id属性值获取表单对象
document.表单的name属性值——通过表单的name属性值获取表单对象
document.forms——获取HTML文档中所有的表单对象
document.forms[表单的name属性值]——通过表单的name属性值获取表单对象
document.forms[下标]——通过指定下标获取表单元素

获取表单元素：

1.获取input元素：

document.getElementById("id属性值")——通过元素的id属性值获取表单元素对象
表单对象.表单元素的name属性值——通过表单对象中对应的元素的name属性值获取
document.getElementsByName("name属性值")——通过表单元素的name属性值获取
document.getElementsByTagName("标签名/元素名")——通过标签名获取表单元素对象

<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><br/>
			<button type="button" onclick="getTxt()">获取元素内容</button>
</form>
		<script type="text/javascript">
		    function getTxt(){
			    var uname = document.getElementById("uname").value
			    console.log(uname)
			    var pwd = document.getElementById("myform").upwd.value
			    console.log(pwd)
				var uno = document.getElementsByName("uno")[0].value
				console.log(uno)
				var intro = document.getElementsByTagName("textarea")[0].value
				console.log(intro)
		    }
		
		</script>

2.获取单选按钮：（注：相同的一组单选按钮，需要设置相同的name属性值）

（1)document.getElementByName("name属性值")

通过name属性值获取

（2）判断单选按钮是否选中

checked 选中状态

在JS代码中

checked=true 表示选中

不设置checked属性表示不选中

在HTML标签中

checked=checked 或 checked 表示选中

（3）获取单选按钮的值

元素.value

3.获取多选按钮

与单选按钮相同

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

注：

获取下拉框选中项的值时：（value）

如果option标签设置了value属性值，则获取value属性对应的值

如果option标签未设置了value属性值，则获取的是option双标签中的文本值

下拉框的选中状态：

选中状态：selected=selected，selected，selected = true

未选中状态：不设置selected属性值，selected = false

提交表单：

1.使用普通按钮 type = “button"

给按钮绑定click点击事件，绑定函数
在函数中，进行表单校验（非空校验，合法性校验等）
如果校验通过，则手动提交表单表单对象.submit()

2.使用提交按钮 type = "submit"

给按钮绑定click点击事件，绑定函数
函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交。） onclick = "return 函数名（）"
在函数中，进行表单校验（非空校验，合法性校验等）
如果校验通过，返回true；如果校验不通过，则返回false

3.使用提交按钮 type="submit"

给表单form元素绑定submit提交事件，绑定函数
函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交。） onsubmit = "return 函数名（）"
在函数中，进行表单校验（非空校验，合法性校验等）
如果校验通过，返回true；如果校验不通过，则返回false