PHP实现带有验证码的登陆注册

开发工具

Wampserver

WampServer就是Windows下 Apache+Mysql+PHP集成安装环境，即在window下的apache、php和mysql的服务器软件，通俗的说，就是它集成了php开发所需要的数据库软件，服务器和PHP解释器，这将很大程度上减少开发的时间

Navicat

Navicat是一套快速、可靠的数据库管理工具，是以直觉化的图形用户界面而建的。将数据库更加形象直观的展现在你的面前，避免的命令行的大黑框，让你可以以安全并且简单的方式创建、组织、访问并共用信息

代码展示

login.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <link rel="stylesheet" href="./css/login.css">
    <body>
        <!-- 实现在表单顶部登陆和注册页面的转换 -->
        <header id="header" class="header">
            <a href="register.html">注册</a>  
            <a href="login.html">登陆</a>
        </header>  

        <div class="content">
            <label><input type="text" name="username" placeholder="用户名" value="" ></label>
            <label><input type="password" name="password" placeholder="密码" value=""></label>
            <label><input type="text" value="" name="checkNum" placeholder="请输入验证码"></label>
            <img src="validcode.php" style="100px;height:25px;" id="code"/>
            <a href="javascript:changeCode()">看不清，换一张</a>
            <button class="btn" id="submit">提交</button>

        </div>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            //点击图片更新验证码
            function changeCode() {

               document.getElementById("code").src = "validcode.php?id=" + Math.random();
            }
            //敲击空格提交请求
            $(document).keyup(function(event){ 
                if(event.keyCode ==13){ 
                $("#submit").trigger("click"); 
                } 
            });
            //对于请求进行非空验证
            $("#submit").click(function(){
                var username = $("input[name='username']").val();
                var password = $("input[name='password']").val();
                var checkNum = $("input[name='checkNum']").val();

                if(username==undefined||username===''){
                    alert("用户名不能为空");
                    return;
                }
                if(password==undefined||password==''){
                    alert("密码不能为空");
                    return;
                }
                if(checkNum==undefined||checkNum==''){
                    alert("请输入验证码");
                    return;
                }
                //将请求提交到后台
                $.post(
                    'login.php',
                    {"username":username,"password":password,"checkNum":checkNum},
                     function (result) {
                     //对后台返回信息进行处理
                    if (result.indexOf('success')!=-1) {
                        window.location.href="https://www.baidu.com";
                        //登陆成功跳转到百度首页
                    } else {
                        alert(result);
                    }
                })
            })



    </script>
    </body>
</html>

login.css

head,body{
    margin: 0;
    padding: 0;
}


#header{
    width: 400px;
    height: 40px;
    margin:auto;
    background-color: red;
    margin-top: 500px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

#header a{
    float: left;
    margin-left: 100px;
    text-decoration: none;
}

.content{
    width: 400px;
    height: 200px;
    margin-left: auto;
    margin:auto;
    margin-top: 0px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;

}
.content label input {
    width: 395px;
    height: 50px;
    margin-top: 0px;
}

login.php

<?php
session_start();
$con=mysql_connect("localhost:3306","数据库用户名（默认为：root）","你的数据库密码");
if(!$con){
    die('Clould not connect:'.mysql_errno());
}


$salt = 'left';
//对前台传来的数据进行特殊字符的转义，能够有效的防止sql注入等
$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string(md5($salt.$_POST['password']));
$checkNum = $_POST["checkNum"];
mysql_select_db("mysql",$con);
$feedback = "账户密码错误";

if($checkNum==$_SESSION["validcode"]){

   $SQL="select username from login where username='$username' and password='$password'"; 
   $result=mysql_query($SQL);
   $rows=mysql_num_rows($result);
   if($rows!==1){
       echo $feedback;
   }
   else{
       $feedback="success"; 
       echo $feedback;
   }
}
?>

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<link rel="stylesheet" href="./css/register.css">
<body>
<header id="header" class="header">
    <a href="register.html">注册</a>
    <a href="login.html">登陆</a>
</header>

<div class="content">
    <label><input type="text" name="username" placeholder="用户名" value=""></label>
    <label><input type="password" name="password" placeholder="密码" value=""></label>
    <label><input type="password" name="confirm" placeholder="确认密码"></label>
    <label><input type="text" value="" name="checkNum" placeholder="请输入验证码"></label>
    <img src="validcode.php" style="100px;height:25px;" id="code"/>
    <a href="javascript:changeCode()">看不清，换一张</a>
    <button class="btn" id="submit">提交</button>

