php+javascript实现用户注册模块（附源码）

一、功能介绍

使用语言： html ＋ javascript + ajax + php

后端数据库：MySQL

(* 这里不涉及到样式)

成功注册流程：

① 注册页面(register.html)，该页面提供一个 form表单，收集用户信息。

② 提交后转到register.php页面，利用php将注册信息添加到数据库中。

二、实现代码

（1） 创建MySql数据库中的用户信息表

需求：创建用户信息表:

代码：

1. CREATE TABLE xxx_user( 
2.  
3.   uid INT PRIMARY KEY AUTO_INCREMENT, 
4.  
5.   uname VARCHAR(32), 
6.  
7.   upwd VARCHAR(32), 
8.  
9.   email VARCHAR(64), 
10.  
11.   phone VARCHAR(16), 
12.  
13.   gender INT     #性别  0-女  1-男 
14.  
15. ); 

（2） HTML页面布局代码

需求：创建一个register.html（非ajax），提供以下控件（表单）——

● 登录名称-文本框

● 登录密码-密码框

● 确认密码-密码框

● 用户邮箱-电子邮件

● 联系方式-文本框

● 用户性别-下拉框

● 注册按钮

代码：

1. <form action="./data/users/register.php" method="post"> 
2.  
3. <!-- 
4.  
5. 1.注册信息不用异步加载，直接提交表单；失去焦点时验证用户名密码是否正确，再用ajax异步加载数据； 
6.  
7. 2.form表单作用：收集用户信息并提交给服务器； 
8.  
9. 3.属性action作用：定义表单被提交时发生的动作，通常定义的是服务器上处理程序的地址(url)，提交到注册的php文件，默认提交给本页； 
10.  
11. 4.属性method作用：指定表单数据的提交方式。 
12.  
13.   get(默认值)——明文提交，待提交的数据会显示在地址栏上； 
14.  
15.   post——隐式提交，提交的数据不会显示在地址栏上。 
16.  
17. --> 
18.  
19.     <!--控件提交信息，嵌套在form标记里面--> 
20.  
21.     <!--登录名称-文本框--> 
22.  
23.     <p> 
24.  
25.         登录名称：<input type="text" id="uname" name="uname" onblur="check_name()"> 
26.  
27.         <!--提示用户名是否一致的位置--> 
28.  
29.         <span id="uname-show"></span> 
30.  
31.         <!--提交数据时提交name属性的值，点击submit时，name属性通过表单form提交数据，同步提交数据--> 
32.  
33.     </p> 
34.  
35.     <!--登录密码-密码框--> 
36.  
37.     <p> 
38.  
39.         登录密码：<input type="password" id="upwd" name="upwd"> 
40.  
41.         <!--name值与id值可以重复，name值用于提交给服务器，id值在前端用--> 
42.  
43.     </p> 
44.  
45.     <!--确认密码-密码框--> 
46.  
47.     <p> 
48.  
49.         确认密码：<input type="password" id="cpwd" name="cpwd" onblur="check_pwd()"> 
50.  
51.         <!--onblur为失去焦点属性，调用判断密码是否一致的函数--> 
52.  
53.         <!--用于提示两次密码是否一致的位置--> 
54.  
55.         <span id="pwd-show"></span> 
56.  
57.     </p> 
58.  
59.     <!--用户邮箱-电子邮件--> 
60.  
61.     <p> 
62.  
63.         电子邮箱：<input type="email" name="email"> 
64.  
65.         <!--type="email" 可做简单的格式验证--> 
66.  
67.     </p> 
68.  
69.     <!--联系方式-文本框--> 
70.  
71.     <p> 
72.  
73.         手机号码：<input type="text" name="phone"> 
74.  
75.     </p> 
76.  
77.     <!--用户性别-下拉框--> 
78.  
79.     <p> 
80.  
81.         用户性别： 
82.  
83.         <select name="gender"> 
84.  
85.             <option value="1">男</option> 
86.  
87.             <option value="0">女</option> 
88.  
89.         </select> 
90.  
91.         <!--下拉列表和选项，往数据库中插入的是value的值--> 
92.  
93.     </p> 
94.  
95.     <!--注册按钮--> 
96.  
97.     <p> 
98.  
99.         <input type="submit" value="注册"> 
100.  
101.         <!--submit按钮的表单提交数据，是同步访问数据的方式--> 
102.  
103.     </p> 
104.  
105. </form> 

（3） 创建register.php

需求：① 在init.php中，封装会重复用到的连接数据库

代码如下：

1. <?php 
2.  
3. //data/init.php 
4.  
5. //创建到服务器的连接，连接数据库 
6.  
7. $conn=mysqli_connect("127.0.0.1","root","","knewone",3306); 
8.  
9. $sql="SET NAMES UTF8"; 
10.  
11. mysqli_query($conn,$sql); 

需求：② 接收register.html提交过来的数据，并插入到数据库，再给出提示

代码如下：

