JQuery 注册界面

最新推荐文章于 2024-06-17 00:46:15 发布
nijiadalinge
最新推荐文章于 2024-06-17 00:46:15 发布
阅读量533
点赞数
分类专栏：移动开发
本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79174306
版权
移动开发专栏收录该内容
58 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}
			.box{
				width: 600px;
				height: 600px;
				border: 1px solid cyan;
				margin: 30px auto;
			}
			.box .bg{
				width: 96%;
				margin-left: 3%;
			}
			.box .bg tr td:nth-child(1){
				text-align: right;
				width: 30%;
			}
			.box .bg tr td:nth-child(2) input{
				width: 242px;
				height: 23px;
				margin-left: 10px;
				margin-bottom: 10px;
				margin-top: 10px;
			}
			.box .bg tr td:nth-child(3) span{
				display: block;
				width: 160px;
				height: 23px;
				padding-left: 5px;
			}
		</style>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			$("#zh").blur(function(){
				fzzh();
			});
			function fzzh(){
				var zh = $("#zh").val();
				var zhpd = /^[0-9a-zA-Z]*$/;
				if(zh == ""){
					$(".pdzh").text("账号不能为空");
					$(".pdzh").css("color","red");
					return false;
				}else if(!zhpd.test(zh)){
					$(".pdzh").text("账号不能出现特殊字符");
					$(".pdzh").css("color","red");
					return false;
				}else{
					$(".pdzh").text("");
					return true;
				}
			}
			
			$("#pass1").blur(function(){
				fzpass1();
			});
			function fzpass1(){
				var pass1 = $("#pass1").val();
				var pass1pd = /\w{3,6}/;
				if(pass1 == ""){
					$(".pdpass1").text("密码不能为空");
					$(".pdpass1").css("color","red");
					return false;
				}else if(!pass1pd.test(pass1)){
					$(".pdpass1").text("密码不能出现特殊字符");
					$(".pdpass1").css("color","red");
					return false;
				}else{
					$(".pdpass1").text("");
					return true;
				}
			}
			
			$("#pass2").blur(function(){
				fzpass2();
			});
			function fzpass2(){
				var pass1 = $("#pass1").val();
				var pass2 = $("#pass2").val();
				var pass2pd = /\w{3,6}/;

				if(pass2 == ""){
					$(".pdpass2").text("重置密码不能为空");
					$(".pdpass2").css("color","red");
					return false;
				}else if(!pass2pd.test(pass2)){
					$(".pdpass2").text("重置密码不能出现特殊字符");
					$(".pdpass2").css("color","red");
					return false;
				}else if(pass2 != pass1){
					$(".pdpass2").text("密码不一致");
					$(".pdpass2").css("color","red");
					return false;
				}else{
					$(".pdpass2").text("");
					return true;
				}
			}
			
			$("#name").blur(function(){
				fzname();
			});
			function fzname(){
				var name = $("#name").val();
				if(name == ""){
					$(".pdname").text("昵称不能为空");
					$(".pdname").css("color","red");
					return false;
				}else{
					$(".pdname").text("");
					return true;
				}
			}
			
			$("#rq").blur(function(){
				fzrq();
			});
			function fzrq(){
				var rq = $("#rq").val();
				if(rq == ""){
					$(".pdrq").text("出生日期不能为空");
					$(".pdrq").css("color","red");
					return false;
				}else{
					$(".pdrq").text("");
					return true;
				}
			}
			
			$("#nub").blur(function(){
				fznub();
			});
			function fznub(){
				var nub = $("#nub").val();
				var nubpd = /^\d{17}(\d|x)$/;
				if(nub == ""){
					$(".pdnub").text("身份证号不能为空");
					$(".pdnub").css("color","red");
					return false;
				}else if(!nubpd.test(nub)){
					$(".pdnub").text("身份证号不合法");
					$(".pdnub").css("color","red");
					return false;
				}else{
					$(".pdnub").text("");
					return true;
				}
			}
			
			$("#tl").blur(function(){
				fztl();
			});
			function fztl(){
				var tl = $("#tl").val();
				var tlpd = /^1[0-9]{10,10}$/;
				if(tl == ""){
					$(".pdtl").text("手机号不能为空");
					$(".pdtl").css("color","red");
					return false;
				}else if(!tlpd.test(tl)){
					$(".pdtl").text("手机号不合法");
					$(".pdtl").css("color","red");
					return false;
				}else{
					$(".pdtl").text("");
					return true;
				}
			}
			
			$("#qq").blur(function(){
				fzqq();
			});
			function fzqq(){
				var qq = $("#qq").val();
				var qqpd = /^\d{6,}$/;
				if(qq == ""){
					$(".pdqq").text("QQ不能为空");
					$(".pdqq").css("color","red");
					return false;
				}else if(!qqpd.test(qq)){
					$(".pdqq").text("QQ5位以上");
					$(".pdqq").css("color","red");
					return false;
				}else{
					$(".pdqq").text("");
					return true;
				}
			}
			
			$("#eml").blur(function(){
				fzeml();
			});
			function fzeml(){
				var eml = $("#eml").val();
				var emlpd =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
				if(eml == ""){
					$(".pdeml").text("邮箱不能为空");
					$(".pdeml").css("color","red");
					return false;
				}else if(!emlpd.test(eml)){
					$(".pdeml").text("邮箱不格式不正确");
					$(".pdeml").css("color","red");
					return false;
				}else{
					$(".pdeml").text("");
					return true;
				}
			}
			
			function sub(){
				if(fzzh() == false || fzpass1() == false || fzpass2() == false || fzname() == false || fzrq() == false || fznub() == false || fztl() == false || fzqq() == false || fzeml() == false){
					return false;
				}else{
					return true;
				}
			}
		</script>
	</head>
	<body>
		<div class="box">
			<hr width="30px" size="1px" color="#666666" style="float: left; margin-top: 13px; margin-bottom: 50px;" />
			<span style="float: left; padding: 2px;">注册</span>
			<hr width="531px" size="1px" color="#666666" style="float: left; margin-top: 13px; margin-bottom: 50px;" />
			<form action="https://www.baidu.com" οnsubmit="return sub()" target="_blank">
			<table class="bg">
				<tr>
					<td>账号</td>
					<td><input type="text" id="zh"></td>
					<td><span class="pdzh"></span></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" id="pass1"></td>
					<td><span class="pdpass1"></span></td>
				</tr>
				<tr>
					<td>重复密码</td>
					<td><input type="password" id="pass2"></td>
					<td><span class="pdpass2"></span></td>
				</tr>
				<tr>
					<td>昵称</td>
					<td><input type="text" id="name"></td>
					<td><span class="pdname"></span></td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td><input type="date" id="rq"></td>
					<td><span class="pdrq"></span></td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<input type="radio" name="rd" style="width: 13px; height: 13px" checked="checked">汉子
						<input type="radio" name="rd" style="width: 13px; height: 13px;">妹子
					</td>
					<td><span></span></td>
				</tr>
				<tr>
					<td>身份证号</td>
					<td><input type="number" id="nub"></td>
					<td><span class="pdnub"></span></td>
				</tr>
				<tr>
					<td>手机号</td>
					<td><input type="tel" id="tl"></td>
					<td><span class="pdtl"></span></td>
				</tr>
				<tr>
					<td>QQ</td>
					<td><input type="text" id="qq"></td>
					<td><span class="pdqq"></span></td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td><input type="email" id="eml"></td>
					<td><span class="pdeml"></span></td>
				</tr>
				<tr>
					<td colspan="3" style="text-align: center;">
						<input type="submit" value="注册" style="width: 70px; height: 28px; background: #00ffff; border: 1px solid #666666; border-radius: 5px; margin: 30px 50px 30px 30px;" />
						<input type="reset" value="清除" style="width: 70px; height: 28px; background: #cccccc; border: 1px solid #666666; border-radius: 5px; margin: 30px 30px 30px 50px;" />
					</td>
				</tr>
			</table>
			</form>
		</div>
	</body>
</html>