简易登录注册界面及正则判断（jQuery）

淡淡的烟草味﹌ 2021-09-15 11:58 279阅读 0赞

> 登录注册是我们日常项目常见的代码片段，以下粗略的代码供小白参考。

一、代码目录

<table> 
 <tbody> 
  <tr> 
   <td><img src="https://img-blog.csdn.net/2018052710564462" style="margin-bottom:0px;" alt=""></td> 
   <td><p>index.html---登录注册页面</p><p>index.js---登录与注册界面切换</p><p>login.js---登录界面逻辑</p><p>register.js---注册界面逻辑</p><p>login.css---登录注册界面样式</p></td> 
  </tr> 
 </tbody> 
</table>

二、代码分析

1、index.html---登录注册界面

<!Doctype html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>登录</title>
    		<link rel="stylesheet" type="text/css" href="css/login.css" />
    
    	</head>
    
    	<body>
    		
    		<div id="loginOrRegister">
    			
    			<div class="title">
    				<span class="login colorRed" οnclick="goLogin()">登录</span>
    				<span class="register" οnclick="goRegister()">注册</span>
    			</div>
    			
    			<div id="formInformation">
    				
    				<form action="www.baidu.com" method="post" class="loginForm">
    					<ul class="box box1">
    						<li>
    							<label for="account">账号</label>
    							<input type="text" placeholder="请输入您的账号（即手机号）" class="account" id="account" />
    							<span class="error"></span>
    						</li>
    						<li>
    							<label for="password">密码</label>
    							<input type="password" class="password" id="password" placeholder="请输入密码" />
    							<span class="error"></span>
    						</li>
    						<li>
    							<label for="authCode">验证码</label>
    							<input type="text" class="sradd photokey" id="authCode" placeholder="请输入收到的验证码" />
    							<span class="add authCode"></span>
    							<span class="error"></span>
    						</li>
    					</ul>
    					<div class="submit">
    						<input type="submit" value="立即登录" />
    					</div>
    				</form>
    				
    				<form action="www.baidu.com" method="post" class="registerForm">
    					<ul class="box box2">
    						<li>
    							<label for="phone">手机</label>
    							<input type="text" placeholder="请输入您的手机号码" id="phone" maxlength="11" />
    							<span class="error"></span>
    						</li>
    						<li>
    							<label for="authCode2">验证码</label>
    							<input type="text" class="sradd phonekey" id="authCode2" placeholder="请输入收到的验证码" />
    							<span class="add sendaAuthCode">发送验证码</span>
    							<span class="error"></span>
    						</li>
    						<li>
    							<label for="password2">密码</label>
    							<input type="password" class="password" id="password2" placeholder="请输入密码" />
    							<span class="error"></span>
    						</li>
    						<li>
    							<label for="password3">确认密码</label>
    							<input type="password" class="email" id="password3" placeholder="请再次输入密码" />
    							<span class="error"></span>
    						</li>
    					</ul>
    					<div class="submit">
    						<input type="submit" value="立即注册" />
    					</div>
    				</form>
    			</div>
    		</div>
    	</body>
    
    </html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/login.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/register.js" type="text/javascript" charset="utf-8"></script>

2、index.js---登录与注册界面切换

// 切换登录
    function goLogin() {
    	$(".loginForm").css("display", "block");
    	$(".registerForm").css("display", "none");
    	$(".login").addClass("colorRed");
    	$(".register").removeClass("colorRed");
    }
    // 切换注册
    function goRegister() {
    	$(".registerForm").css("display", "block");
    	$(".loginForm").css("display", "none");
    	$(".register").addClass("colorRed");
    	$(".login").removeClass("colorRed");
    }

3、login.js---登录界面逻辑

