PHP+Javascript implementiert das Benutzerregistrierungsmodul (Quellcode im Anhang)

PHP+Javascript implementiert Benutzerregistrierungsmodul (mit Quellcode)

1. Funktionseinführung

Verwendung der Sprache: HTML + Javascript + Ajax + PHP

Backend-Datenbank: MySQL

(* Nicht hier Einbeziehender Stil)

Erfolgreicher Registrierungsprozess:

① Registrierungsseite (register.html), die ein Formular zum Sammeln von Benutzerinformationen bereitstellt.

② Gehen Sie nach der Übermittlung zur Seite register.php und verwenden Sie PHP, um die Registrierungsinformationen zur Datenbank hinzuzufügen.

2. Implementierungscode

(1) Benutzerinformationstabelle in der MySQL-Datenbank erstellen

Anforderungen:Benutzerinformationstabelle erstellen:

Code:

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-Seitenlayoutcode

Anforderungen: Erstellen Sie eine Datei „register.html“ (nicht Ajax) und stellen Sie die folgenden Steuerelemente (Formular) bereit –

● Anmeldename-Textfeld

● Protokoll in Passwort – Passwortfeld

● Passwort bestätigen – Passwortfeld

● Benutzer-E-Mail – E-Mail

● Kontaktinformationen – Textfeld

● Benutzergeschlecht – Dropdown-Feld

● Schaltfläche „Registrieren“

Code

<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 erstellen

Anforderungen: ① Kapseln Sie in init.php die wiederverwendete Verbindungsdatenbank

Der Code lautet wie folgt:

<?php
//data/init.php
//创建到服务器的连接，连接数据库
$conn=mysqli_connect("127.0.0.1","root","","knewone",3306);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);

Anforderungen: ② Empfangen Sie die von register.html übermittelten Daten, fügen Sie sie in die Datenbank ein und geben Sie dann eine Eingabeaufforderung ein

Der Code lautet wie folgt:

<?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-Code

Anforderungen: ① Wiederverwendbare Funktionen kapseln

Der Code lautet wie folgt:

<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>

Anforderungen:② Implementieren Sie die Funktion zur Überprüfung der Wiederholbarkeit von Benutzernamen und der Konsistenz von zwei Passwörtern auf der Front-End-Seite

Der Code ist wie folgt:

<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-Code zur Überprüfung, ob der Benutzername wiederholt wird

Funktion: Akzeptieren Sie den uname-Wert Fragen Sie vom Frontend aus ab, ob derselbe Name in der Datenbank vorhanden ist, und geben Sie die Eingabeaufforderung ein

Der Code lautet wie folgt:

<?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 "用户名称已存在";
  };

Vielen Dank fürs Lesen, Ich hoffe, dass Sie vom Lesen des Codes profitieren können.

Dieser Artikel ist reproduziert von: https://blog.csdn.net/weixin_38840741/article/details/80030792

Empfohlenes Tutorial: „PHP-Tutorial „

Das obige ist der detaillierte Inhalt vonPHP+Javascript implementiert das Benutzerregistrierungsmodul (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!