实现用户注册功能的代码

1.功能介绍

使用语言： html ＋ javascript + ajax + php
后端数据库： MySQL
(这里不涉及到样式)

成功注册流程：

注册页面(register.html)，该页面提供一个 form表单，收集用户信息。
提交后转到register.php页面，利用php将注册信息添加到数据库中。

2.实现代码

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

2.3 创建register.php

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

代码

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

需求
2.接收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 "注册失败";};

2.4 javascript代码

需求
1.封装能重用到的函数
代码

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

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

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

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

实现用户注册功能的代码相关推荐

2、编写单元测试用例，对用户注册功能的DAO层进行测试。（注意：测试用例应考虑成功和失败的情况）...
我先对我做的测试进行说明: 对用户注册功能的DAO层进行测试,其实就是对UserDao中的saveUser(User user) 方法进行测试.我在我的测试方法中同时也用到了UserDao中的exit ...
java wed登录面代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...
Node.js 用户注册功能的实现
文章目录前言一.项目结构二.用户注册功能的实现 1.前端-注册入口 2.前端-路由中间件测试 3.前端-请求发送 4.后端-请求接收 5.后端-请求处理&数据库操作总结前言最近一直 ...
java web 找回密码_java web实现忘记密码（找回密码）功能及代码
java web实现忘记密码(找回密码)功能及代码 (一).总体思路 (二).部分截图 (三).部分代码 (一).总体思路: 1.在找回密码页面录入姓名.邮箱和验证码,录入后点击[提交]按钮, ...
用Eclipse的snippets功能实现代码重用
snippets功能实现代码重用 Snippets 代码片段是Eclipse的一个插件. 很多时候可以通过这个功能,重复使用常用的代码片段,加快开发效率. 创建一个代码段的步骤: 在Eclipse的e ...
python 屏幕录制_Python实现屏幕录制功能的代码
前段时间做视频时需要演示电脑端的操作,因此要用到屏幕录制,下载了个迅捷屏幕录制,但是没有vip录制的视频有水印且只能录制二分钟,于是鄙人想了下能不能通过万能的python来实现呢?经过一晚上的尝试发现 ...
python编程实例视屏-使用Python实现视频下载功能实例代码
最近一两年短视频业务风生水起,各个视频网站都有各自特色的短视频内容.如果有一个程序可以把各大视频网站的热门用户最新发布的视频下载下来,不仅方便了观看,还可以将没有版权的视频发布在个人社交网站上,增加自 ...
java生成验证码实例_Java生成验证码功能实例代码
页面上输入验证码是比较常见的一个功能,实现起来也很简单.给大家写一个简单的生成验证码的示例程序,需要的朋友可以借鉴一下. 闲话少续,直接上代码.代码中的注释很详细. package com.SM_te ...
jsp中未登录用户也可以浏览页面的功能实现代码
jsp中未登录用户也可以浏览页面的功能实现代码 <%! int count=0; %> < ...