$(function() {
    	// 登录界面生成验证码
    	(function create_code() {
    		function shuffle() {
    			var arr = ['1', 'r', 'Q', '4', 'S', '6', 'w', 'u', 'D', 'I', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', '2', 's', 't', '8', 'v', '7', 'x', 'y', 'z', 'A', 'B', 'C', '9', 'E', 'F', 'G', 'H', '0', 'J', 'K', 'L', 'M', 'N', 'O', 'P', '3', 'R', '5', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    			return arr.sort(function() {
    				return(Math.random() - .5);
    			});
    		};
    		shuffle();
    
    		function showAuthCode() {
    			var ar1 = '';
    			var code = shuffle();
    			for(var i = 0; i < 6; i++) {
    				ar1 += code[i];
    			};
    			$(".box1 .authCode").text(ar1);
    		};
    		showAuthCode();
    		$(".box1 .authCode").click(function() {
    			showAuthCode();
    		});
    	})();
    	//登录界面账户输入框失去焦点
    	(function login_validate() {
    		$(".box1 .account").blur(function() {
    			accountReg = /^[1][3,4,5,7,8][0-9]{9}$/;
    			if($(this).val() == "" || $(this).val() == "请输入您的账号（即手机号）") {
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("账号不能为空！");
    				console.log("账号不能为空");
    				return;
    			} else if(!accountReg.test($(".box1 .account").val())) {
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("账号不存在!");
    			} else {
    				$(this).addClass("correctInput");
    				$(this).removeClass("errorInput");
    				$(this).next().empty();
    			}
    		});
    		// 登录界面密码输入框失去焦点
    		$(".box1 .password").blur(function() {
    			reg = /^[A-Za-z0-9]{6}$/
    			if($(this).val() == "") {
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("密码不能为空！");
    			} else if(!reg.test($(".password").val())) {
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("请输入6位包含数字或字母的密码！");
    			} else {
    				$(this).addClass("correctInput");
    				$(this).removeClass("errorInput");
    				$(this).next().empty();
    			}
    		});
    
    		// 验证码输入框失去焦点
    		$(".box1 .photokey").blur(function() {
    			var code1 = $('.box1 .photokey').val().toLowerCase();
    			var code2 = $(".box1 .authCode").text().toLowerCase();
    			if($('.box1 .photokey').val() == "") {
    				$('.box1 .photokey').addClass("errorInput");
    				$(this).next().next().html("验证码不能为空！");
    				console.log("11111")
    				return;
    			} else if(code1 != code2) {
    				$(this).addClass("errorInput");
    				$(this).next().next().css("display", "block").html("验证码输入错误！");
    				console.log("22222")
    			} else {
    				$(this).removeClass("errorInput");
    				$(this).next().next().empty();
    				$(this).addClass("correctInput");
    			}
    		})
    	})();
    })

4、register.js---注册界面逻辑

$(function() {
    	// 注册页面的提示文字
    	(function register() {
    		// 注册界面手机号栏失去焦点
    		$(".box2 #phone").blur(function() {
    			phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
    			if($(this).val() == "") {
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("手机号码不能为空!");
    				return;
    			} else if(!phoneReg.test($(this).val())) {
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("请输入正确的手机号码!");
    			} else {
    				$(this).addClass("correctInput");
    				$(this).next().empty();
    			}
    		});
    
    		// 注册界面验证码栏失去焦点
    		$(".box2 .phonekey").blur(function() {
    			reg = /^[A-Za-z0-9]{6}$/;
    			if($(this).val() == "") {
    				$(this).addClass("errorInput");
    				$(this).next().next().css("display", "block").html("验证码不能为空！");
    				return;
    			} else if(!reg.test($(this).val())) {
    				$(this).addClass("errorInput");
    				$(this).next().next().css("display", "block").html("验证码输入有误！");
    			} else {
    				$(this).next().next().empty();
    				$(this).addClass("correctInput");
    			}
    		});
    
    		// 注册界面密码栏失去焦点
    		$(".box2 .password").blur(function() {
    			reg = /^[A-Za-z0-9]{6}$/
    			if(reg.test($(this).val())==""){
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("密码不能为空！");
    				console.log("登录界面的密码是不是为空了？？？")
    			}else if(!reg.test($(this).val())) {
    				$(this).addClass("errorInput");
    				$(this).next().css("display", "block").html("请输入6位包含数字或字母的密码！");
    			} else {
    				$(this).removeClass("errorInput");
    				$(this).next().empty();
    				$(this).addClass("correctInput");
    			}
    		});
    		// 注册界面确认密码失去焦点
    		$(".box2 .email").blur(function() {
    			var pwd1 = $('.box2 .password').val();
    			var pwd2 = $(this).val();
    			if(pwd1 == "") {
    				$(this).removeClass("errorInput");
    				$(this).next().html("确认密码不能为空！");
    				$(this).addClass("errorInput");
    				return;
    			} else if(pwd1 != pwd2) {
    				$(this).addClass("errorInput");
    				$(this).removeClass("correctInput");
    				$(this).next().css("display", "block").html("两次密码输入不一致！");
    			} else {
    				$(this).removeClass("errorInput");
    				$(this).addClass("correctInput");
    				$(this).next().empty();
    			}
    		});
    	})();
    });

