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

转至https://blog.csdn.net/hjw453321854/article/details/78810979

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" onsubmit="return check()">
<span>账号 : </span><input class="input1" type="username" name="signup_userName" onblur="signupusername()" required placeholder="请输入手机号">
<p class="text1">手机号码有误</p><p class="text2"></p>
<span>密码 : </span><input class="input2" type="password" name="signup_passWord" onblur="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" onclick="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.onload=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>

数据库表界面

文章源代码下载：https://github.com/jwhuang59/demo/tree/master/form

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

猜你喜欢