Rumah pembangunan bahagian belakang tutorial php php+javascript实现用户注册模块(附源码)

php+javascript实现用户注册模块(附源码)

Jun 09, 2020 am 10:42 AM
javascript mysql php

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-男
);
Salin selepas log masuk

(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>
Salin selepas log masuk

(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);
Salin selepas log masuk

需求:② 接收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 "注册失败";
    };
Salin selepas log masuk

(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>
Salin selepas log masuk

需求:② 实现前端页面中完成验证用户名称的重复性和两次密码是否一致的功能

代码如下:

<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>
Salin selepas log masuk

(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 "用户名称已存在";
  };
Salin selepas log masuk

感谢大家的阅读,希望大家在查看代码以后可以有所收益。

本文转自:https://blog.csdn.net/weixin_38840741/article/details/80030792

推荐教程:《PHP教程

Atas ialah kandungan terperinci php+javascript实现用户注册模块(附源码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP ialah rangka kerja sumber terbuka untuk PHP. Ia bertujuan untuk menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP adalah berdasarkan seni bina seperti MVC yang berkuasa dan mudah difahami. Model, Pandangan dan Pengawal gu

Bagaimana untuk membetulkan ralat mysql_native_password tidak dimuatkan pada MySQL 8.4 Bagaimana untuk membetulkan ralat mysql_native_password tidak dimuatkan pada MySQL 8.4 Dec 09, 2024 am 11:42 AM

Salah satu perubahan utama yang diperkenalkan dalam MySQL 8.4 (keluaran LTS terkini pada 2024) ialah pemalam &quot;Kata Laluan Asli MySQL&quot; tidak lagi didayakan secara lalai. Selanjutnya, MySQL 9.0 mengalih keluar pemalam ini sepenuhnya. Perubahan ini mempengaruhi PHP dan apl lain

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

Panduan Ringkas CakePHP Panduan Ringkas CakePHP Sep 10, 2024 pm 05:27 PM

CakePHP ialah rangka kerja MVC sumber terbuka. Ia menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP mempunyai beberapa perpustakaan untuk mengurangkan beban tugas yang paling biasa.

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data

Sumber Berguna CakePHP Sumber Berguna CakePHP Sep 10, 2024 pm 05:27 PM

Sumber berikut mengandungi maklumat tambahan tentang CakePHP. Sila gunakan mereka untuk mendapatkan pengetahuan yang lebih mendalam tentang perkara ini.

Program PHP untuk mengira vokal dalam rentetan Program PHP untuk mengira vokal dalam rentetan Feb 07, 2025 pm 12:12 PM

Rentetan adalah urutan aksara, termasuk huruf, nombor, dan simbol. Tutorial ini akan mempelajari cara mengira bilangan vokal dalam rentetan yang diberikan dalam PHP menggunakan kaedah yang berbeza. Vokal dalam bahasa Inggeris adalah a, e, i, o, u, dan mereka boleh menjadi huruf besar atau huruf kecil. Apa itu vokal? Vokal adalah watak abjad yang mewakili sebutan tertentu. Terdapat lima vokal dalam bahasa Inggeris, termasuk huruf besar dan huruf kecil: a, e, i, o, u Contoh 1 Input: String = "TutorialSpoint" Output: 6 menjelaskan Vokal dalam rentetan "TutorialSpoint" adalah u, o, i, a, o, i. Terdapat 6 yuan sebanyak 6

See all articles