php注册验证

注册验证是所有网站系统都要用到的基本功能，这里我们做一个基本的注册验证：

我们首先要建一张用户表：

然后引入bootstrap和jquery：

<script src="../jquery-1.11.2.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />

然后建一个表格并从bootstrap教程中引入bootstrap中的表单：

 <div id="kuangjia">
           
           
           <table width="500px" cellspacing="8px">
                <tr height="30px">
                      <td></td>
                      <td></td>
                  </tr>
                  <tr>
                      <th colspan="2" height="60px" style="text-align: center;font-size: 25px;">注&nbsp;&nbsp;册</th></tr>
                  <tr>
                      <td style="text-align: right;"> <span>用户名：</span>  </td>
                      <td> 
                          <input type="text" class="form-control"  placeholder="请输入用户名" id="uid" /><span id="tishi"></span>
             
                      </td>
                  </tr>
                  <tr height="10px">
                      <td></td>
                      <td></td>
                  </tr>
                  <tr>
                      <td style="text-align: right;">  <span>请输入密码：</span>  </td>
                      <td>
                            <input type="password" class="form-control"  placeholder="请输入密码" id="pwd" />               
                      </td>
                  </tr>
                  <tr height="10px">
                      <td></td>
                      <td></td>
                  </tr>
                  <tr>
                      <td style="text-align: right;">  <span>请再次输入密码：</span>  </td>
                      <td>
                            <input type="password" class="form-control"  placeholder="请再次输入密码" id="pwd1" onkeyup="validate()" /><span id="tishi1"></span>               
                      </td>
                  </tr>
                  <tr height="10px">
                      <td></td>
                      <td></td>
                  </tr>
                  <tr>
                      <td style="text-align: right;"> 姓名：</td>
                      <td> <input type="text" class="form-control"  placeholder="请输入姓名" id="name"></td>
                  </tr>
                  <tr height="15px">
                      <td></td>
                      <td></td>
                  </tr>
                  <tr>
                      <td style="text-align: center;"></td>
                      <td> <button type="button" class="btn  btn-primary  zc"  value="注册" >注册</button>
                      <a id="biaoqian" href="login.php">已有账号？立即登录</a></td>
                  </tr>
              </table>
  
        </form>
    </div>             

然后从bootstrap教程中引入一个模态框，修改一下：

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div style="margin:100px auto" class="modal-content" id="modal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">注册</h4>
            </div>
            <div class="modal-body">恭喜您注册成功</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
              
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>        

最重要的就是写方法事件，首先是验证用户名是否存在，用ajax传值：

$("#uid").blur(function(){
        //取数据
    var uid = $(this).val();
        
        //取数据库进行匹配
       $.ajax({
                   url:"jiance-cl.php",
                data:{uid:uid},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                        if(data.trim()=="OK")
                        {
                            $("#tishi").html("该用户名可用");
                            $("#tishi").css("color","green");    
                        }
                        else
                        {
                            $("#tishi").html("该用户名不可用!");
                            $("#tishi").css("color","red");
                        }
                    }
           })
    })

处理页面：jiance-cl.php:

<?php
$uid = $_POST["uid"];
require "DBDA.class.php";
$db = new DBDA();
$sql="select count(*) from users where uid='{$uid}'";
$arr=$db->query($sql);
if($arr[0][0])
{
    echo "NO";    
}
else
{
    echo "OK";    
}

填写用户名、密码、姓名，也是用ajax传值：

$(".zc").click(function(){
        var uid = $("#uid").val();
        var pwd = $("#pwd").val();
        var name = $("#name").val();
           if(uid!="" && pwd!="" && name!="")
            {$.ajax({
                        type:"post",
                        url:"zhuce-cl.php",
                        data:{uid:uid,pwd:pwd,name:name},
                        dataType:"TEXT",
                        success:function(data){
                            $("#myModal").modal('show');                        
                        }
                            
                });
            }
    })

注册处理页面zhuce-cl.php:

<?php
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];

$name = $_POST["name"];
$time = date("Y-m-d",time());

require "DBDA.class.php";
$db = new DBDA();

//$sql = "insert into users values ('{$uid}','{$pwd}','{$name}',0,'',0,'',0)";

if($uid =="zhangsan")
{
    $sql = "insert into users values ('{$uid}','{$pwd}','{$name}',0,'',1,'',0)";
//    echo $sql;    
}
else
{
      $sql = "insert into users values ('{$uid}','{$pwd}','{$name}',0,'',0,'',0)";
//  echo $sql;
}
echo $db->query($sql);

最后验证两次密码输入是否一致：

function validate() {
                  var pwd1 = document.getElementById("pwd").value;//获取第一次密码id
                  var pwd2 = document.getElementById("pwd1").value;//获取第二次密码id

            <!-- 对比两次输入的密码 -->
                  if(pwd1 == pwd2) {
                      document.getElementById("tishi1").innerHTML="<font color='green'>两次密码相同!</font>";
                      document.getElementById("submit").disabled = false;
                  }
                  else {
                      document.getElementById("tishi1").innerHTML="<font color='red'>两次密码不相同!</font>";
                    document.getElementById("submit").disabled = true;
                  }
              }

这样就完成了注册验证，看一下效果：背景图片可以自己设置：