JavaScript入门之表单校验

最新推荐文章于 2024-09-11 15:33:18 发布

这个名字真难起

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量109

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45949075/article/details/107424006

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Form对象

Form对象代表一个 HTML 表单。

Form 对象常用属性：
在这里插入图片描述
Form 对象常用方法：

Text对象

Text对象代表 HTML表单中的文本输入域。

Text对象常用属性：
在这里插入图片描述
Text对象常用方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="name" />
		<input type="button" value="测试" onclick="test1()" />
		<script>
			document.getElementById("name").focus();//将焦点自动移到对应元素对象
			function test1(){
				var element = document.getElementById("name");
				console.log(element.value);//获取值
				element.value="Jim";//设置值
				element.readOnly=true;//设置只读
				element.disabled=true;//设置禁用
			}
		</script>
	</body>
</html>

注：

Password对象和Textarea对象都有value属性、disabled属性和readOnly属性，都有focus方法。
Hidden对象有value属性和disabled属性，没有readOnly属性和focus方法。

Radio对象与Checkbox对象

Radio对象代表 HTML表单中的单选按钮。
Checkbox对象代表一个HTML表单中的一个选择框。

Radio和Checkbox对象常用属性：
在这里插入图片描述
Radio和Checkbox对象常用方法：

<input type="radio" name="sex" value="0" />男
		<input type="radio" name="sex" value="1" />女
		<input type="button" value="测试" onclick="test2()" />
		<script>
			function test2(){
				//获取所有的单选元素所组成的的数组
				var elements = document.getElementsByName("sex");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);//获取单选每个选项的选中状态和值
				}
				document.getElementsByName("sex")[0].checked=true;//将单选中第一个选项设置为选中状态
				document.getElementsByName("sex")[1].disabled=true;//将单选中第一个选项设置为禁用状态
			}
		</script>
		
		<br />
		~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		<br />
		
		<input type="checkbox" name="hobby" value="0" />篮球
		<input type="checkbox" name="hobby" value="1" />羽毛球
		<input type="checkbox" name="hobby" value="2" />乒乓球
		<input type="button" value="测试" onclick="test3()" />
		<script>
			function test3(){
				//获取每个多选选项元素组成的数组
				var elements = document.getElementsByName("hobby");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);//获取多选每个选项的选中状态和值
				}
				document.getElementsByName("hobby")[0].checked=true;//将多选中第一个选项设置为选中状态
				document.getElementsByName("hobby")[1].disabled=true;//将多选中第二个选项设置为禁用
			}
		</script>

Select对象

Select对象代表 HTML 表单中的一个下拉列表。

Select 对象集合：
在这里插入图片描述
Select 对象常用属性：

Select 对象常用方法：

Option对象

Option对象代表 HTML 表单中下拉列表中的一个选项。

Option 对象构造方法：
在这里插入图片描述
Option 对象常用属性：

select对象和option对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function login(){
				var element = document.getElementById("submit");
				/*element.submit();*/
				element.reset();
			}
		</script>
	</head>
	<body>
		<select id="province">
			<option value="">--请选择--</option>
			<option value="001">河南省</option>
			<option value="002">河北省</option>
			<option value="003">北京市</option>
		</select>
		
		<input type="button" value="测试" onclick="test4()" />
		
		<script>
			function test4(){
				var element = document.getElementById("province");//获取select对象
				var options = element.options;//获取select对象中所有option元素所组成的数组
				for(var i=0;i<options.length;i++){
					var option = options[i];
					console.log(option.selected+","+option.value);//获取每个option对象的选中状态和值
				}
			}
			document.getElementById("province").options[3].selected=true;//将第四个option对象设置为已选中状态
			document.getElementById("province").disabled=true;//将整个select对象设置为禁用状态
		</script>
	</body>
</html>