HTML详述表单校验总结

最新推荐文章于 2023-01-05 17:15:22 发布

程序猿11号

最新推荐文章于 2023-01-05 17:15:22 发布

阅读量187

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_46383618/article/details/107473267

版权

一、文本框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			
		<input id="name" />
		
		<script>
			document.getElementById("name").focus();//设置焦点
			function t1(){
				var element = document.getElementById("name");
				console.log(element.value);//获取输入值
				element.value="Jimmy";//默认设置
				element.readOnly=true;//设置后只读
				element.disabled=true;//自动设置后禁用
			}
                </script>
                
                <input type="button" value="测试" onclick="t1()" />
    </body>
</html>

运行结果：

输入任何值都可以被录入，并且之后文本框默认显示为Jimmy

element.readOnly=true;//设置后只读，文本框不可操作

element.disabled=true;//设置后禁用文本框

二、密码框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			
		<input type="password" id="password"/>
		
		<script>
			document.getElementById("password").focus();//设置焦点
			function t1(){
				var element = document.getElementById("password");
				console.log(element.value);//获取输入值
				element.value="Jimmy";//默认设置
				element.readOnly=true;//设置后只读
				//element.disabled=true;//自动设置后禁用
                        }
                </script>
                
                <input type="button" value="测试" onclick="t1()" />
    </body>
</html>

运行结果与文本框相似

三、文本域

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			
		<textarea id="summary"></textarea>
		
		<script>
			document.getElementById("summary").focus();//设置焦点
			function t1(){
				var element = document.getElementById("summary");
				console.log(element.value);//获取输入值
				element.value="Jimmy";//默认设置
				element.readOnly=true;//设置后只读
				//element.disabled=true;//自动设置后禁用
		        }
                </script>
                
                <input type="button" value="测试" onclick="t1()" />
    </body>
</html>

运行结果与文本框相似

四、隐藏框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com/s">
			<input type="hidden" name="wd" id="name" value="123456"/>
			<input type="submit" value="登陆"/>
		</form>
		<script>
			var element = document.getElementById("name");
			element.disabled=true;//无效，因为hidden隐藏框没有disabled属性
		</script>
    </body>
</html>

运行结果：

除开element.disabled=true无效，因为hidden隐藏框没有disabled属性。

其余与文本框类似

五、单选框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="radio" name="sex" value="0"/>男
		<input type="radio" name="sex" value="1"/>女
		<input type="button" value="测试" onclick="t3()" />
		
		<script>
			function t3(){
			//获取用户选中的值
				var elements = document.getElementsByName("sex");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);//checked当前选中，value获取值
				}
			}
			
			document.getElementsByName("sex")[1].checked=true;
			document.getElementsByName("sex")[1].disabled=true;//禁用
		</script>
    </body>
</html>

代码格式：

getElements为复数

使用遍历的方法获取所选用户的值。

禁用的格式也发生变化，可以指定禁用的元素[i]。

默认元素的格式也发生变化，checked=true;

六、复选框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<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="t4()" />
		
		<script>
			function t4(){
			//获取用户选中的值
				var elements = document.getElementsByName("hobby");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);//checked当前选中，value获取值
				}
			}
			
			document.getElementsByName("hobby")[1].checked=true;
			document.getElementsByName("hobby")[1].disabled=true;//禁用
		</script>
    </body>
</html>

代码格式：

与单选框类似

七、下拉列表

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</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="t5()" />
		
		<script>
			function t5(){
			//获取选中的下拉项
				var element = document.getElementById("province");
				var options = element.options;
				for(var i=0;i<options.length;i++){
					var option = options[i];
					console.log(option.selected+","+option.value);//checked当前选中，value获取值
				}
			}
			document.getElementById("province").options[1].selected=true;//默认
			document.getElementById("province").disabled=true;//禁用
		</script>
    </body>
</html>

代码格式：

getElements为单数

selected代替了checked

其余与单选框相似