HTML详述表单校验总结

最新推荐文章于 2024-07-09 17:01:34 发布

zzu957

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量400

点赞数

分类专栏： HTML学习文章标签： js javascript

本文链接：https://blog.csdn.net/zzu957/article/details/107424793

版权

HTML学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、文本框
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="name" />
		<script>
			document.getElementById("name").focus();//获取id为name的焦点
			function t1(){
				var element = document.getElementById("name");
				console.log(element.value);
				element.value="WJQ";
				element.readOnly=true;//只读
				/*element.disabled=true;//禁止使用*/
			}
		</script>
		<input type="button" name="name1" id="name1" value="测试" οnclick="t1()"
	</body>
</html>

运行结果：
此时无法对WJQ进行任何操作；
在这里插入图片描述
执行disable语句：

二、密码框
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="password" name="password" id="password" />
		<script>
			document.getElementById("password").focus();
			function t2(){
				var element = document.getElementById("password");
				console.log(element.value);
				element.value="WJQ";
				element.readOnly=true;
				//element.disabled=true
			}
		</script>
		<input type="button" name="name" id="name" value="测试" οnclick="t2()"
	</body>
</html>

运行结果：
刷新页面时，焦点自动获取：
在这里插入图片描述
输入密码后：

第一行获取初始输入密码，第二行显示默认密码，且无法改变。
三、单选框
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="radio" name="sex" value="男" />男
		<input type="radio" name="sex" value="女" />女
		
		<script>
			function t(){
				var elements = document.getElementsByName("sex");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+"——"+element.value);//显示是否选中以及显示value值
				}
			}
			//document.getElementsByName("sex")[0].checked=true;//默认选中
			//document.getElementsByName("sex")[1].disabled=true;//禁止使用
		</script>	
		<input type="button" name="button" id="button" value="测试" onclick="t()" />
	</body>
</html>

运行结果：
此时默认选中男，禁止选用女，在这里插入图片描述
注释掉两行代码后:
此时可以发现在右侧有true或false选项，我们可以通过if语句判断来显示选择情况，在复选框中我们将与展示。
四、复选框
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="hobby" id="hobby" value="篮球" />篮球
		<input type="checkbox" name="hobby" id="hobby" value="足球" />足球
		<input type="checkbox" name="hobby" id="hobby" value="网球" />网球
		<input type="checkbox" name="hobby" id="hobby" value="羽毛球" />羽毛球
		<input type="checkbox" name="hobby" id="hobby" value="乒乓球" />乒乓球
		
		<input type="button" name="button" id="button" value="测试" onclick="t()" />
		
		<script>
			var elements = document.getElementsByName("hobby");
			function t(){
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					/*console.log(element.checked+"——"+element.value);*/
					if(element.checked){
						console.log(element.value);
					}
				}
			}
			
			//elements[0].checked=true;
			//elements[1].disabled=true;
		</script>
	</body>
</html>

运行结果：
此时默认选中篮球，禁止选中足球。
在这里插入图片描述
注释掉两行代码后显示:

通过if语句判断来进行对所选中项的输出，实现数据准确输出。
五、select
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="provience">
			<option value="">——请选择——</option>
			<option value="北京市">北京市</option>
			<option value="河南省">河南省</option>
			<option value="河北省">河北省</option>
			<option value="西藏自治区">西藏自治区</option>
		</select>
		<input type="button" name="button" id="button" value="测试" onclick="t()" />
		<script>
			function t(){
				var element = document.getElementById("provience");
				var options = element.options;
				for(var i=0;i<options.length;i++){
					var option = options[i];
					/*console.log(option.selected+"."+option.value);*/
					if(option.selected)
						console.log(option.value);
				}
			}
			//document.getElementById("provience").options[1].//selected=true;
			document.getElementById("provience").disabled=true;
		</script>
	</body>
</html>