js和php實現用戶注冊功能

一、功能介紹

使用語言： html ＋ javascript + ajax + php

后端數據庫：MySQL

(* 這里不涉及到樣式)

成功注冊流程：

①  注冊頁面(register.html)，該頁面提供一個 form表單，收集用戶信息。

②  提交后轉到register.php頁面，利用php將注冊信息添加到數據庫中。

二、實現代碼

（1） 創建MySql數據庫中的用戶信息表

需求：創建用戶信息表:

代碼：

CREATE TABLE xxx_user(
  uid INT PRIMARY KEY AUTO_INCREMENT,
  uname VARCHAR(32),
  upwd VARCHAR(32),
  email VARCHAR(64),
  phone VARCHAR(16),
  gender INT     #性別  0-女  1-男
);

（2） HTML頁面布局代碼

需求：創建一個register.html（非ajax），提供以下控件（表單）——

● 登錄名稱-文本框

● 登錄密碼-密碼框

● 確認密碼-密碼框

● 用戶郵箱-電子郵件

● 聯系方式-文本框

● 用戶性別-下拉框

● 注冊按鈕

代碼

<form action="./data/users/register.php" method="post">
<!--
1.注冊信息不用異步加載，直接提交表單；失去焦點時驗證用戶名密碼是否正確，再用ajax異步加載數據；
2.form表單作用：收集用戶信息并提交給服務器；
3.屬性action作用：定義表單被提交時發生的動作，通常定義的是服務器上處理程序的地址(url)，提交到注冊的php文件，默認提交給本頁；
4.屬性method作用：指定表單數據的提交方式。
  get(默認值)——明文提交，待提交的數據會顯示在地址欄上；
  post——隱式提交，提交的數據不會顯示在地址欄上。
-->
    <!--控件提交信息，嵌套在form標記里面-->
    <!--登錄名稱-文本框-->
    <p>
        登錄名稱：<input type="text" id="uname" name="uname" onblur="check_name()">
        <!--提示用戶名是否一致的位置-->
        <span id="uname-show"></span>
        <!--提交數據時提交name屬性的值，點擊submit時，name屬性通過表單form提交數據，同步提交數據-->
    </p>
    <!--登錄密碼-密碼框-->
    <p>
        登錄密碼：<input type="password" id="upwd" name="upwd">
        <!--name值與id值可以重復，name值用于提交給服務器，id值在前端用-->
    </p>
    <!--確認密碼-密碼框-->
    <p>
        確認密碼：<input type="password" id="cpwd" name="cpwd" onblur="check_pwd()">
        <!--onblur為失去焦點屬性，調用判斷密碼是否一致的函數-->
        <!--用于提示兩次密碼是否一致的位置-->
        <span id="pwd-show"></span>
    </p>
    <!--用戶郵箱-電子郵件-->
    <p>
        電子郵箱：<input type="email" name="email">
        <!--type="email" 可做簡單的格式驗證-->
    </p>
    <!--聯系方式-文本框-->
    <p>
        手機號碼：<input type="text" name="phone">
    </p>
    <!--用戶性別-下拉框-->
    <p>
        用戶性別：
        <select name="gender">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
        <!--下拉列表和選項，往數據庫中插入的是value的值-->
    </p>
    <!--注冊按鈕-->
    <p>
        <input type="submit" value="注冊">
        <!--submit按鈕的表單提交數據，是同步訪問數據的方式-->
    </p>
</form>

（3） 創建register.php

需求：①  在init.php中，封裝會重復用到的連接數據庫

代碼如下：

<?php
//data/init.php
//創建到服務器的連接，連接數據庫
$conn=mysqli_connect("127.0.0.1","root","","knewone",3306);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);

需求：②  接收register.html提交過來的數據，并插入到數據庫，再給出提示

代碼如下：

<?php
//data/users/register.php
#1.獲取請求提交的數據
    $uname=$_REQUEST["uname"];
    //uname值就是前端頁面中name屬性的值
    $upwd=$_REQUEST["upwd"];
    //確認密碼不用獲取，獲取一個密碼就行
    $email=$_REQUEST["email"];
    $phone=$_REQUEST["phone"];
    $gender=$_REQUEST["gender"];
