PHP+javascript implements user registration module (source code attached)

php javascript implements user registration module (source code attached)

1. Function introduction

Use language: html + javascript ajax php

Backend database: MySQL

(* There is no style involved here )

Successful registration process:

① Registration page (register.html), this page provides a form to collect user information.

② After submission, go to the register.php page and use php to add the registration information to the database.

2. Implementation code

(1) Create the user information table in the MySql database

Requirements:Create user information table:

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 page layout code

Requirements: Create a register.html (non-ajax) and provide the following controls (form)——

● Login name-text box

● Login Password - password box

● Confirm password - password box

● User email - email

● Contact information - text box

● User gender - Drop-down box

● Registration button

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) Create register.php

Requirements: ① In init.php, encapsulate the reused connection database

The code is as follows:

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

Requirements: ② Receive the data submitted by register.html, insert it into the database, and then give a prompt

The code is as follows:

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

Requirements:① Encapsulate functions that can be reused

The code is as follows:

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

Requirements: ② Implement the function of verifying the repeatability of user names and the consistency of two passwords on the front-end page

The code is as follows:

<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 to verify whether the user name is repeated

Function: Accept the uname value from the front end, query whether the same name exists in the database, and Give the return prompt

The code is as follows:

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

Thank you for reading, I hope you can benefit from reading the code.

This article is reproduced from: https://blog.csdn.net/weixin_38840741/article/details/80030792

Recommended tutorial: "PHP Tutorial"

The above is the detailed content of PHP+javascript implements user registration module (source code attached). For more information, please follow other related articles on the PHP Chinese website!