php登录注册（带验证码）
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="index.css"> <style type="text/css"> .Button { width: 300px; font-size: 15px; color: black; text-align: center; background-color:#FF6A6A; border-color: red; border-width: 1px; } .code { background-image:url(code.jpg); font-family:Arial; font-style:italic; color:Red; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; } .unchanged { border-color: #844200; border-width: 1px; } a{ text-decoration: none; } </style> <script language="javascript" type="text/javascript"> var code ; //在全局 定义验证码 function createCode() { code = ""; var codeLength = 4;//验证码的长度 var checkCode = document.getElementById("checkCode"); var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//所有候选组成验证码的字符，当然也可以用中文的 for(var i=0;i<codeLength;i++) { var charIndex = Math.floor(Math.random()*36); code +=selectChar[charIndex]; } if(checkCode) { checkCode.className="code"; checkCode.value = code; } } function validate () { var inputCode = document.getElementById("input1").value; if(inputCode.length <=0) { document.getElementById("yzm").innerText="请输入验证码！"; return false; } else if(inputCode != code ) { document.getElementById("yzm").innerText="验证码输入错误！"; createCode();//刷新验证码 return false; } else { window.location.href="login.php";//普通用户登录后网址 } } </script> </head> <body style="width:1520px;height:752px; background: url(4.jpg); background-size:contain ;text-align: center;"> <!--顶部--> <div class="top"> <h2 style="font-family:KaiTi">欢迎登录</h2> </div> <!-- 中间区域的主体，左右撑开--> <div class="main"> <!--居中的主体区域--> <div class="main-content"> <!-- 登录的白盒子--> <div class="login"> <h2>橘子巷<span><a href="register.html" style="color=#e75858">立即注册</a></span></h2> <div class="panel-body"> <form method="post" action="login.php"> <div class="form-group"> 用户名： <input type="text" id="name" name="name" placeholder="用户名"required placeholder autofocus> </div> <div class="form-group"> 密 码： <input type="password" id="password" name="password" placeholder="密码"> </div> <div> 验证码： <input type="text" id="input1" placeholder="此项必填哦"/></div> <div> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /> <div> <label id="yzm" style="color:red;margin-left:15px"></label> </div> <div class="auto-login"> <label><input type="checkbox"><span>自动登录</span></label> </div> <div> <input id="Button1" onclick="console.log(validate())" class="Button" type="submit" value="登录" /> </div> <div class="auto-login"> <label><span><a href="gllogin.html" style="float: left">管理员？</a></span></label> <a href="main.php">游客？</a> </div> </div> </form> </div> </div> </div> </div> <!-- 居中的底部盒子--> <div class="bottom"> <ul> <li><a herf="">关于我们</a><span |></span></li> <li><a herf="">联系我们</a><span |></span></li> <li><a herf="">人才招聘</a><span |></span></li> <li><a herf="">商家入驻</a><span |></span></li> <li><a herf="">广告服务</a><span |></span></li> <li><a herf="">手机京东</a><span |></span></li> <li><a herf="">友情链接</a><span |></span></li> <li><a herf="">销售联盟</a><span |></span></li> <li><a herf="">橘子社区</a><span |></span></li> <li><a herf="">橘子公益</a><span |></span></li> <li><a herf="">English Site</a><span |></span></li> </ul> <p> Copyright©石家庄铁道大学 </p> </div> </body> </html>
login.php
<?php $name = $_POST['name']; $password = $_POST['password']; // .连接数据库 // .防止中文乱码 $con=mysqli_connect("localhost","root","123456","php"); // .拼接sql语句，取出信息 $sql = "SELECT * FROM login WHERE username ='{$name}' and password='{$password}'"; $rst=mysqli_query( $con,$sql); $row=mysqli_fetch_assoc($rst); if($row){ echo "<script> alert('登录成功!'); window.location='main2.php'; //跳转 </script>"; } else { echo "<script> alert('用户不存在或密码错误！'); window.history.back(); //返回上一页 </script>"; } ?>
管理员登录
gllogin.htmll
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="index.css"> <style type="text/css"> .Button { width: 300px; font-size: 15px; color: black; text-align: center; background-color:#FF6A6A; border-color: red; border-width: 1px; } .code { background-image:url(code.jpg); font-family:Arial; font-style:italic; color:Red; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; } .unchanged { border-color: #844200; border-width: 1px; } </style> <script language="javascript" type="text/javascript"> function check() { var name = document.getElementById("name").value; var password = document.getElementById("password").value; if (name == 'juzipi'&&password=='123456') { alert("登入成功"); window.document.f.action = "main3.php";//管理员首页 window.document.f.submit(); } else { alert("用户名或密码错误"); } } </script> </head> <body style="width:1520px;height:752px; background: url(4.jpg); background-size:contain ;text-align: center;"> <!--顶部--> <div class="top"> <h2 style="font-family:KaiTi">欢迎管理员登录</h2> </div> <!-- 中间区域的主体，左右撑开--> <div class="main"> <!--居中的主体区域--> <div class="main-content"> <!-- 登录的白盒子--> <div class="login"> <h2>橘子巷</h2> <div class="panel-body"> <form name="f" action="" > <div class="form-group"> 用户名： <input type="text" id="name" name="name" placeholder="用户名"required placeholder autofocus> </div> <p> </p> <div class="form-group"> 密 码： <input type="password" id="password" name="password" placeholder="密码"> </div> <div class="auto-login"> <label><input type="checkbox"><span>自动登录</span></label> <a href="forget.html">忘记密码</a> </div> <p></p> <div > <INPUT TYPE="button" class="Button"value="登录" onclick="check()"> </div> </form> </div> </div> </div> </div> <!-- 居中的底部盒子--> <div class="bottom"> <ul> <li><a herf="">关于我们</a><span |></span></li> <li><a herf="">联系我们</a><span |></span></li> <li><a herf="">人才招聘</a><span |></span></li> <li><a herf="">商家入驻</a><span |></span></li> <li><a herf="">广告服务</a><span |></span></li> <li><a herf="">手机京东</a><span |></span></li> <li><a herf="">友情链接</a><span |></span></li> <li><a herf="">销售联盟</a><span |></span></li> <li><a herf="">橘子社区</a><span |></span></li> <li><a herf="">橘子公益</a><span |></span></li> <li><a herf="">English Site</a><span |></span></li> </ul> <p> Copyright©石家庄铁道大学 </p> </div> </body> </html>
regiser.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> form{ width: 800px; height: 700px; float: right; margin: 20px; } .a1{ font-family:"幼圆";/*设置字体*/ color: #00000; text-decoration:none; font-size:20px;/*设置字体大小*/ font-weight:10px;/*调整字体粗细*/ } .a2{ font-family:"幼圆";/*设置字体*/ color: #00000; text-decoration:none; font-size:20px;/*设置字体大小*/ font-weight:10px;/*调整字体粗细*/ } .ziti{ font-family:"幼圆";/*设置字体*/ color: #00000; text-decoration:none; font-size:20px;/*设置字体大小*/ font-weight:10px;/*调整字体粗细*/ } input, textarea { } button{ background-color:#f3e1d0; width: 300px; height: 30px; font-size: 15px; color: black; text-align: center; } span#as:hover input{ width: 300px; height: 40px; } </style> <script type="text/javascript" > function check() { var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); var obj = document.getElementById("email"); var re =/^1[0-9]{10}/; var phone=document.getElementById("phone"); var re1 = /^[a-zA-z0-9]\w{3,15}/; var password=document.getElementById("password"); if(obj.value === ""||phone.value==""){ alert("输入不能为空!"); return false; }else if(!reg.test(obj.value)){ alert("邮箱不通过!"); return false; }else{ if(!re.test(phone.value)) { alert("手机号不通过!"); return false; } else{ alert("通过！"); window.document.f.action = "login.html"; window.document.f.submit(); return true; } } } </script> </head> <body style="width:1520px;height:752px; background: url(4.jpg); background-size:contain ;text-align: center;"> <!--顶部--> <form method="post" action="act.php?action=adduser"> <h2 >用户注册：</h2> <hr> <p class="ziti">用户昵称：<input type="text" name="name" class="a1"><hr></p> <p class="ziti">注册邮箱：<input type="text" name="email" id="email" class="a1"><hr></p> <p class="ziti">手机号： <input type="phone" name="phone" id="phone" class="a1"><hr></p> <p class="ziti">密码： <input type="password" id="password" name="password" class="a2"></span><hr></p> <p class="ziti">性别：<span class="a2">男<input type="radio" name="sex" checked> 女 <input type="radio" name="sex"> </span><hr> </p> <div class=" text-align: center"> <button type="submit" onclick="check()" >立即注册</button> </div> </form> </body> </html>
