数据库注册用户功能实现

数据库注册功能实现分析

最近模仿百度云写了一套页面,先简单记录一下注册功能的实现

0.检测数据库中用户名是否已存在并将结果显示到前端(通过AJAX的GET请求,连接到PHP查询用户名页,PHP查询页内容为连接数据库并检索数据库中前端传递来的用户名是否已存在,将结果以JSON字符串对象形式返回到前端)
1.提交HTML表单数据到后台PHP获取
2.PHP获取前端表单内name属性值
3.PHP连接数据库检测用户名是否已存在
4.不存在则向数据库插入新用户信息

数据库设计图
数据库
效果图如下
注册

注册功能表单HTML代码

HTML完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<form id="_san_7" class="san-form"  method="POST">
<!-- 用户名 -->
<div id="_san_9" class="san-form-item san-form-item-userName">
<div id="_san_11" class="san-form-item-content">
<input type="text" id="_san_13" name="uname" placeholder="用户名">
<label id="_san_81" class="invalid-label"></label>
</div>
</div>
<!-- 密码 -->
<div id="_san_15" class="san-form-item san-form-item-password">
<div id="_san_17" class="san-form-item-content">
<input type="password" id="_san_19" name="upwd" placeholder="密码">
<label id="_san_57" class="invalid-label"></label>
</div>
</div>
<!-- 确认密码 -->
<div id="_san_21" class="san-form-item san-form-item-confirmPassword">
<div id="_san_23" class="san-form-item-content">
<input type="password" id="_san_25" name="cpwd" placeholder="确认密码">
<label id="_san_59" class="invalid-label"></label>
</div>
</div>
<!-- 注册 -->
<div id="_san_41" class="san-form-item">
<div id="_san_43" class="san-form-item-content">
<button id="_san_45" type="submit" class="submit">同意条款并注册</button>
</div>
</div>
</form>

注册功能表单JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// 用户名正则验证
var userName = $('#_san_13');
var form = $('#_san_7');
var submit = $('#_san_45');
var userReg = /^[A-Za-z\d_-]{6,32}$/; //用户名正则
var userError = $('#_san_81'); //用户名错误文本
userName.on("keyup", function () {
if (userReg.test(userName.val())) {
userName.css("border-color", "#ccc");
userError.text("")
}
if (!userReg.test(userName.val())) {
userName.css("outline", "none"); //去除聚焦时的边框
userName.css("border-color", "red"); //设置错误时边框
userError.text("用户名长度必须是6-32个字符之间") //错误内容
}
if (userName.val() == "") {
userName.css("outline", "none");
userError.text("用户名必填")
userName.css("border-color", "red");
}
});

// 用户名数据库验证
//1.完成用户名称的重复性验证(异步,检查数据库中是否已存在当前用户名)
//异步请求数据,因为还要输入下面的数据,不能跳转到php页面去验证
userName.on("blur", function () {
//1.创建XHR对象 创建异步对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //标准创建
} else {
//IE6及以下的创建方式
xhr = new ActiveXObject("Microsoft.XMLHttp");
}

//2.创建请求
var uname = userName.val();
//获取输入框里的值,把用户名传到后端,再查询
var url = "../php/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的时候,表示服务器已经正确的处理请求以及给出响应
var resultStr = xhr.responseText;
var resultJson =JSON.parse(resultStr);
if (resultJson=='true') {
// userError.text("用户名可用");
} else {
form.removeAttr("action");
userName.css("outline", "none"); //去除聚焦时的边框
userName.css("border-color", "red"); //设置错误时边框
userError.text("用户名已存在");
}
// console.log(resultJson=='false');
//提示内容
};
};

//4.发送请求
xhr.send(null);
//get请求,参数写null
});


