基于ajax+php+mysql数据库实现用户注册登录

最新推荐文章于 2024-07-24 22:43:23 发布

戏里戏外。

最新推荐文章于 2024-07-24 22:43:23 发布

阅读量6k

点赞数 8

分类专栏： ajax+php+mysql 文章标签： javascript 功能 ajax php mysql

本文链接：https://blog.csdn.net/hjw453321854/article/details/78810979

版权

ajax+php+mysql 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.注册登录界面：

form.html

<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<link href="form.css" rel="stylesheet"/>
<style>
*{margin:0;padding:0;}

</style>
<body>
<div class="bg">
	<img src="bg_img.jpg" style="width:100%;height:100%;">
	<div class="Forms">
		<div class="Forms_box">
			<div class="Forms_head">
				<a class="a1">快速注册</a>
				<a class="a2 active">快速登录</a>
			</div>
			<div class="submit ">
				<form action="signup.php" method="POST" class="Form1" id="Form1" οnsubmit="return check()">
					<span>账号 : </span><input class="input1" type="username" name="signup_userName" οnblur="signupusername()" required placeholder="请输入手机号">
					<p class="text1">手机号码有误</p><p class="text2"></p>
					<span>密码 : </span><input class="input2" type="password" name="signup_passWord" οnblur="signuppassword()" required placeholder="请输入密码">
					<p class="text">密码必须由6-12位数字加字母组成</p>
					<p class="yz">
						<span>验证码 :</span>
						<input type ="text" id="text" class="yz_text" required placeholder="请输入验证码">    
            						<input type="button" id="code" οnclick="Code()" title='点击更换验证码' >
					</p>
					<input class="sub1" type="submit" value="立即注册">
				</form>
			</div>
			<div class="submit action">
				<form action="login.php" method="POST">
					<span>账号 : </span><input class="input3" type="username" name="login_userName" required placeholder="请输入手机号" >
					<span>密码 : </span><input class="input4" type="password" name="login_passWord" required placeholder="请输入密码">
					<input class="sub2" type="submit" value="立即登录">
				</form>
			</div>
		</div>
	</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="form.js" charset="utf-8"></script>
</body>
</html>

form.css

@charset "utf-8;"
body,ul,li,a,p,span{font-family:"微软雅黑"}
a{text-decoration:none;}

