php+javascript實作使用者註冊模組（附源碼）

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(&#39;$uname&#39;,&#39;$upwd&#39;,&#39;$email&#39;,&#39;$phone&#39;,&#39;$gender&#39;)";
    //字段值 外面用双引号，里面用单引号
    $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=&#39;$uname&#39;";
  $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實作使用者註冊模組（附源碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！