注册页面的完整实现,前端验证+后端验证

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
		}
	</style>
<body>
		用户名：<input id="username" type="text" placeholder="用户名有数字，字母下划线组成，但不能以数字开头，6-20位"  /><span id="showUser"></span><br/>
		密　码：<input id="userPass" type="password" placeholder="必须是数字，6-16" /><br/>
		<input id="btnReg" type="button" value="注册" />
		<div id="messageBox">

		</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//一、先做前端的表单验证（正则时讲过），
	// 表单验证：非空判断，格式是否正确


//二、后端验证：
//  发送请求，在数据库中查找用户名是否存在


//三、以上验证都没有问题，才进行注册。


// -----------------------

// 一、先做前端的表单验证
//功能：所有前端的验证；
function isTest(){
	return isUserName()&&isPass();
}

//1、用户名的前端验证
function isUserName(){
	//1)、非空判断
	if($("#username").val()==""){
		return false;
	}
	//2)、格式判断
	// 用户名有数字，字母下划线组成，但不能以数字开头，6-20位
	let reg = /^[a-zA-Z_]\w{5,19}$/;
	if(!reg.test($("#username").val())){
		return false;
	}
	return true;
}


//2、密码的前端验证
function isPass(){
	//1)、非空判断
	if($("#userPass").val()==""){
		return false;
	}
	//2)、格式判断
	// 数字，6-16位
	let reg = /^\d{6,16}$/;
	if(!reg.test($("#userPass").val())){
		return false;
	}
	return true;
}


//二、后端验证

function hasUserBack(){
	//后端验证用户名是否存在
	$.get("checkUser.php",{"username":$("#username").val()},function(data){
		if(data=="0"){
			$("#showUser").html("亲，该用户名已经存在，请重新思考！");
			$("#showUser").css({"color":"red"});
			hasUser = true;
		}else{
			$("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
			$("#showUser").css({"color":"green"});
			hasUser = false;
		}
	})
}

$(function(){		
		let hasUser = false;//该用户名不存在
		$("#username").blur(function(){
			//1、前端验证
			if(isUserName()==false){
				$("#showUser").html("亲，用户名的格式不正确！");
				return;
			}
			//2、后端的验证
			hasUserBack();
		});

		$("#btnReg").click(function(){
			//1、前端验证
			if(isTest()==false){
				$("#messageBox").html("亲，您的信息输入不全");
				return;
			}
			//2、用户名是否存在(后端验证)
			if(hasUser){
				return;
			}		

			$.post(
				"addUser.php",
				{
					"username":$("#username").val(),
					"userpass":$("#userPass").val()
				},
				function(data){
					if(data=="success"){
						$("#messageBox").css({"color":"green"});
						$("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
						setTimeout(()=>{
							location.href="login.html";
						},2000);
					}else if(data=="fail"){
						$("#messageBox").css({"color":"red"});
						$("#messageBox").html("不好意思，注册失败!");
					}else{
						$("#messageBox").css({"color":"red"});
						$("#messageBox").html("不好意思，服务器出问题了!");
					}
				}
			);
		});
	});
	
</script>
我的代码没bug
发布了9 篇原创文章 · 获赞 2 · 访问量 265
私信关注
注册页面的完整实现,前端验证+后端验证

猜你喜欢
