php+javascript完成用户注册模块（附源码）
1、性能引见
应用言语： html ＋ javascript + ajax + php
后端数据库：MySQL
(* 这里没有触及到款式)
胜利注册流程：
① 注书页面(register.html)，该页面提供一个 form表单，搜集用户信息。
② 提交后转到register.php页面，行使php将注册信息增加到数据库中。
2、完成代码
（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/co妹妹on.js"></script>
<script>
//1.实现用户称号的反复性验证（异步，反省数据库中能否已存正在以后用户名）
//异步申请数据，由于还要输出上面的数据，不克不及跳转到php页面去验证
function check_name(){
//1.创立XHR工具 创立异步工具
var xhr=createXhr(); //挪用co妹妹on.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值，函数正在co妹妹on.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教程》
以上就是php+javascript完成用户注册模块（附源码）的具体内容，更多请存眷资源魔其它相干文章！
标签： php mysql php开发教程 php开发资料 php开发自学 javascript
