注册功能（全）

编程语言 2018-12-08 23:38:17 阅读次数: 0

包括审核输入是否为空、是否符合设定，界面入下：

css如下：

.icon_user{background: url(../img/icon/user.png);}
.icon_pwd{background: url(../img/icon/pwd.png);}
.icon_phone{background: url(../img/icon/phone.png);}
.icon_email{background: url(../img/icon/email.png);}
.icon_address{background: url(../img/icon/address.png);}
/*登录注册*/
.systemname{width: 100%; height: 8rem; line-height: 8rem; text-align: center; color: #ff9933; background-color: #028056; font-size: 3rem;}
.logandreg{}
.logdiv,.regdiv{width: 35rem; height: 20rem; position: absolute; top: 26%; right: 10%;}
.loginname{font-size: 2rem; width: 62%; border-bottom: 1px solid #ff9933; color: #000000bd; margin-top: 1rem; margin-bottom: 1rem;}
.formdiv{width: 100%; height: 2.5rem; margin-bottom: 0.5rem;}
.formdiv img{position: absolute; top: 5rem;}
.formdiv input[type="text"],input[type="password"],input[type="phone"],input[type="email"]{width: 62%; height: 2.5rem; line-height: 2.5rem; text-align: left; text-indent: 2.5rem; background-repeat: no-repeat; background-position-y: center;}
.formdiv input[type="button"],button{width: 62.5%; height: 2.5rem; background-color: #f93; border: none; color: #ffffcc; cursor: pointer;}
/*登录按钮样式*/
#login:hover, #register:hover{background: #FFF; color: #ccc; border: 1px solid #ccc;}
/*注册按钮样式*/
.registerskip{background-color: #fff; color: #ccc; border: 1px solid #ccc;}
.registerskip:hover{background-color: #f93; color: #fff;}
/*忘记密码样式*/
.formdiv a{display: inline-block; width: 62%; text-align: right;}
/*底部*/
.footer{position: absolute; bottom: 0; width: 100%; border-top: 1px solid #ccc; margin-bottom: 0.1rem; padding-top: 1rem; line-height: 1.5rem; background-color: #0280561a;}
.footerle{float: left; width: 30%; height: 100%; margin-left: 6rem;}
.footerri{margin: 1rem auto;}
.footerri p{font-size: 0.8rem;}
.footerri a{color: #028056; font-size: 0.8rem;}

html（登录注册）如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="icon" type="image/x-icon" href="../img/favicon.ico" />
		<title>登录和注册</title>
		<link rel="stylesheet" href="../css/all.css" />
		<link rel="stylesheet" href="../css/icon.css" />
		<link rel="stylesheet" href="../css/index.css" />
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/suernk.js"></script>
	</head>

	<body>
		<div class="systemname">后台系统</div>
		<div class="logandreg">
			<div></div>
			<div class="logdiv">
				<div class="loginname">欢迎登陆</div>
				<form method="post">
					<div class="formdiv">
						<input type="text" class="icon_user" name="username" placeholder="登录名" />
					</div>
					<div  class="formdiv">
						<input type="password" class="icon_pwd" name="password" placeholder="密码" />
					</div>
					<div class="formdiv">
						<a href="#">忘记密码</a>
					</div>
					<div class="formdiv">
						<input type="button" name="submit" value="登陆" id="login" />
					</div>
					<div class="formdiv">
						<button type="button" value="注册" onclick="registerskip()" class="registerskip">注册</button>
					</div>
				</form>
			</div>
			<div class="regdiv">
				<div class="loginname">欢迎注册</div>
				<style>
					.prompt{color: #0000008c;}
				</style>
				<form method="post" class="register">
					<div class="formdiv">
						<input type="text" class="icon_user" name="user" placeholder="用户名" onchange="changeuser()" required="required"/>
						<span class="prompt" id="promptuser">*必须项</span>
					</div>
					<div class="formdiv">
						<input type="password" class="icon_pwd" name="pwd" placeholder="密码" required="required"/>
						<span class="prompt">*必须项</span>
					</div>
					<div class="formdiv">
						<input type="phone" class="icon_phone" name="phone" placeholder="联系方式" required="required" onchange="changephone()" />
						<span class="prompt" id="promptphone">*必须项</span>
					</div>
					<div class="formdiv">
						<input type="email" class="icon_email" name="email" placeholder="用户邮箱" required="required" onchange="changeemail()" />
						<span class="prompt" id="promptemail">*必须项</span>
					</div>
					<div class="formdiv">
						<input type="text" class="icon_address" name="address" placeholder="联系地址" required="required"/>
						<span class="prompt">*必须项</span>
					</div>
					<div class="formdiv">
						<input type="button" value="注册新用户" id="register" />
					</div>
				</form>
			</div>
		</div>
	
		<div class="footer">
			<div class="footerle">
				<img src="../img/icon/erweima.png" title="二维码" />
			</div>
			<div class="footerri">
				<p><a href="affiche.html" target="_blank">使用前必读</a></p>
				<p>联系方式：</p>
				<p>邮箱：[email protected]</p>
				<p>联系地址：北京市朝阳区朝阳公园xxxx</p>
				<p>备案信息：京-</p>
			</div>
		</div>


		<script>

			$(function() {
				//防止页面后退
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', function() {
					history.pushState(null, null, document.URL);
				});
			});

//			显示注册和登录div
			$('.regdiv').css("display","none");
			function registerskip() {
				$('.regdiv').css("display","");
				$('.logdiv').css("display","none");
			}
			
			
			var username = $("input[name='username'").val();
			var password = $("input[name='password'").val();
			
			
		
//			判断用户名是否已经被注册
			function changeuser(){
				var user = $("input[name='user']").val();
				$.ajax({
					type: "post",
					url: "../php/decideuser.php",
					data: {
						user: user,
					},
					dataType: 'text',
					async: true,
					success: function(data){
						//						获取第一个字符,即状态
						var status = data.substring(0, 1);
						//						获取除了第一位后的所有字符串
						var contentspan = data.substring(1, data.length);
						if(status == 0) {
							$("#promptuser").css("color", "#f93");
							$("#promptuser").text(contentspan);
//							禁止注册按钮
							$("#register").attr("disabled",true);
							$("#register").css("cursor","no-drop");
						} else if(status == 1) {
							$("#promptuser").css("color", "#009966");
							$("#promptuser").text(contentspan);
							$("#register").attr("disabled",false);
							$("#register").css("cursor","pointer");
						} 
					}
				});
			}
			
//			判断手机号是否已经被注册
			function changephone(){
				var phone = $("input[name='phone']").val();
				var rulephone = /^1[34578][0-9]{9}/;
				if(!rulephone.test(phone)){
//					设置右侧提示
					$("#promptphone").css("color", "#f93");
					$("#promptphone").text("请输入正确格式的手机号");
//					禁止注册按钮
					$("#register").attr("disabled",true);
					$("#register").css("cursor","no-drop");
					
				}else{
					$("#register").attr("disabled",false);
					$("#register").css("cursor","pointer");
					$.ajax({
					type:"post",
					url:"../php/decidephone.php",
					async:true,
					data: {phone: phone,},
					dataType: 'text',
					success: function(data){
						//						获取第一个字符,即状态
						var status = data.substring(0, 1);
						//						获取除了第一位后的所有字符串
						var contentspan = data.substring(1, data.length);
						if(status == 0) {
							$("#promptphone").css("color", "#f93");
							$("#promptphone").text(contentspan);
						} else if(status == 1) {
							$("#promptphone").css("color", "#009966");
							$("#promptphone").text(contentspan);
						} 
					}
				});
				}
			}
			
//			判断邮箱输入是否符合格式
			function changeemail(){
				var email = $("input[name='email']").val();
				var rullemail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
				if(!rullemail.test(email)){
//					设置右侧提示
					$("#promptemail").css("color", "#f93");
					$("#promptemail").text("请输入正确格式的邮箱");
//					禁止注册按钮
					$("#register").attr("disabled",true);
					$("#register").css("cursor","no-drop");
				}else{
					$("#promptemail").css("color", "#0000008c");
					$("#promptemail").text("*必须项");
					$("#register").attr("disabled",false);
					$("#register").css("cursor","pointer");
				}
			}
			
//			注册功能
			$('#register').click(function() {
				var user = $("input[name='user']").val();
				var pwd = $("input[name='pwd']").val();
				var phone = $("input[name='phone']").val();
				var email = $("input[name='email']").val();
				var address = $("input[name='address']").val();
				if(user==""||pwd==""||phone==""||email==""||address==""){
					error("存在空值，请确保已经填上必须值");
				}else{
					$.ajax({
					type: "post",
					url: "../php/register.php",
					data: {
						user: user,
						pwd: pwd,
						phone: phone,
						email: email,
						address: address
					},
					dataType: 'text',
					async: true,
					success: function(data) {
						//						获取第一个字符,即状态
						var status = data.substring(0, 1);
						//						获取除了第一位后的所有字符串
						var contentspan = data.substring(1, data.length);
						console.log(status);
						console.log(contentspan);
						if(status == 0) {
							warn(contentspan);
						} else if(status == 1) {
							success(contentspan);
							setTimeout(function(){
								window.location.reload();
							},2000);
						} else if(status == 2) {
							error(contentspan);
						}
					}
				});
				}
				
				
			});
			

		</script>
	</body>

</html>

链接数据库connect.php：

<?php
//连接数据库
 
//连接数据库
	$servername = "localhost";
	$username = "root";
	$password = "lJPi1KOvGwwplD9o"; 
	$dbname = "sgh";
	$port = "3306";
 
// 创建连接
	$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
	if ($conn->connect_error) {
    	die("连接失败: " . $conn->connect_error);
	} 
 
?>

验证用户名是否已被注册decideuser.php：

<?php
//	超级用户注册功能
	header('Content-type:text/html;charset=utf-8');
//	连接数据库
	include "connect.php";

	$user = $_REQUEST['user'];

	
//	判断是否已经存在将要注册的用户名
	$searchuser = "select * from user where user='$user'";
//	$searchphone = "select * from user where phone='$phone'";
	$seresult = $conn->query($searchuser);
	if($seresult->num_rows>0){
		$status = 0;
		$contentspan = "该用户名被注册，请换其他";
		echo $status;
   		echo $contentspan;
	}else{
		$status = 1;
		$contentspan = "该用户名未被注册，可用";
		echo $status;
   		echo $contentspan;
	}

?>

验证手机号是否已被注册decidephone.php：

<?php
//	超级用户注册功能
	header('Content-type:text/html;charset=utf-8');
//	连接数据库
	include "connect.php";

	$phone = $_REQUEST['phone'];

	
//	判断是否已经存在将要注册的用户名
	$searchphone = "select * from user where phone='$phone'";
	$seresult = $conn->query($searchphone);
	if($seresult->num_rows>0){
		$status = 0;
		$contentspan = "该手机号被注册，请换其他";
		echo $status;
   		echo $contentspan;
	}else{
		$status = 1;
		$contentspan = "该手机号未被注册，可用";
		echo $status;
   		echo $contentspan;
	}

?>

注册功能register.php：

<?php
//	超级用户注册功能
	header('Content-type:text/html;charset=utf-8');
//	连接数据库
	include "connect.php";

//	获取所上传图片路径，已经重新
//	include "img.php";
//名称	字段	类型	长度	是否为空	主键	备注
//序号	userid	int	10	否	是	用户名唯一标识
//用户名	user	varchar	50	否		用户登录名（最好是实名）
//密码	password	varchar	50	否		用户登录密码
//联系方式	phone	varchar	50	否		用户联系方式
//用户邮箱	email	varchar	255	是		用户邮箱
//联系地址	address	varchar	50	否		用户联系地址
//信用等级	credit	int	2	否		1-5逐次升高
//平台态度	manner	int	2	否		1-5（推崇、向上、可以、警告、封号）
//用户类别	userclass	int	2	否		0超级管理员 1普通用户
//用户头像	userimg	mediumblob	0	是		用户头像			
//创建时间	createtime	newtime	20	否		更改时间
	

	$user = $_REQUEST['user'];
	$password1 = $_REQUEST['pwd'];
	$phone = $_REQUEST['phone'];
	$email = $_REQUEST['email'];
	$address = $_REQUEST['address'];
	$credit = "1";
	$manner = "3";
	$userclass = "1";
//	访问img.php下的uploadimg函数，上传图片，返回上传路劲，如下为重命名为$user所代表内容，
//	$userimg = uploadimg($user); 此功能暂时剔除，设定为更改个人信息处上传
	$createtime = date("Y/m/d h:i:s");
//	密码加密
	$password = password_hash($password1, PASSWORD_DEFAULT);
	
	if($user==""||$password1==""||$phone==""||$email==""||$address==""){
		$status = 0;
		$contentspan = "存在空值，请确保已经填上必须值";
		echo $status;
   		echo $contentspan;
	}else{
		$sqlinsert = "INSERT INTO user (user, password, phone, email, address, credit, manner, userclass, createtime) VALUES ('".$user."','".$password."','".$phone."','".$email."','".$address."','".$credit."', '".$manner."', '".$userclass."', '".$createtime."')";
		if ($conn->query($sqlinsert) === TRUE) {
			$status = 1;
   			$contentspan = "新用户注册成功，请登录";
   			echo $status;
   			echo $contentspan;
		} else {
			$status = 2;
   			$contentspan = "注册出错,请重新注册！";
   			echo $status;
   			echo $contentspan;
		}
	}

?>

很感谢猿（媛）们好看的界面分享，让我能够提升审美，仿照做出比较好看些的界面

小白共勉

猜你喜欢

转载自blog.csdn.net/weixin_42574481/article/details/84892831
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022