</div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

    function changeCode() {

        document.getElementById("code").src = "validcode.php?id=" + Math.random();
    }


    $(document).keyup(function(event){ 
                if(event.keyCode ==13){ 
                $("#submit").trigger("click"); 
                } 
            });


    $("#submit").click(function () {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var password_confirm = $("input[name='confirm']").val();
        var checkNum = $("input[name='checkNum']").val();


        if (username == undefined || username === '') {
            alert("用户名不能为空");
            return;
        }
        if (password == undefined || password == '') {
            alert("密码不能为空");
            return;
        }
        if (password_confirm == undefined || password_confirm == '') {
            alert("请确认密码");
            return;
        } else if (password_confirm !== password) {
            alert("两次输入的密码不一致");
            return;
        }
        if (checkNum == undefined || checkNum == '') {
            alert("请输入验证码");
            return;
        }
        $.post(
                'register.php',
                {"username": username, "password": password,"checkNum":checkNum},
                function (result) {
                    if (result.indexOf('注册成功')!=-1) {
                        window.location.href="login.html";
                        alert("注册成功");
                    } 
                    if (result.indexOf('该用户已经存在')!=-1) {
                        window.location.href="register.html";
                        alert("该用户已经存在");
                    } 
                })
    })

</script>
</body>
</html>

register.css

head,body{
    margin: 0;
    padding: 0;
}


#header{
    width: 400px;
    height: 40px;
    margin:auto;
    background-color: red;
    margin-top: 500px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

#header a{
    float: left;
    margin-left: 100px;
    text-decoration: none;
}

.content{
    width: 400px;
    height: 250px;
    margin-left: auto;
    margin:auto;
    margin-top: 0px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}
.content label input {
    width: 395px;
    height: 50px;
    margin-top: 0px;
}

register.php

 <?php


session_start();
$salt = 'left';
$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string(md5($salt.$_POST['password']));
$checkNum = $_POST["checkNum"];
$feedback = "注册失败";

if($checkNum==$_SESSION["validcode"]){
    $con=mysql_connect("localhost:3306","","");

    if(!$con){
    die('Clould not connect:'.mysql_errno());
    }
    mysql_select_db("mysql",$con); 

    $SQL="select * from login where username='$username'";
    $result=mysql_query($SQL);
    $rows=mysql_num_rows($result);
    if($rows>=1){  
        $feedback="该用户已经存在";
    }                                                        
    else{  
        $sql_insert = "insert into login (username,password) 
        values ("."'$username',"."'$password')" ;  
                    $res_insert = mysql_query($sql_insert);   
                    if($res_insert)  
                    {  
                       $feedback="注册成功";  
                    }  
                    else  
                    {  
                       $feedback="注册失败";  
                    }  
                }  
}

echo $feedback;
mysql_close();
?>

vaildcode.php

<?php   

    header("Content-Type:image/png");  

    //开启session  
    session_start();  

    //随机4个数字  
    $code = "";  
    $arr = array();  
    for($i=0;$i<4;$i++){  

        $arr[$i] = rand(0,9);  
        $code .= (string)$arr[$i];  
    }  

    //设置入session中，方便比对  
    $_SESSION["validcode"] = $code;  

    //开始绘图  
    $width = 100;  
    $height = 25;  
    $img = imagecreatetruecolor($width,$height);  

    //填充背景色  
    $backcolor = imagecolorallocate($img,0,0,0);  
    imagefill($img,0,0,$backcolor);  

    //获取随机较深颜色   
    for($i=0;$i<4;$i++){  

        $textcolor = imagecolorallocate($img,rand(50,180),rand(50,180),rand(50,180));   
        imagechar($img,12,7+$i*25,3,(string)$arr[$i],$textcolor);  
    }  

    //显示图片  
    imagepng($img);  

    //销毁图片  
    imagedestroy($img);  
?>

最后将register.css和login.css文件放在项目的css文件夹下即可，图片为项目目录

这是数据库的表设计
表格式

接下来，我们就将整个项目的文件夹放在wamp安装目录的www文件夹下即可，例如博主的wamp安装在E盘，项目名为csdn,则目录为
运行目录
然后我们就启动wampserver软件，等它由红色变为绿色后，在浏览器输入http://localhost/csdn/login.html
这里写图片描述
大功告成；

注意事项：

Ajax和form提交请求的区别？
Ajax在提交、请求、接收时，都是异步进行的，网页不需要刷新；必须要使用JS来实现，不启用JS的浏览器，无法完成该操作；
Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也是需要刷新的；不需要JS

源码地址

下载地址
 Github地址

扫码关注作者个人技术公众号,有关技术问题后台回复即可，不定期将有学习资源分享

博客园：https://www.cnblogs.com/newtol 微信公众号：Newtol 【转发请务必保留原作者，否则保留追责权利】