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

2017-12-15 19:28:47来源:CSDN作者:hjw453321854人点击

分享

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>

数据库表界面




最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台