.bg{position:relative;}
.bg .Forms{width:400px;height:300px;position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-150px;box-shadow:1px 1px 50px #999;border-radius:10px;background:#fff;}
.bg .Forms .Forms_box{width:400px;height:300px;position:relative;}
.bg .Forms .Forms_box .Forms_head{width:400px;height:50px;line-height:50px;border-bottom:2px solid #ccc;}
.bg .Forms .Forms_box .Forms_head .a1{width:80px;height:40px;line-height:40px;text-align:center;color:#333;font-size:18px;position:absolute;top:10px;left:70px;cursor:pointer;}
.bg .Forms .Forms_box .Forms_head .active{border-bottom:2px solid #19bfe8;}
.bg .Forms .Forms_box .Forms_head .a2{width:80px;height:40px;line-height:40px;text-align:center;color:#333;font-size:18px;position:absolute;top:10px;right:70px;cursor:pointer;}
.bg .Forms .Forms_box .submit{width:260px;height:150px;margin:30px 70px;position:absolute;display:none;top:50px;}
.bg .Forms .Forms_box .submit form input{width:200px;height:30px;line-height:30px;padding-left:3px;font-size:12px;color:#000;outline:none;}
.bg .Forms .Forms_box .submit form .input4{margin-top:25px;}
.bg .Forms .Forms_box .submit form span{font-size:16px;margin-right:10px;}
.bg .Forms .Forms_box .submit form .text1{height:15px;text-align:left;font-size:12px;color:red;margin:5px 0 5px 0;padding-left:55px;opacity: 0}
.bg .Forms .Forms_box .submit form .text2{width:260px;height:15px;text-align:left;font-size:12px;color:red;margin:5px 0 5px 0;padding-left:55px;position:absolute;top:30px;}
.bg .Forms .Forms_box .submit form .text{height:15px;height:15px;text-align:left;font-size:12px;color:#fff;margin-top:5px;padding-left:55px;}
.bg .Forms .Forms_box .submit form .yz{width:260px;height:30px;margin:5px 0 0 -16px;}
.bg .Forms .Forms_box .submit form .yz_text{width:100px;height:30px;line-height:30px;display:inline-block;outline:none;}
.bg .Forms .Forms_box .submit form #code{width:70px;height:30px;line-height:30px;color:green;border:0;font-size:18px;letter-spacing:3px;font-weight:bolder;margin-left:10px;outline:none;} 
.bg .Forms .Forms_box .submit .sub1{width:100px;height:30px;margin:20px 0 0 55px;display:block;cursor:pointer;background:#19bfe8;color:#fff;border-radius:5px;border:0px;font-size:14px;}
.bg .Forms .Forms_box .submit .sub2{width:100px;height:30px;margin:20px 0 0 50px;display:block;cursor:pointer;background:#19bfe8;color:#fff;border-radius:5px;border:0px;font-size:14px;}
.bg .Forms .Forms_box  .action{display:block;}

form.js

$(document).ready(function(){
    $(".bg .Forms .Forms_box .Forms_head a").click(function(){
        var index=$(this).index();
        $(this).addClass("active").siblings().removeClass("active")
        $(".bg .Forms .Forms_box div").eq(index+1).addClass("action").siblings().removeClass("action")
    })

})

var code;
var text=document.getElementById('text');
var checkCode =document.getElementById("code");  
var Form1=document.getElementById("Form1");
window.οnlοad=Code();
function Code(){  
             code = "";     
             var codeLength = 4;       
             var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',    
             'S','T','U','V','W','X','Y','Z'); 
             for(var i = 0; i < codeLength; i++) {  
                var index = Math.floor(Math.random()*36);   
                code += random[index];
            }    
            checkCode.value = code; 
        }  

$(".bg .Forms .Forms_box .submit form .yz_text").blur(function(){
            if(text.value.toUpperCase().length <= 0 || text.value.toUpperCase() != code) {   
                $(".bg .Forms .Forms_box .submit form .yz_text").css("border","1px solid red");
            }else {   
                $(".bg .Forms .Forms_box .submit form .yz_text").css("border","1px solid #19bfe8")
            }  
        })

var flag=false;
var usernamereg = /^1(3|4|5|7|8)\d{9}$/;
var passwordreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/;
var checkusername = document.getElementById("signup_username");
function signupusername(){
    if(!usernamereg.test($(".bg .Forms .Forms_box .submit .input1").val())){
        $(".bg .Forms .Forms_box .submit .text1").css("opacity","1")
    }else{
        $(".bg .Forms .Forms_box .submit .text1").css("opacity","0")
    }
if($(".bg .Forms .Forms_box .submit .input1").val().length>0){
    var xhr=new XMLHttpRequest();
    var data="name="+$(".bg .Forms .Forms_box .submit form .input1").val();
    xhr.onreadystatechange=function(){ 
    if (xhr.readyState==4 && xhr.status==200){ 

$(".bg .Forms .Forms_box .submit form .text2").html(xhr.responseText);	
	
    } 
}
xhr.open("POST","check.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
}

function signuppassword(){
    if(!passwordreg.test($(".bg .Forms .Forms_box .submit .input2").val())){
        $(".bg .Forms .Forms_box .submit form .text").css("color","red")
    }else{
        $(".bg .Forms .Forms_box .submit .input2").css("border","1px solid #19bfe8")
        $(".bg .Forms .Forms_box .submit form .text").css("color","#fff")
    }
}

function check(){
console.log($(".bg .Forms .Forms_box .submit form .text2").text())
if(!usernamereg.test($(".bg .Forms .Forms_box .submit .input1").val()) || !passwordreg.test($(".bg .Forms .Forms_box .submit .input2").val())){
        return false;
    }else if(text.value.toUpperCase().length <= 0 || text.value.toUpperCase() != code){
        return false;
    }else if($(".bg .Forms .Forms_box .submit form .text2").text() !=" "){	
        return false;
   }else{
        return true;
}
}

检查手机号是否注册check.php

<?php
$con = mysqli_connect('localhost', 'username', 'password');
if(! $con )
{
    die('连接失败: ' . mysqli_error($con));
}
mysqli_select_db($con,'bdm256727651_db');
$username = "select userName FROM Forms where userName = '$_POST[name]' ";
$result = mysqli_query($con,$username );
$rows=mysqli_num_rows($result);
if($rows){
	echo "手机号已注册";
	exit;
}else{
	echo " ";
	exit;
}

mysqli_close($con)
?>

验证成功保存到数据库signup.php

<?php
$con = mysqli_connect('localhost', 'username', 'password');
if(! $con )
{
    die('连接失败: ' . mysqli_error($con));
}
mysqli_select_db($con,'bdm256727651_db');
$sql=" INSERT INTO Forms (userName, passWord)
VALUES('$_POST[signup_userName]','$_POST[signup_passWord]') ";
mysqli_query($con,$sql);
echo "<script>window.location.href='signup.html';</script>";	
mysqli_close($con)
?>

注册成功返回页面

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册成功</title>
    </head>
    <body>
        注册成功，请立即登录。
    </body>
</html>

登录验证用户名密码login.php

<?php

$con = mysqli_connect('localhost', 'username', 'password');
if(! $con )
{
    die('连接失败: ' . mysqli_error($con));
}

mysqli_select_db($con,'bdm256727651_db');
$sql = "select userName,passWord FROM Forms where userName = '$_POST[login_userName]' and passWord='$_POST[login_passWord]'";
$result = mysqli_query($con,$sql );
$rows=mysqli_num_rows($result);

if($rows){
   echo "<script>window.location.href='login.html';</script>";
   exit;
}else{
       echo "用户名或密码错误";
       echo "
       <script>
           setTimeout(function(){window.location.href='form.html';},3000);
        </script>";
     }

mysqli_close($con)

?>

登录成功返回页面login.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登陆成功</title>
    </head>
    <body>
        欢迎光临，登录成功！！！
    </body>
</html>

数据库表界面