jQuery验证表单

最新推荐文章于 2023-07-21 01:01:56 发布

原创最新推荐文章于 2023-07-21 01:01:56 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #表单验证

web前段专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册验证</title>
		<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function() {
				var ok1 = false;
				var ok2 = false;
				var ok3 = false;
				var ok4 = false;
				$("#username").on("blur", function() {
					var uPattern = /^[a-zA-Z0-9]{4,16}$/;
					if(uPattern.test($("#username").val())) {
						$("#username_msg").html("正确");
						$("#username_msg").css("color", "#0033FF");
						ok1 = true;
					} else {
						$("#username_msg").html("用户名格式不正确");
						$("#username_msg").css("color", "red");
						ok1 = false;
					}
				});
				$("#password").on("blur", function() {
					var uPattern = /^[a-zA-Z0-9]{4,16}$/;
					if(uPattern.test($("#password").val())) {
						$("#password_msg").html("正确");
						$("#password_msg").css("color", "#0033FF");
						ok2 = true;
					} else {
						$("#password_msg").html("密码格式不正确");
						$("#password_msg").css("color", "red");
						ok2 = false;
					}
				});
				$("#rePassword").on("blur", function() {
					var uPattern = /^[a-zA-Z0-9]{4,16}$/;
					if(uPattern.test($("#rePassword").val()) && ($("#rePassword").val()) == $("#password").val()) {
						$("#rePassword_msg").html("正确");
						$("#rePassword_msg").css("color", "#0033FF");
						ok3 = true;
					} else {
						$("#rePassword_msg").html("重复密码不匹配");
						$("#rePassword_msg").css("color", "red");
						ok3 = false;
					}
				});
				$("#email").on("blur", function() {
					var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					if(ePattern.test($("#email").val())) {
						$("#email_msg").html("正确");
						$("#email_msg").css("color", "#0033FF");
						ok4 = true;
					} else {
						$("#email_msg").html("邮箱不能为空或格式不正确");
						$("#email_msg").css("color", "red");
						ok4 = false;
					}
				});
				$(":submit").click(function() {
					if(ok1 && ok2 && ok3 && ok4) {
							$("#submit_msg").html("");
						$('form').submit();
					} else {
						$("#submit_msg").html("请完成表单填写！");
						$("#submit_msg").css("color", "red");
						return false;
					}
				});
			});
		</script>
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		#loginDiv {
			width: 500px;
			oveflow: hidden;
			border: 1px solid #ccc;
			margin: 30px auto;
			background-color: #eee;
		}
		
		.top {
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #ccc;
			text-indent: 1em;
			font-weight: bold;
		}
		
		#loginDiv p {
			line-height: 24px;
			height: 24px;
			margin: 14px;
		}
		
		#btn {
			padding: 5px 10px;
			cursor: pointer;
			margin-left: 66px;
		}
		
		#msg {
			line-height: 24px;
			height: 24px;
			margin: 14px;
		}
		span {
			font-size: 13px;
		}
	</style>

	<body>
		<form action="" method="post">
			<div id="loginDiv">
				<div class="top">会员注册</div>
				<p>用户名：<input type="text" id="username">  *  <span id="username_msg"></span></p>
				<p>密码：<input type="password" id="password">  *  <span id="password_msg"></span></p>
				<p>确认密码：<input type="password" id="rePassword">  *  <span id="rePassword_msg"></span></p>
				<p>邮箱：<input type="text" id="email">  *  <span id="email_msg"></span></p>
				<p>性别： <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女</p>
				<input type="submit" value="注册" id="btn" /><span id="submit_msg"></span>
			</div>
		</form>
	</body>
</html>