php+javascript實現使用者註冊模組（附原始碼）
2020-07-16 10:06:00
php+javascript實現使用者註冊模組（附原始碼）
一、功能介紹
使用語言： 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 "使用者名稱稱已存在";
};感謝大家的閱讀，希望大家在檢視程式碼以後可以有所收益。
本文轉自：https://blog.csdn.net/weixin_38840741/article/details/80030792
推薦教學：《PHP教學》
以上就是php+javascript實現使用者註冊模組（附原始碼）的詳細內容，更多請關注TW511.COM其它相關文章！