【JavaScript】第七节表单校验

最新推荐文章于 2024-07-03 20:05:58 发布

景谦Nice

最新推荐文章于 2024-07-03 20:05:58 发布

阅读量126

点赞数

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

本文链接：https://blog.csdn.net/qq_43705275/article/details/103272376

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

校验文本框–text

例：不允许文本框为空，点击提交按钮时如果文本框没有输入内容则弹出页面提示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校验文本框</title>
		<script type="text/javascript">
			function bool(){
				//定义一个变量接收id为user_name的标签对象
				var element = document.getElementById('user_name');
				//检查该标签对象是否输入内容
				if(element.value==""){
					alert('请输入用户名');
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return bool()">
			<input id="user_name" type="text" placeholder="请输入用户名" />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

当没有输入内容时就点击提交按钮会出现以下提示：
在这里插入图片描述

校验密码框–password

例：不允许密码框为空，点击提交按钮时如果密码框没有输入内容则弹出页面提示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校验密码框</title>
		<script type="text/javascript">
			function bool(){
				//定义一个变量接收id为user_password的标签对象
				var element = document.getElementById('user_password');
				//检查该标签对象是否输入内容
				if(element.value==""){
					alert('请输入密码');
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return bool()">
			<input id="user_password" type="password" placeholder="请输入密码" />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

当没有输入密码时就点击提交按钮会出现以下提示：
在这里插入图片描述

校验文本域–textarea

例：不允许文本域为空，点击提交按钮时如果文本域没有输入内容则弹出页面提示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校验文本域</title>
		<script type="text/javascript">
			function bool(){
				//定义一个变量接收id为summary的标签对象
				var element = document.getElementById('summary');
				//检查该标签对象是否输入内容
				if(element.value==""){
					alert('请输入简介');
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return bool()">
			<textarea id="summary" placeholder="请输入简介" /></textarea>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

当文本域没有输入内容时就点击提交按钮会出现以下提示：
在这里插入图片描述

校验单选–radio

例：不允许不选择选项就提交，点击提交按钮时如果没有选择则弹出页面提示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校验单选</title>
		<script type="text/javascript">
			function bool(){
				//定义一个标记
				var flag = false;
				//定义一个变量接收name为gender的标签对象
				var elements = document.getElementsByName('gender');
				//遍历该标签对象数组是否有被选中的
				for(var i = 0; i < elements.length; i ++){
					if(elements[i].checked){
						flag = true;
						break;
					}
				}
				if(!flag){
					alert('请选择性别');
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return bool()">
			<input type="radio" name="gender" value="male" />男<input type="radio" name="gender" value="female" />女
			<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

当单选没有选择时就点击提交按钮会出现以下提示：
在这里插入图片描述

校验多选–checkbox

例：多选至少选择一项就提交，点击提交按钮时如果一个也没有选择则弹出页面提示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校验多选</title>
		<script type="text/javascript">
			function bool(){
				var flag = false;
				//定义一个变量接收name为hobby的标签对象
				var elements = document.getElementsByName('hobby');
				//遍历该标签对象数组是否有被选中的
				for(var i = 0; i < elements.length; i ++){
					if(elements[i].checked){
						flag = true;
						break;
					}
				}
				if(!flag){
					alert('请至少选择一个爱好');
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return bool()">
			<input type="checkbox" name="hobby" value="basketball" />篮球<br />
			<input type="checkbox" name="hobby" value="football" />足球<br />
			<input type="checkbox" name="hobby" value="table_tennis" />乒乓球<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

如果一个都没选择就会弹出以下提示：
在这里插入图片描述

校验下拉列表–select

例：下拉列表必须选择一项提交，点击提交按钮时如果没有选择则弹出页面提示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校验下拉列表</title>
		<script type="text/javascript">
			function bool(){
				var flag = false;
				var elements = document.getElementById('hobby').options;
				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>
	</head>
	<body>
		<form onsubmit="return bool()">
			<select id="hobby">
				<option value="" />--请选择--</option>
				<option value="basketball" />篮球</option>
				<option value="football" />足球</option>
				<option value="table_tennis" />乒乓球</option>
			</select>	
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

如果没选择爱好就会弹出以下提示：
在这里插入图片描述

景谦Nice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】第七节表单校验

校验文本框–text例：不允许文本框为空，点击提交按钮时如果文本框没有输入内容则弹出页面提示：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>校验文本框</title> <script type="text/javascript"&...
复制链接

扫一扫