5、login.css---登录注册页面样式

* {
    	margin: 0;
    	padding: 0;
    	font-family: "黑体";
    	-moz-user-select: none;
    	-ms-user-select: none;
    	-webkit-user-select: none;
    }
    
    ul,li {
    	list-style: none;
    }
    input {
    	background-color: #fff;
    	outline: none;
    	color:#999;
    }
    .colorRed{
    	color: red !important;
    }
    /*登录注册二选一布局*/
    #loginOrRegister {
    	position: fixed;
    	left: 30%;
    	top: 30%;
    	background-color: #447391;
    	width: 500px;
    	margin-left: -250px;
    	margin-top: -150px;
    	border-radius: 10px;
    	text-align: center;
    }
    /*登录注册标题*/
    .title {
    	height: 45px;
    	line-height: 45px;	
    }
    .title .login, .title .register{
    	padding: 10px 0;
    	color: #fff;
    	font-size: 25px;
    	cursor: pointer;	
    }
    /*.title .register{
    	border-left: 1px solid black;
    }*/
    .title span:hover{
    	color: deeppink;
    }
    /*登录注册具体表单信息*/
    form {
    	padding: 20px 0px;
    }
    #formInformation {
        background-color: #f2f2f2;
        margin: 0 0px 10px 0px;
    }
    .registerForm{
    	display: none;
    }
    
    /*提交样式*/
    .submit input {
    	display: inline-block;
    	width: 300px;
    	background-color: rgb(255, 109, 11);
    	color: rgb(255, 255, 255);
    	font-size: 20px;
    	height: 40px;
    	line-height: 40px;
    	outline: none;
    	border: none;
    	border-radius: 5px;
    	cursor: pointer;
    	margin-left: 32px;
    }
    .submit input:hover{
    	background-color: rgb(220, 109, 11);
    }
    .box {
    	padding-left: 30px;
    }
    
    .box li {
    	line-height: 44px;
    	width: 100%;
    	overflow: hidden;
    }
    
    .box li label {
    	width: 68px;
    	height: 50px;
    	float: left;
    	line-height: 50px;
    	text-align: right;
    	padding-right: 20px;
    }
    
    .box li input{
    	padding: 6px 0;
    	font-size: 16px;
    	width: 296px;
    	height: 28px;
    	line-height: 28px;
    	border: 1px solid #dddddd;
    	text-indent: 0.5em;
    	float: left;
    	border-radius: 5px;
    }
    
    /*验证码*/
    
    .box li .sradd {
    	width: 148px;
    	text-indent: 4px;
    	font-size: 14px;
    }
    
    /*登录界面验证码*/
    .authCode {
    	background: #ff7200;
    	text-align: center;
    	line-height: 42px;
    	color: #fff;
    	border-radius: 5px;
    	font-size: 20px;
    	letter-spacing: 3px;
    	width: 128px;
    	height: 42px;
    	float: left;
    	display: inline;
    	cursor: pointer;
    	margin-left: 20px;
    }
    
    /*注册界面发送验证法*/
    .sendaAuthCode{
        background: #ff7200;
        text-align: center;
        line-height: 42px;
        color: #fff;
        border-radius: 5px;
        width: 128px;
        height: 42px;
        float: left;
        display: inline;
        cursor: pointer;
        margin-left: 20px;
    }
    
    .error {
    	clear: both;
    	display: block;
    	color: red;
    	padding-left: 90px;
    	padding-bottom: 5px;
    	height: 20px;
    	float: left;
    	font-size: 12px;
    	line-height: 20px;
    }
    
    .errorInput {
    	border: 1px solid red !important;
    }
    
    .correctInput {
    	border: 1px solid green !important;
    }

三、效果图

![20180527110815580][]![20180527122337407][]

[20180527110815580]: https://img-blog.csdn.net/20180527110815580
[20180527122337407]: /images/20210802/7999156883ca40a99194ea485c43df58.png