// 密码正则验证
var pwd = $('#_san_19');
var pwdReg = /^.*(?=.{6,32})(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).*$/; //密码正则(6-32位且至少1个大写字母,1个小写字母,1个数字)
var pwdError = $('#_san_57'); //密码错误文本
pwd.on("keyup", function () {
if (pwdReg.test(pwd.val())) { //格式正确
pwd.css("border-color", "#ccc");
pwdError.text("");
}
if (pwd.val().length <= 6) { //格式错误
pwd.css("outline", "none"); //去除聚焦时的边框
pwd.css("border-color", "red"); //设置错误时边框
pwdError.text("密码长度必须是6-32个字符之间") //错误内容
}
if (pwd.val().length > 6 && (!pwdReg.test(pwd.val()))) {
pwd.css("outline", "none"); //去除聚焦时的边框
pwd.css("border-color", "red"); //设置错误时边框
pwdError.text("密码必须包含数字、大小写英文字母") //错误内容
}
if (pwd.val() == "") { //密码为空
pwd.css("outline", "none");
pwdError.text("密码必填");
pwd.css("border-color", "red");
}
});
// 确认密码验证
var pwdCheck = $('#_san_25');
var pwdCheckReg = /^.*(?=.{6,32})(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).*$/; //密码正则(6-32位且至少1个大写字母,1个小写字母,1个数字)
var pwdCheckError = $('#_san_59'); //确认密码错误文本
pwdCheck.on("keyup", function () {
if (pwdCheckReg.test(pwdCheck.val()) && pwdCheck.val() === pwd.val()) { //确认密码正确
pwdCheck.css("border-color", "#ccc");
pwdCheckError.text("");
}
if (pwdCheck.val().length <= 6) { //格式错误
pwdCheck.css("outline", "none"); //去除聚焦时的边框
pwdCheck.css("border-color", "red"); //设置错误时边框
pwdCheckError.text("确认密码长度必须是6-32个字符之间") //错误内容
}
if (pwdCheck.val().length > 6 && (!pwdCheckReg.test(pwdCheck.val()))) {
pwdCheck.css("outline", "none"); //去除聚焦时的边框
pwdCheck.css("border-color", "red"); //设置错误时边框
pwdCheckError.text("确认密码必须包含数字、大小写英文字母") //错误内容
}
if (pwdCheckReg.test(pwdCheck.val()) && pwdCheck.val() != pwd.val()) { //确认密码正确
pwdCheck.css("outline", "none"); //去除聚焦时的边框
pwdCheck.css("border-color", "red"); //设置错误时边框
pwdCheckError.text("两次输入的内容不一致") //错误内容
}
if (pwdCheck.val() == "") { //密码为空
pwdCheck.css("outline", "none");
pwdCheckError.text("确认密码必填");
pwdCheck.css("border-color", "red");
}
});

//判断是否可注册
submit.on('mouseover', function () {
// 满足所有规则时向后台提交数据
if (userReg.test(userName.val()) == true&&pwdReg.test(pwd.val())==true&&pwdCheckReg.test(pwdCheck.val())==true && (pwdCheck.val() === pwd.val())==true) {
form.attr("action", "../php/reg.php");
} else {
form.removeAttr("action");
}
});

PHP检测数据库用户名代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php

// 1.连接数据库
$conn = mysqli_connect("localhost", "root", "", "baidu");
if (!$conn){
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
// 设置编码,防止中文乱码
mysqli_set_charset($conn, "utf8");
// 2.接收前端传过来的uname
$uname=$_REQUEST["uname"];

// 3.拼接sql,并查询uname是否存在
$sql=" SELECT uname FROM register WHERE uname='$uname'";
$result=mysqli_query($conn,$sql);
// 4.根据查询的结果输出相应
$row=mysqli_fetch_row($result);
//抓取一条数据,即当前uname对应的数据

$raw_success ='true';
$raw_fail ='false';

$res_success = json_encode($raw_success);
$res_fail = json_encode($raw_fail);

if($row==null){
//如果$row为空,即数据库中没有相同的用户名存在
echo $res_success;
}else{
echo $res_fail;
};
?>

PHP检测是否可注册代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
// 1.获取请求提交的数据
$uname=$_REQUEST["uname"];
//uname值就是前端页面中name属性的值
$upwd=$_REQUEST["upwd"];
//确认密码不用获取,获取一个密码就行

// 2.连接到数据库
$conn = mysqli_connect("localhost", "root", "", "baidu");
if (!$conn){
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
// 设置编码,防止中文乱码
mysqli_set_charset($conn, "utf8");

// 3.写sql语句并执行
$sql="INSERT INTO register (uname, upwd) VALUES ('$uname','$upwd')";
//字段值 外面用双引号,里面用单引号
$result=mysqli_query($conn,$sql);
//执行sql语句

// 4.根据执行结果给出响应
if($result==true){ //函数返回值
echo "<span style="font-size:40px;color:red;">注册成功</span>";
echo '<a href="../html/login.html" style="font-size:40px;color:red;">立即登录</a>';
}else{
echo "<span style="font-size:40px;color:red;">注册失败</span>";
echo '<a href="../html/reg.html" style="font-size:40px;color:red;">重新注册</a>';
};
?>
Fang Zhen wechat
有事微信联系~
我滴要饭の账号(💚一分也是爱💚)
-------------The End-------------
0%