js和php實(shí)現(xiàn)用戶注冊(cè)功能

一、功能介紹

使用語(yǔ)言： html ＋ javascript + ajax + php

后端數(shù)據(jù)庫(kù)：MySQL

(* 這里不涉及到樣式)

成功注冊(cè)流程：

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

②  提交后轉(zhuǎn)到register.php頁(yè)面，利用php將注冊(cè)信息添加到數(shù)據(jù)庫(kù)中。

二、實(shí)現(xiàn)代碼

（1） 創(chuàng)建MySql數(shù)據(jù)庫(kù)中的用戶信息表

需求：創(chuàng)建用戶信息表:

代碼：

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頁(yè)面布局代碼

需求：創(chuàng)建一個(gè)register.html（非ajax），提供以下控件（表單）——

● 登錄名稱-文本框

● 登錄密碼-密碼框

● 確認(rèn)密碼-密碼框

● 用戶郵箱-電子郵件

● 聯(lián)系方式-文本框

● 用戶性別-下拉框

● 注冊(cè)按鈕

代碼

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

（3） 創(chuàng)建register.php

需求：①  在init.php中，封裝會(huì)重復(fù)用到的連接數(shù)據(jù)庫(kù)

代碼如下：

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

需求：②  接收register.html提交過(guò)來(lái)的數(shù)據(jù)，并插入到數(shù)據(jù)庫(kù)，再給出提示

代碼如下：

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

（4） javascript代碼

需求：①  封裝能重用到的函數(shù)

代碼如下：

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

需求：②  實(shí)現(xiàn)前端頁(yè)面中完成驗(yàn)證用戶名稱的重復(fù)性和兩次密碼是否一致的功能

代碼如下：

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

（5） 驗(yàn)證用戶名是否重復(fù)的php代碼

功能：接受前端傳來(lái)的uname值，查詢數(shù)據(jù)庫(kù)中是否存在同樣的名稱，并給出返回提示

代碼如下：

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

以上就是php+javascript實(shí)現(xiàn)用戶注冊(cè)模塊（附源碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！