js 验证表单中输入框是否填写内容

最新推荐文章于 2022-11-10 08:40:17 发布

Kingsaj

最新推荐文章于 2022-11-10 08:40:17 发布

阅读量1k

点赞数

分类专栏： JQuery 文章标签： HTML JavaScript 表单验证前端开发用户输入

本文链接：https://blog.csdn.net/weixin_44412840/article/details/111999760

版权

JQuery 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交验证</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
		<style type="text/css">
			#content {
				width: 666px;
				margin: 0 auto;
				padding: 25px 0;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<!-- 个人信息 -->
			<form id="personal_information" onsubmit='checkForm()'>
				<div class="form-group">
					<label for="exampleInputEmail1">姓名 :</label>
					<input type="text" name="name" class="form-control noNull" id="exampleInputEmail1" placeholder="姓名" required>
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">年龄 :</label>
					<input type="text" name="age" class="form-control noNull" id="exampleInputPassword1" placeholder="年龄">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">地区 :</label>
					<select class="form-control noNull" name="region">
						<option value="" disabled selected>请选择城市</option>
						<option>北京</option>
						<option>上海</option>
						<option>广州</option>
					</select>
				</div>
				<div class="radio">
					<label class="radio-inline">
						<input type="radio" name="sex" class="noNull" value="0"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="sex" value="1"> 女
					</label>
				</div>
				<button type="button" class="btn btn-primary">提交</button>
			</form>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
		<script type="text/javascript">
			$('button[type="button"]').on('click', function() {
					let flag = true;
				$(".noNull").each(function() {
					let _this = $(this);
					let name = $(this).attr('name');
					if ($(this).val() == "") {
						alert(_this.siblings('label').text().replace(' :', '') + "不能为空");
						flag = false;
						return false;
					}
				});
				if(flag){
					alert('全部输入提交');
				}else{	
					alert('有空输入')	
				}
				// alert('提交');
			})
		</script>
	</body>
</html>