#2.連接到數據庫
    require("../init.php");
#3.拼sql語句并執行
    $sql="insert into xxx_user(uname,upwd,email,phone,gender)values('$uname','$upwd','$email','$phone','$gender')";
    //字段值 外面用雙引號，里面用單引號
    $result=mysqli_query($conn,$sql);
    //執行sql語句
#4.根據執行結果給出響應
    if($result==true){ //函數返回值
        echo "注冊成功";
    }else{
        echo "注冊失敗";
    };

（4） javascript代碼

需求：①  封裝能重用到的函數

代碼如下：

<script>
//1.封裝函數，獲取id值
function $(id){
  return document.getElementById(id);
}
//2.創建xhr對象
function createXhr(){
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest(); //標準創建
    }else{
        //IE8以下的創建方式
        xhr=new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}
</script>

需求：②  實現前端頁面中完成驗證用戶名稱的重復性和兩次密碼是否一致的功能

代碼如下：

<script src="./js/common.js"></script>
<script>
    //1.完成用戶名稱的重復性驗證（異步，檢查數據庫中是否已存在當前用戶名）
    //異步請求數據，因為還要輸入下面的數據，不能跳轉到php頁面去驗證
    function check_name(){
        //1.創建XHR對象 創建異步對象
        var xhr=createXhr(); //調用common.js中封裝好的函數
        //2.創建請求
        var uname=$("uname").value;
        //獲取輸入框里的值，把用戶名傳到后端，再查詢
        var url="./data/users/check-name.php?uname="+uname;
        xhr.open("get",url,true);
        //查詢用戶名稱，用get方法就行，去數據庫查詢，看用戶名是否已經存在
        //查詢用get就行，向服務器提交數據時再用post
        //3.設置回調函數，監聽狀態
        //參數true，異步
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
            //判斷狀態，xhr請求狀態為4，表示接收響應數據成功；當status的值是200的時候，表示服務器已經正確的處理請求以及給出響應
            $("uname-show").innerHTML=xhr.responseText;
            //提示內容
            };
        };
            //4.發送請求
            xhr.send(null);
            //get請求，參數寫null
        }
//2.定義函數，判斷兩次密碼是否一致
//當確認密碼框失去焦點時，驗證兩次輸入的密碼是否一致，并給出提示（通過/密碼不一致）
    //給upwd 和 cpwd 加id
    function check_pwd(){
        //1.獲取兩個密碼框的值
        var upwd=$("upwd").value; 
        //$("upwd") 獲取id值，函數在common.js中封裝
        var cpwd=$("cpwd").value;
        if(upwd==cpwd && upwd!=""){ 
        //判斷是否相等，且密碼不為空
            $("pwd-show").innerHTML="通過";  
            //提示到span中，用innerHTML
        }else{
            $("pwd-show").innerHTML="兩次密碼輸入不一致";
        };
    };
</script>

（5） 驗證用戶名是否重復的php代碼

功能：接受前端傳來的uname值，查詢數據庫中是否存在同樣的名稱，并給出返回提示

代碼如下：

<?php
//data/users/check-name.php
#1.連接數據庫
  require("../init.php");
#2.接收前端傳過來的uname
  $uname=$_REQUEST["uname"];
#3.拼接sql，并查詢uname是否存在
  $sql="SELECT * FROM xxx_user uname='$uname'";
  $result=mysqli_query($conn,$sql);
#4.根據查詢的結果輸出相應
  $row=mysqli_fetch_row($result);
  //抓取一條數據，即當前uname對應的數據
  if($row==null){
  //如果$row為空，即數據庫中沒有相同的用戶名存在
    echo "通過";
  }else{
    echo "用戶名稱已存在";
  };

以上就是php+javascript實現用戶注冊模塊（附源碼）的詳細內容，更多請關注億速云其它相關文章！