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('$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教程》
Atas ialah kandungan terperinci php+javascript实现用户注册模块(附源码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

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

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

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

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

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.

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 berikut mengandungi maklumat tambahan tentang CakePHP. Sila gunakan mereka untuk mendapatkan pengetahuan yang lebih mendalam tentang perkara ini.

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
