Java 表单校验小结

最新推荐文章于 2021-03-02 18:25:02 发布

梦忆长安

最新推荐文章于 2021-03-02 18:25:02 发布

阅读量310

点赞数

本文链接：https://blog.csdn.net/qq_44971038/article/details/103272425

版权

这篇博客主要说明表单校验中的文本框、密码框、文本域、单选框和多选框、下拉框的校验；至于隐藏框，这里先不说；

文本框、密码框、文本域校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com">
			<input id="user_name" placeholder="请输入用户名：" />
			<input id="password" type="password" placeholder="请输入密码：" />
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

我们分别创建文本框、密码框和提交框，提示输入用户名和密码，校验后提交，使其跳转到百度首页；这是我们需要做到的效果；上面一段代码是先创建好页面（即没有实现预定的功能），如下图：

然后创建方法进行用户名和密码的校验,顺便添加个文本域；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				var element = document.getElementById("user_name");  //获取元素
				if(element.value==""){  //判断元素的值
					alert("用户名不能为空！")  //显示提示框信息
					return false;
				}
				element = document.getElementById("password");  //获取元素
				if(element.value==""){  //判断元素的值
					alert("密码不能为空！");   //显示提示框信息
					return false;
				}
				element = document.getElementById("summary"); //获取元素
				if(element.value==""){  //判断元素的值
					alert("简介不能为空！");  //显示提示框信息
					return false;
				}
				return true;
			}	
		</script>
		
		<form action="http://www.baidu.com" onsubmit=" return test()">  //调用函数
			<input id="user_name" placeholder="请输入用户名：" />  //文本框
			<input id="password" type="password" placeholder="请输入密码：" />  //密码框
			<textarea id="summary" placeholder="简介"></textarea>  //文本域
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

这段代码在前面代码的基础上完成了校验功能：

onsubmit 当存在submit提交框时使用，提交整个表单的信息；条件为真则提交；
return test（）调用函数，test（）的返回值决定着是否提交表单数据；
使用getby方法获取元素；即此时的element变量就指向 <input id="user_name" placeholder="请输入用户名：" /> 这行代码；
使用vlaue方法获取输入值，判断输入值（元素的值）是否为空；为空则表示用户未进行输入，显示信息提示框并返回false，不提交表单数据；否则，继续执行代码；
使用getby方法获取元素；即此时的element变量指向<input id="password" type="password" placeholder="请输入密码：" />这行代码；
重复第4步操作，判断输入值是否为空，决定程序是否继续执行；
重复第5、6步操作；
若所有条件成立，则输入完毕，返回true，提交表单数据；

单选和多选、下拉框校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				var elements = document.getElementsByName("sex");  //获取数组式元素
				var flag=false;
				for(var i=0;i<elements.length;i++){  //遍历
					if(elements[i].checked){  //判段是否有被选选项
						flag=true;
						break;
					}
				}
				if(!flag){
					alert("请选择性别！");
					return false;
				}
				elements = document.getElementsByName("hobby");  //获取数组式元素
				flag=false;
				for(var i=0;i<elements.length;i++){  //遍历
					if(elements[i].checked){  //判段是否有被选选项
						flag=true;
						break;
					}
				}
				if(!flag){
					alert("请选择爱好！");
					return false;
				}
				elements = document.getElementsByTagName("select")[0];  //获取数组式元素
				flag=false;
				for(var i=0;i<elements.length;i++){  //遍历
					if(elements[i].selected && elements[i].value!=""){  //判段是否符合选择要求
						flag=true;
						break;
					}
				}
				if(!flag){
					alert("请选择年级！");
					return false;
				}
				return true;
			}	
		</script>
		
		<form action="http://www.baidu.com" onsubmit=" return test()">
			<input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="1"/>女  //单选
			<br />
			<input type="checkbox" name="hobby" value="0">篮球  //多选
			<input type="checkbox" name="hobby" value="1">足球
			<input type="checkbox" name="hobby" value="2">羽毛球
			<br />
			<select>  //下拉框
				<option value="">--请选择--</option>
				<option value="1">一年级</option>
				<option value="2">二年级</option>
			</select>
			<br />
			<input type="submit" value="登录" />

		</form>
	</body>
</html>

界面效果如下；

创建方法，使用getby方式获取数组式元素（无论是单选还是多选，一般都会有2个或2个以上的选项，这些选项都要获取到，因此使用数组式获取方法）；
使用循环对获取的数组进行遍历；
判断选项是否符合要求，符合则继续执行程序；不符合则显示提示信息并返回false，不提交表单数据；
重复1、2、3步骤，直至所有条件判断完成；
返回true，提交表单数据；

注意：单选和多选使用checked方法判断选项是否被选中，而下拉框使用selected判断选项是否被选中，且下拉框需要根据value值判断选项是否符合我们的要求（因为下拉框必有一个选项被选中）；

将以上所有的框和选项结合在一起就是：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				var element = document.getElementById("user_name");
				if(element.value==""){
					alert("用户名不能为空！")
					return false;
				}
				element = document.getElementById("password");
				if(element.value==""){
					alert("密码不能为空！");
					return false;
				}
				element = document.getElementById("summary");
				if(element.value==""){
					alert("简介不能为空！");
					return false;
				}
				var elements = document.getElementsByName("sex");
				var flag=false;
				for(var i=0;i<elements.length;i++){
					if(elements[i].checked){
						flag=true;
						break;
					}
				}
				if(!flag){
					alert("请选择性别！");
					return false;
				}
				elements = document.getElementsByName("hobby");
				flag=false;
				for(var i=0;i<elements.length;i++){
					if(elements[i].checked){
						flag=true;
						break;
					}
				}
				if(!flag){
					alert("请选择爱好！");
					return false;
				}
				elements = document.getElementsByTagName("select")[0];
				flag=false;
				for(var i=0;i<elements.length;i++){
					if(elements[i].selected && elements[i].value!=""){
						flag=true;
						break;
					}
				}
				if(!flag){
					alert("请选择年级！");
					return false;
				}
				return true;
			}	
		</script>
		
		<form action="http://www.baidu.com" onsubmit=" return test()">
			<input id="user_name" placeholder="请输入用户名：" />
			<input id="password" type="password" placeholder="请输入密码：" />
			<textarea id="summary" placeholder="简介"></textarea>
			<br />
			<input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="1"/>女
			<br />
			<input type="checkbox" name="hobby" value="0">篮球
			<input type="checkbox" name="hobby" value="1">足球
			<input type="checkbox" name="hobby" value="2">羽毛球
			<br />
			<select>
				<option value="">--请选择--</option>
				<option value="1">一年级</option>
				<option value="2">二年级</option>
			</select>
			<br />
			<input type="submit" value="登录" />

		</form>
	</body>
</html>

界面为：

梦忆长安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java 表单校验小结

这篇博客主要说明表单校验中的文本框、密码框、文本域、单选框和多选框、下拉框的校验；至于隐藏框，这里先不说；文本框、密码框、文本域校验<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> &lt...
复制链接

扫一扫