网站学习心得-登陆注册功能
作者：互联网
//环境：
1、没什么环境要求
正文
一、需求分析：
1、注册功能
实现新用户信息的创建：账号、密码、昵称、邮箱
账号：不能重复，不能少于6位，纯数字
密码：不能少于6位
昵称：最长6位字符，不能重复
邮箱：符合邮箱格式
均不能为空
2、登陆功能
实现用户登陆：账号、密码
要从匹配唯一项来验证正误
二、功能实现（所有css全部省略，html截取关键位置）
注册界面
html（注释类型见账号检测部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
//检验账号
function checkid() {
var aid = document.getElementById('id');//获取值
var aspan = document.getElementById('iderr');//获取值
var content = aid.value;//获取值
var reg = /^[0-9]*$/;//禁用符号
if (content == '') {//输入检测
aspan.innerHTML = '账号不能为空,只允许输入数字'.fontcolor('red');
return false;
}
if ((content.length) < 6) {//长度检测
aspan.innerHTML = '账号至少6位数'.fontcolor('red');
return false;
}
if (reg.test(content)) {//字符类型检测
aspan.innerHTML = '正确'.fontcolor('gree');
return true;
} else {
aspan.innerHTML = '只允许输入数字'.fontcolor('red');
return false;
}
}
//昵称检测
function checkname() {
var aname = document.getElementById('name');
var aspan = document.getElementById('nameerr');
var content = aname.value;
if (content == '') {//*****
aspan.innerHTML = '昵称不能为空'.fontcolor('red');
return false;
}
if ((content.length) > 6) {//*****
aspan.innerHTML = '昵称最长6位字符'.fontcolor('red');
return false;
} else {
aspan.innerHTML = '正确'.fontcolor('gree');
return true;
}
}
//密码检测
function checkpwd() {
var apwd = document.getElementById('pwd');
var aspan = document.getElementById('pwderr');
var content = apwd.value;
if (content == '') {
aspan.innerHTML = '密码不能为空，密码至少6字符'.fontcolor('red');
return false;
}
if ((content.length) < 6) {
aspan.innerHTML = '密码至少6字符'.fontcolor('red');
return false;
} else {
aspan.innerHTML = '正确'.fontcolor('gree');
return true;
}
}
//再次输入密码检测
function checkpwd1() {
var apwd0 = document.getElementById('pwd');
var apwd1 = document.getElementById('pwd1');
var aspan = document.getElementById('pwd1err');
var content = apwd1.value;
var acontent = apwd0.value;
if (content == '') {
aspan.innerHTML = '请再次输入密码'.fontcolor('red');
return false;
}
if (content === acontent) {
aspan.innerHTML = '正确'.fontcolor('gree');
return true;
} else {
aspan.innerHTML = '两次密码不一致，请重新输入'.fontcolor('red');
return false;
}
}
//邮箱检测
function checkemail() {
var aqq = document.getElementById('email');
var aspan = document.getElementById('emailerr');
var content = aqq.value;
if (content == '') {
aspan.innerHTML = '邮箱不能为空'.fontcolor('red');
return false;
} else {
aspan.innerHTML = '正确'.fontcolor('gree');
return true;
}
}
//检测返回值都为true提交表单
function checkform() {
var add_id = checkid();
var add_name = checkname();
var add_pwd = checkpwd();
var add_pwd1 = checkpwd1();
var add_email = checkemail();
if (add_id && add_name && add_pwd && add_pwd1 && add_email) {
return true;
} else {
return false;
}
}
</script>
<body>
<div class="title">
<font size="100px" color="firebrick">赶快创建一个账号吧~</font>
</div>
<div class="zhuce">
<form method="post" action="php/zhuce.php" onsubmit="return checkform()">
账号：<input type="text" name="id" id="id"><span>*</span><br><!-- 账号 -->
<span id="iderr" class="error"></span><br>
昵称：<input type="text" name="name" id="name"><span>*</span><br><!-- 昵称 -->
<span id="nameerr" class="error"></span><br>
密码：<input type="password" name="pwd" id="pwd"><span>*</span><br><!-- 密码 -->
<span id="pwderr" class="error"></span><br>
确认密码：<input type="password" name="pwd1" id="pwd1"><span>*</span><br>
<span id="pwd1err" class="error"></span><br>
QQ邮箱：<input type="email" name="email" id="email"><span>*</span><br><!-- 邮箱 -->
<span id="emailerr" class="error"></span><br>
<div class="sub"><input type="submit" value="注册" name="submit"></div>
</form>
</div>
</body>
</html>
小tips：
1、return checkform（）的作用是在提交表单前对表单的一个核实，若都为true才提交，不然我的注册信息可能有的信息不符合规则也被提交。
2、进行两个元素对比时一定要先value成数值，不然无法对比出结果。
3、html中没什么难的，这些都是最基本的方法，没什么不好理解的
php
<?php
// 连接数据库
$link = mysqli_connect('localhost','root','root','user');
if (!$link){
echo('failed');
} else {
echo('success');
}
//获取输入信息
$stu_id=$_POST["id"];//账号
$stu_name=$_POST["name"];//昵称
$stu_password=$_POST["pwd"];//密码
$stu_email=$_POST["email"];//qq邮箱
$user_stupassword=md5($stu_password);
$select_sql="SELECT stuid FROM info WHERE stuid= '$stu_id'";//查询数据库中账号有无重复
$ret=mysqli_query($link,$select_sql);//执行？？
$row=mysqli_fetch_row($ret);
$select_sqlsel="SELECT stuname FROM info WHERE stuname= '$stu_name'";//查找数据判断昵称重复
$sel=mysqli_query($link,$select_sqlsel);
$rowsel=mysqli_fetch_row($sel);
if($row == null){//如果账号不重复
if($rowsel == null){//判断昵称重复
$sql="INSERT INTO info (stuid,stuname,stupassword,stuemail) VALUES ('$stu_id','$stu_name','$stu_password','$stu_email')";
//插入数据
mysqli_query($link,$sql);
mysqli_close($link);
//完成注册
echo "<script>alert('注册成功')</script>";
echo "<script>open('http://localhost/3/index.html')</script>";
//昵称重复
}else{
echo "<script>alert('昵称已存在')</script>";
echo "<script>open('http://localhost/3/zhuce.html')</script>";
}
}elseif($row !== null){//如果一开始账号就重复继续判断是否昵称也重复
if($rowsel !== null){
echo "<script>alert('账号,昵称已存在')</script>";
echo "<script>open('http://localhost/3/zhuce.html')</script>";
}else{
echo "<script>alert('账号已存在')</script>";
echo "<script>open('http://localhost/3/zhuce.html')</script>";
}
}
// $url = "http://www.baidu.com";
// echo "< script language='javascript'
// type='text/javascript'>";
// echo "window.location.href='$url'";
// echo "< /script>";
// if($row == null){
// echo "账号可被注册<br>";
// }else {
// echo "账号已被注册<br>";
// }
// if($rowsel == null){
// echo "昵称可被使用<br>";
// }else {
// echo "昵称已被使用<br>";
// }
?>小tips：
1、// 连接数据库
$link = mysqli_connect('localhost','root','root','user');
localhost为本地的连接；第一个root是本地数据库的用户名；第二个root是本地数据库的密码；user是我要调用的数据库；
2、现在有的版本不能使用mysql，改为了mysqli语句，所以有的时候使用mysql报错尝试看看是不是自己版本问题。
3、当我们写好$stu_id=$_POST["id"];//账号
$stu_name=$_POST["name"];//昵称
$stu_password=$_POST["pwd"];//密码时会给出notice说未定义值，那不是报错，不需要管他，因为我们并没有输入我们要填写的信息他怎么会有值呢，所以他不影响我们的正常使用。
4、一定要注意印好的使用，在书写过程中经常会有漏掉引号的情况出现，所以我们一定要时刻谨记书写中的细节，不然在没有报错的情况下我们要想找出错误很难。
5、一定要给自己设置的元素起好名字，我这个项目就是一个反面教材，没有明了的名字。
登陆界面
html（这里的代码和注册界面大同小异并且没有什么难以理解的地方，因此不再书写注释）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script>
function checkinid() {
var ainid = document.getElementById('inid');
var aspan = document.getElementById('iniderr');
var content = ainid.value;
var reg = /^[0-9]*$/;
if (content == '') {
aspan.innerHTML = '请输入账号'.fontcolor('red');
return false;
}else{
return true;
}
}
function checkinpwd() {
var ainpwd = document.getElementById('inpwd');
var aspan = document.getElementById('inpwderr');
var content = ainpwd.value;
if (content == '') {
aspan.innerHTML = '请输入密码'.fontcolor('red');
return false;
}else{
return true;
}
}
function checkform() {
var add_inid = checkinid();
var add_inpwd = checkinpwd();
if (add_inid && add_inpwd) {
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<div class="main">
<div class="loginregister">
<form action="php/index.php" method="post" onsubmit="return checkform()">
<div id="login" style="font-size: 20pt;">
<tr>用户登录：</tr><br>
</div>
<tr>账号：</tr><input type="text" name="inid" id="inid" value="" /><span>*</span><br>
<span id="iniderr" class="inerror"></span><br>
<tr>密码：</tr><input type="password" name="inpwd" id="inpwd" value="" /><span>*</span><br>
<span id="inpwderr" class="inerror"></span><br>
<input type="submit" name="sbt" id="sbt" value="确认登录" style="margin-left: 80px;"><br>
<tr><a href="zhuce.html" style="font-size: 5pt; margin-left: 55px;">还没有账号，马上注册</a></tr>
</form>
</div>
</div>
</body>
</html>php
<?php
session_start();
// 连接数据库
$link = mysqli_connect('localhost','root','root','user');
if (!$link){
echo('failed');
} else {
echo('success');
}
//获取输入信息
$stu_id=$_POST["inid"];//账号
$stu_password=$_POST["inpwd"];//密码
//这里是SQL语句，执行检索账号密码在数据库中唯一匹配项，limit1用处应该不大，因为存储账号的时候我们就是不允许重复的账号出现所以用不到搜索到一条信息就不再继续进行搜索的功能
$select_sql="SELECT * FROM info WHERE stuid= '$stu_id' and stupassword= '$stu_password' limit 1 ";
$ret=mysqli_query($link,$select_sql);//执行
$row=mysqli_fetch_row($ret);
if($row == null){//如果没有搜索到结果证明账号密码是错误的因此输出echo错误的提示
echo "<script>alert('账号或密码错误')</script>";
echo "<script>open('http://localhost/3/index.html')</script>";
}else{
//开启session临时保存数据，方便跨页面调用，比如我登录到了页面里，页面中显示欢迎某某用户登录时可以调用session中保存的id也好name也好
session_start();
//我的登入界面中提示的是欢迎“昵称”登录，但是我的登录界面中没有让输入自己的昵称，所以我要根据我的id去数据库中匹配我的用户昵称
$name1=mysqli_query($link,"SELECT stuname FROM info WHERE stuid=$stu_id and stupassword= '$stu_password' limit 1 ");
$name = mysqli_fetch_row($name1);
//这是将我们搜索到的内容转变为字符串，因为我们搜索到的为数组，在另一个页面中欢迎echo $_session【name】无法输出（echo只能输出字符串，输出数组的是print_r，但是print好像不能输出session所以要进行转换为字符串）
$str = implode($name);
//这里就是将搜索到的转换为字符串的昵称保存到session中
$_SESSION["stuname"]=$str;
echo "<script>alert('登录成功')</script>";
echo "<script>open('http://localhost/3/function.php')</script>";
}
?>小tips：写到了代码里
数据库
navicat优点：！！！
1、图形化界面
2、基本不需要sql语句，就像Excel表格一样
3、当你创建好自己需要的东西可以用代码的形式查看还可以学习sql语句，绝！！！！！
推荐版本15，可以破解
本人也是出入学堂还有许多不懂的地方，大家有问题可以留言询问，同时欢迎大佬的指导
标签：return,aspan,学习心得,innerHTML,echo,content,登陆,注册,var 来源： https://blog.csdn.net/qq_54764105/article/details/122787005