1. <?php 
2.  
3. //data/users/register.php 
4.  
5. #1.获取请求提交的数据 
6.  
7.     $uname=$_REQUEST["uname"]; 
8.  
9.     //uname值就是前端页面中name属性的值 
10.  
11.     $upwd=$_REQUEST["upwd"]; 
12.  
13.     //确认密码不用获取，获取一个密码就行 
14.  
15.     $email=$_REQUEST["email"]; 
16.  
17.     $phone=$_REQUEST["phone"]; 
18.  
19.     $gender=$_REQUEST["gender"]; 
20.  
21. #2.连接到数据库 
22.  
23.     require("../init.php"); 
24.  
25. #3.拼sql语句并执行 
26.  
27.     $sql="insert into xxx_user(uname,upwd,email,phone,gender)values('$uname','$upwd','$email','$phone','$gender')"; 
28.  
29.     //字段值 外面用双引号，里面用单引号 
30.  
31.     $result=mysqli_query($conn,$sql); 
32.  
33.     //执行sql语句 
34.  
35. #4.根据执行结果给出响应 
36.  
37.     if($result==true){ //函数返回值 
38.  
39.         echo "注册成功"; 
40.  
41.     }else{ 
42.  
43.         echo "注册失败"; 
44.  
45.     }; 

（4） javascript代码

需求：① 封装能重用到的函数

代码如下：

1. <script> 
2.  
3. //1.封装函数，获取id值 
4.  
5. function $(id){ 
6.  
7.   return document.getElementById(id); 
8.  
9. } 
10.  
11. //2.创建xhr对象 
12.  
13. function createXhr(){ 
14.  
15.     var xhr=null; 
16.  
17.     if(window.XMLHttpRequest){ 
18.  
19.         xhr=new XMLHttpRequest(); //标准创建 
20.  
21.     }else{ 
22.  
23.         //IE8以下的创建方式 
24.  
25.         xhr=new ActiveXObject("Microsoft.XMLHttp"); 
26.  
27.     } 
28.  
29.     return xhr; 
30.  
31. } 
32.  
33. </script> 

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

代码如下：

1. <script src="./js/common.js"></script> 
2.  
3. <script> 
4.  
5.     //1.完成用户名称的重复性验证（异步，检查数据库中是否已存在当前用户名） 
6.  
7.     //异步请求数据，因为还要输入下面的数据，不能跳转到php页面去验证 
8.  
9.     function check_name(){ 
10.  
11.         //1.创建XHR对象 创建异步对象 
12.  
13.         var xhr=createXhr(); //调用common.js中封装好的函数 
14.  
15.         //2.创建请求 
16.  
17.         var uname=$("uname").value; 
18.  
19.         //获取输入框里的值，把用户名传到后端，再查询 
20.  
21.         var url="./data/users/check-name.php?uname="+uname; 
22.  
23.         xhr.open("get",url,true); 
24.  
25.         //查询用户名称，用get方法就行，去数据库查询，看用户名是否已经存在 
26.  
27.         //查询用get就行，向服务器提交数据时再用post 
28.  
29.         //3.设置回调函数，监听状态 
30.  
31.         //参数true，异步 
32.  
33.         xhr.onreadystatechange=function(){ 
34.  
35.             if(xhr.readyState==4 && xhr.status==200){ 
36.  
37.             //判断状态，xhr请求状态为4，表示接收响应数据成功；当status的值是200的时候，表示服务器已经正确的处理请求以及给出响应 
38.  
39.             $("uname-show").innerHTML=xhr.responseText; 
40.  
41.             //提示内容 
42.  
43.             }; 
44.  
45.         }; 
46.  
47.             //4.发送请求 
48.  
49.             xhr.send(null); 
50.  
51.             //get请求，参数写null 
52.  
53.         } 
54.  
55. //2.定义函数，判断两次密码是否一致 
56.  
57. //当确认密码框失去焦点时，验证两次输入的密码是否一致，并给出提示（通过/密码不一致） 
58.  
59.     //给upwd 和 cpwd 加id 
60.  
61.     function check_pwd(){ 
62.  
63.         //1.获取两个密码框的值 
64.  
65.         var upwd=$("upwd").value;  
66.  
67.         //$("upwd") 获取id值，函数在common.js中封装 
68.  
69.         var cpwd=$("cpwd").value; 
70.  
71.         if(upwd==cpwd && upwd!=""){  
72.  
73.         //判断是否相等，且密码不为空 
74.  
75.             $("pwd-show").innerHTML="通过";   
76.  
77.             //提示到span中，用innerHTML 
78.  
79.         }else{ 
80.  
81.             $("pwd-show").innerHTML="两次密码输入不一致"; 
82.  
83.         }; 
84.  
85.     }; 
86.  
87. </script> 

（5） 验证用户名是否重复的php代码

功能：接受前端传来的uname值，查询数据库中是否存在同样的名称，并给出返回提示

代码如下：

1. <?php 
2.  
3. //data/users/check-name.php 
4.  
5. #1.连接数据库 
6.  
7.   require("../init.php"); 
8.  
9. #2.接收前端传过来的uname 
10.  
11.   $uname=$_REQUEST["uname"]; 
12.  
13. #3.拼接sql，并查询uname是否存在 
14.  
15.   $sql="SELECT * FROM xxx_user uname='$uname'"; 
16.  
17.   $result=mysqli_query($conn,$sql); 
18.  
19. #4.根据查询的结果输出相应 
20.  
21.   $row=mysqli_fetch_row($result); 
22.  
23.   //抓取一条数据，即当前uname对应的数据 
24.  
25.   if($row==null){ 
26.  
27.   //如果$row为空，即数据库中没有相同的用户名存在 
28.  
29.     echo "通过"; 
30.  
31.   }else{ 
32.  
33.     echo "用户名称已存在"; 
34.  
35.   }; 

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

Tags: php用户注册模块

分享到：