一个简单的注册登录页面（包括阿里大于的手机验证）html+JS+AJAX+PHP
2016-12-09 20:24
1126 查看
背景：非计算机专业，在校学习期间，接触过linux，perl,C语言。今年毕业以后学了一段时间的html/css/javascript，最近找到一份PHP程序员工作。面试的时候，HR让我回去做个注册登录页面，花了三天时间做了个简单的注册登录页。现在把代码贴上。
首先，是注册页面。注册要考虑几个方面的内容，第一：输入内容的合法性，可通过javascript实现；第二：检验输入内容（如用户名、手机号等）是否在数据库中已存在（AJAX+PHP）。第三：存储（AJAX+PHP）。
其中，阿里大于的手机短信验证，需要下载它的SDK包。手机验证的逻辑是：PHP生成验证码并存入session中，并通过短信接口（阿里大于）给用户发送此次的验证码，通过AJAX把用户输入值传参到后台PHP，并在后台PHP文件中对比用户传入的验证码是否与session中的验证码匹配。
其次，是登录界面。登录界面主要是验证内容是否与数据库中内容完全匹配。
最后，待续……忘记密码的界面及功能实现。
一、注册界面成图如下：
Code1: register.html
Code3 checkUserName.php
Code4 checkPhone.php
Code5 checkEmail.php
Code6 phoneVertificationCodeSend.php
目的：生成随机验证码放在session中，并利用阿里大于给用户发验证码
Code7 checkPhoneVertificationCode.php
//把用户输入的验证码和session中存的验证码进行对比
Code8 register.php
//提交表单后，把变量存在数据库中，（首先需要在数据库中创建表，这步省略）
二、登录界面：
我的登录界面做的较简单，提交以后才开始检验。
login.html
login.css
login.php
首先，是注册页面。注册要考虑几个方面的内容，第一：输入内容的合法性，可通过javascript实现；第二：检验输入内容（如用户名、手机号等）是否在数据库中已存在（AJAX+PHP）。第三：存储（AJAX+PHP）。
其中，阿里大于的手机短信验证，需要下载它的SDK包。手机验证的逻辑是：PHP生成验证码并存入session中，并通过短信接口（阿里大于）给用户发送此次的验证码，通过AJAX把用户输入值传参到后台PHP，并在后台PHP文件中对比用户传入的验证码是否与session中的验证码匹配。
其次，是登录界面。登录界面主要是验证内容是否与数据库中内容完全匹配。
最后，待续……忘记密码的界面及功能实现。
一、注册界面成图如下：
Code1: register.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-16">
<meta name="keywords" content="keyword1,keword2,keyword3">
<meta name="description" content="你网页的描述">
<meta name="author" content="" >
<meta name="copyright" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>I am a register</title>
<link rel="stylesheet" type="text/css" href="register.css">
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
</style>
<script>
//单击输入文本框时，出现的information
function userNameInfo(){
var s=document.getElementById("loginname_next_td");
s.innerHTML="<font style='color:grey;'>支持数字、字母、下划线，4-15个字符</font>";
}
function passwordInfo(){
var s=document.getElementById("password_next_td");
s.innerHTML="<font style='color:grey;'>建议使用字母、数字和符号两种及以上组合，8-15个字符</font>";
}
function passwordConfirmInfo(){
var s=document.getElementById("password2_next_td");
s.innerHTML="<font style='color:grey;'>请再次输入密码</font>";
}
function phoneInfo(){
var s=document.getElementById("phone_next_td");
s.innerHTML="<font style='color:grey;'>完成验证后，可以使用该手机登录和找回密码</font>";
}
function emailInfo(){
var s=document.getElementById("email_next_td");
s.innerHTML="<font style='color:grey;'>请输入邮箱地址</font>";
}
//登录名验证
function checkUserName(){
var userName=document.getElementById("loginname").value;
var s=document.getElementById("loginname_next_td");
//通过AJAX与后台通信，判断用户名是否已存在于数据库。
function validate(){
$.ajax({
url:"checkUserName.php",
data:{"username":userName},//传入后台参数
type:"POST",
success:function(data){
console.log(data);
var dataObj=JSON.parse(data);//对字符串形式的json解析为对象
console.log(dataObj.result);
if(dataObj.result=="validate!"){s.innerHTML="<img src='./pic/checkbox-checked.png' width='20px' height='20px'>";}
else{s.innerHTML="用户名已存在";document.getElementById("loginname").value="";}
}
});
}
var Reg=/^[0-9a-zA-Z_]{4,15}$/;//用正则判断其合法性
if(Reg.test(userName)){
validate();}
else{s.innerHTML="数字、字母、下划线组合，4-15个字符";document.getElementById("loginname").valu
d489
e="";}
}
function checkPassword(){
var password=document.getElementById("password1").value;
var s=document.getElementById("password1_next_td");
var Reg=/^[a-zA-Z0-9\$\(\)\*\+\[\]\?\\\^\{\}\|]{8,15}$/;
if(Reg.test(password)){
s.innerHTML="<img src='./pic/checkbox-checked.png' width='20px' height='20px'>";
}
else{s.innerHTML="8-15个字符";document.getElementById("password1").value="";}
}
function checkPasswordConfirm(){
var password=document.getElementById("password1").value;
var passwordConfirm=document.getElementById("password2").value;
var s=document.getElementById("password2_next_td");
if(password==""){s.innerHTML="请先输入密码";}
else{
if(passwordConfirm==password){
s.innerHTML="<img src='./pic/checkbox-checked.png' width='20px' height='20px'>";}
else{s.innerHTML="两次输入的密码不一致";}
}
}
function checkPhone(){
var phone=document.getElementById("phone").value;
var s=document.getElementById("phone_next_td");
function validate(){
$.ajax({
url:"checkPhone.php",
data:{"phone":phone},//传入后台参数
type:"POST",
success:function(data){
console.log(data);
var dataObj=JSON.parse(data);//对字符串形式的json解析为对象
console.log(dataObj.result);
if(dataObj.result=="validate!"){s.innerHTML="<img src='./pic/checkbox-checked.png' width='20px' height='20px'>";}
else{s.innerHTML="该手机号已被注册";document.getElementById("loginname").value="";}
}
});
}
var Reg=/^1\d{10}$/;//以1打头，11位
if(Reg.test(phone)){validate();}
else{s.innerHTML="请输入正确的电话号码";document.getElementById("phone").value="";}
}
function phoneVertificationCodeSend(){
//后台生成随机数，并存入session,提取手机号作为输入参数传给.php,.php利用短信接口通过阿里大鱼发送给用户验证码
//根据用户输入，进入后端，判断用户输入和之前的验证码是否一致，一致的话输出校验成功。
//ps:有时间可以设置验证码间隔几次可点击重新发送，并回收.php的反馈，并显示是否成功发送
s=document.getElementById("vertificationCode_next_td");
var phone=document.getElementById("phone").value;
var userName=document.getElementById("loginname").value;
function vertiCodeSend(){
$.ajax({
url:"phoneVertificationCodeSend.php",
data:{"username":userName,"phone":phone},//传入后台参数
type:"POST",
success:function(data){
console.log(data);
// var dataObj=JSON.parse(data);//对字符串形式的json解析为对象
//console.log(dataObj.result);
//if(dataObj.result1=="send!"){alert("验证码发送成功");}
//else{alert("验证码发送失败");}
}
});
}
if((phone=="")||(userName=="")){s.innerHTML="请先输入用户名及手机号";}
else{vertiCodeSend();s.innerHTML="";}
}
function checkPhoneVertificationCode(){
var inputVertiCode=document.getElementById("vertificationCode").value;
var s=document.getElementById("vertificationCode_next_td");
$.ajax({
url:"checkPhoneVertificationCode.php",
data:{"inputVertiCode":inputVertiCode},//传入后台参数
type:"POST",
success:function(data){
console.log(data);
var dataObj=JSON.parse(data);//对字符串形式的json解析为对象
console.log(dataObj.result);
if(dataObj.result=="validate!"){s.innerHTML="<img src='./pic/checkbox-checked.png' width='20px' height='20px'>";}
else{s.innerHTML="校验失败";}
}
});
}
function checkEmail(){
var email=document.getElementById("email").value;
var s=document.getElementById("email_next_td");
function validate(){
$.ajax({
url:"checkEmail.php",
data:{"email":email},//传入后台参数
type:"POST",
success:function(data){
console.log(data);
var dataObj=JSON.parse(data);//对字符串形式的json解析为对象
console.log(dataObj.result);
if(dataObj.result=="validate!"){s.innerHTML="<img src='./pic/checkbox-checked.png' width='20px' height='20px'>";}
else{s.innerHTML="该邮箱已被注册";document.getElementById("email").value="";}
}
});
}
var Reg=/^(\w)+@([0-9a-zA-z])+(\.[0-9a-zA-Z]{2,})+$/;//字母数字下划线打头，@后为数字或|和字母，.后为两个以上的数字或|和字母
if(Reg.test(email)){validate();}
else{s.innerHTML="请输入正确邮箱地址";document.getElementById("email").value="";}
}
</script>
</head>
<body>
<div class="short-cut">
<h1>欢迎注册</h1>
<h1><a href="login.html">已有帐号，请登录</a><h1>
</div>
<div class="w">
<form name="form1" method="post" action="register.php">
<table id="table1">
<tbody>
<tr>
<td><label for="loginname">登录名称：</label></td>
<td></td>
<td><input id="loginname" type="text" name="login_name" maxlength="15" placeholder="" onfocus="userNameInfo()" onblur="checkUserName()" required></td>
<td id="loginname_next_td"></td>
</tr>
<tr>
<td><label for="password1">密码：</label></td>
<td></td>
<td><input id="password1" type="password" name="password" maxlength="15" placeholder="建议至少使用两种字符组合" onfocus="passwordInfo()" onblur="checkPassword()" required></td>
<td id="password1_next_td"></td>
</tr>
<tr>
<td><label for="password2">确认密码：</label></td>
<td></td>
<td><input id="password2" type="password" name="password_confirm" maxlength="15" onfocus="passwordConfirmInfo()" onblur="checkPasswordConfirm()" required></td>
<td id="password2_next_td"></td>
</tr>
<tr>
<td><label for="phone">联系电话：</label></td>
<td></td>
<td>
<input id="phone" type="text" name="phone" maxlength="11" onblur="checkPhone()" onfocus="phoneInfo()" required></td>
<td id="phone_next_td"></td>
</tr>
<tr>
<td><label for="vertificationCode">手机验证码</label></td>
<td></td>
<td>
<input id="vertificationCode" type="text" name="vertificationCode" style="width:150px;" onblur="checkPhoneVertificationCode()" >
<input id="vertificationCodeBtn" type="button" style="width:100px;font-size:14px;" value="获取验证码" onclick="phoneVertificationCodeSend()">
</td>
<td id="vertificationCode_next_td"></td>
</tr>
<tr>
<td><label for="email">电子邮箱：</label></td>
<td></td>
<td><input id="email" type="email" name="email" maxlength="30" onfocus="emailInfo()" onblur="checkEmail()" required></td>
<td id="email_next_td"></td>
</tr>
</tbody>
</table>
<table id="table2">
<tbody>
<tr>
<th><button type="submit" name="submit" value="注册">注册</button></th>
<th><button type="reset">重置</button></th>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>Code2 register.cssbody{
font-family:arial, times, serif;
font-style:normal;
font-weight:normal;
font-size:16px;}
.short-cut{
margin-left:50px;
width:1248px;
height:60px;
background-color:transparent;
display:table;
border-bottom:5px solid lightgrey;
}
h1{
display:table-cell;
width:210px;
float:left;
vertical-align:middle;
font-size:24px;
}
h1:after{
visibility:hidden;
clear:both;
display:block;
height:0px;
content:".";}
.w{
position:relative;
top:0px;
left:90px;
width:1248px;
height:100%;
font-size:15px;}
}
#table1{
position:absolute;
width:50%;
margin-left:50px;
margin-top:50px;
}
#table1 td:nth-of-type(1){
width:90px;
height:55px;
border:0;
}
#table1 td:nth-of-type(2){
width:10px;
height:55px;
border:0;
}
#table1 td:nth-of-type(3){
width:300px;
height:54px;
border:1px;
}
#table1 td:nth-of-type(3) input{
width:250px;
height:35px;}
#table1 td:nth-of-type(3):after{
content:"*";
font-size:18px;
color:red;}
#table1 td:nth-of-type(4){
font-size:12px;
color:red;}
#table2{
border:0;
width:300px;}
button{
width:120px;
height:40px;
color:white;
background-color:rgb(2, 114, 188);
border-radius:10%;
}Code3 checkUserName.php
<?php
mysql_connect("localhost","guest","guest123");
mysql_select_db("vt");
mysql_query("SET NAMES 'utf8'");
$sql = "SELECT username FROM user where username = '$_POST[username]'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
if($num)
{
$list=array("result"=>"notValidate!");
}
else
{
$list=array("result"=>"validate!");
}
echo json_encode($list);//返回的是最外层加了双引号的json
?>Code4 checkPhone.php
<?php
mysql_connect("localhost","guest","guest123");
mysql_select_db("vt");
mysql_query("SET NAMES 'utf8'");
$sql = "SELECT phone FROM user where phone = '$_POST[phone]'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
if($num)
{
$list=array("result"=>"notValidate!");
}
else
{
$list=array("result"=>"validate!");
}
echo json_encode($list);//返回的是最外层加了双引号的json
?>Code5 checkEmail.php
<?php
mysql_connect("localhost","guest","guest123");
mysql_select_db("vt");
mysql_query("SET NAMES 'utf8'");
$sql = "SELECT email FROM user where email = '$_POST[email]'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
if($num)
{
$list=array("result"=>"notValidate!");
}
else
{
$list=array("result"=>"validate!");
}
echo json_encode($list);//返回的是最外层加了双引号的json
?>Code6 phoneVertificationCodeSend.php
目的：生成随机验证码放在session中，并利用阿里大于给用户发验证码
<?php
session_start();
//生成4位随机验证码，并存入缓存
function getRandomString($len, $chars=null)
{
if (is_null($chars)){
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
}
mt_srand(10000000*(double)microtime());
for ($i = 0, $str = '', $lc = strlen($chars)-1; $i < $len; $i++){
$str .= $chars[mt_rand(0, $lc)];
}
return $str;
}
$vertiCode=getRandomString(4);
$_SESSION['vertiCodeS']=$vertiCode;//给session中的vertiCodeS变量赋值
//调用阿里大于短信验证码服务，给用户发随机验证码,$userName,$phone,$vertiCode为输入的参数，电话号码时必须的，
//其他两个参数是因为我在阿里大于短信模板中设置的参数
function sendSMS($userName,$phone,$vertiCode){
include "./alidayu_sdk/TopSdk.php";
$c = new TopClient;
$c->appkey ="";//你自己的appkey，需要在阿里大于创建应用(随便什么应用都行)，以获取appkey
$c->secretKey ="";//你自己的secretKey
$req = new AlibabaAliqinFcSmsNumSendRequest;
$req->setSmsType("normal");
$req->setSmsFreeSignName("大盈若冲");
$req->setSmsParam("{\"userName\":\"$userName\",\"vertificationCode\":\"$vertiCode\"}");
$req->setRecNum("$phone");
$req->setSmsTemplateCode("");
$resp = $c->execute($req);
echo $resp;
var_dump($resp);
//if($resp->result->success){echo true;}
//else{echo false;}
}
sendSMS($_POST[username],$_POST[phone],$vertiCode);
?>Code7 checkPhoneVertificationCode.php
//把用户输入的验证码和session中存的验证码进行对比
<?php
session_start();
// echo $_SESSION['vertiCodeS'];
if($_SESSION['vertiCodeS']==$_POST["inputVertiCode"]){
$list=array("result"=>"validate!");
}
else{
$list=array("result"=>"notValidate!");
}
echo json_encode($list);
?>Code8 register.php
//提交表单后，把变量存在数据库中，（首先需要在数据库中创建表，这步省略）
<?php
if(isset($_POST["submit"]) && $_POST["submit"] == "注册")
{
$user = $_POST["login_name"];
$psw = $_POST["password"];
$psw_confirm = $_POST["password_confirm"];
$phone=$_POST["phone"];
$email=$_POST["email"];
$vertificationCode=$_POST["vertificationCode"];
if($user == "" || $psw == "" || $psw_confirm == "" || $phone== "" || $email== "" || $vertificationCode == "")
{
echo "<script>alert('请确认信息完整性！'); history.go(-1);</script>";
}
else
{
if($psw == $psw_confirm)
{
mysql_connect("localhost","guest","guest123"); //连接数据库
mysql_select_db("vt"); //选择数据库
mysql_query("SET NAMES 'utf8'"); //设定字符集
$sql = "SELECT username FROM user WHERE username = '$_POST[login_name]'"; //SQL语句
$result = mysql_query($sql); //执行SQL语句
$num = mysql_num_rows($result); //统计执行结果影响的行数
if($num) //如果已经存在该用户
{
echo "<script>alert('用户名已存在'); history.go(-1);</script>";
}
else //不存在当前注册用户名称
{
$sql_insert = "INSERT INTO user (username,password,phone,email) VALUES('$_POST[login_name]','$_POST[password]','$_POST[phone]','$_POST[email]')";
$res_insert = mysql_query($sql_insert);
//$num_insert = mysql_num_rows($res_insert);
if($res_insert)
{
echo "<script>alert('注册成功！'); </script>";
}
else
{
echo "<script>alert('系统繁忙，请稍候！'); history.go(-1);</script>";
}
}
}
else
{
echo "<script>alert('密码不一致！'); history.go(-1);</script>";
}
}
}
else
{
echo "<script>alert('提交未成功！'); history.go(-1);</script>";
}
?>二、登录界面：
我的登录界面做的较简单，提交以后才开始检验。
login.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html"> <meta charset="utf-16"> <meta name="keywords" content="keyword1,keword2,keyword3"> <meta name="description" content="你网页的描述"> <meta name="author" content="zhenglulu" > <meta name="copyright" content=""> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>I am login</title> <link rel="stylesheet" type="text/css" href="login.css"> <style type="text/css"> </style> </head> <body> <div class="short-cut"> <h1>欢迎登录</h1> </div> <div class="w"> <form name="form1" method="post" action="login.php"> <table id="table1"> <tbody> <tr> <td>登录名称：</td> <td></td> <td><input id="loginname" type="text" name="login_name" maxlength="15" placeholder="您的账户名和登录名" required></td> <td><a href="register.html">注册</a></td> </tr> <tr> <td>密码：</td> <td></td> <td><input id="password1" type="password" name="password" maxlength="15" placeholder="密码" required></td> <td><a href="">忘记密码</a></td> </tr> </tbody> </table> <table id="table2"> <tbody> <tr> <th><button type="submit" name="submit" value="登录">登录</button></th> <th><button type="reset">重置</button></th> </tr> </tbody> </table> </form> </div> </body> </html>
login.css
body{
font-family:arial, times, serif;
font-style:normal;
font-weight:normal;
font-size:12px;}
.short-cut{
margin-left:50px;
width:1248px;
height:60px;
background-color:transparent;
display:table;
border-bottom:5px solid lightgrey;
}
h1{
display:table-cell;
vertical-align:middle;
font-size:30px;
}
.w{
position:relative;
top:0px;
left:50px;
width:1248px;
height:100%;
font-size:15px;}
}
#table1{
position:absolute;
width:50%;
margin-left:50px;
}
#table1 td:nth-of-type(1){
width:90px;
height:75px;
border:0;
}
#table1 td:nth-of-type(2){
width:10px;
height:75px;
border:0;
}
#table1 td:nth-of-type(3){
width:250px;
height:70px;
border:1px;
}
#table2{
border:0;
width:300px;}
button{
width:120px;
height:40px;
color:white;
background-color:rgb(2, 114, 188);
border-radius:10%;
}login.php
<?php
if(isset($_POST["submit"]) && $_POST["submit"] == "登录")
{
$user = $_POST["login_name"];
$psw = $_POST["password"];
if($user == "" || $psw == "")
{
echo "<script>alert('请输入用户名或密码！'); history.go(-1);</script>";
}
else
{
mysql_connect("localhost","guest","guest123");
mysql_select_db("vt");
mysql_query("SET NAMES 'utf8'");
$sql = "SELECT username,password FROM user where username = '$_POST[login_name]' and password = '$_POST[password]'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
if($num)
{
$row = mysql_fetch_array($result); //将数据以索引方式储存在数组中
//echo $row[0];
echo "<script>alert('登录成功！');</script>";
}
else
{
echo "<script>alert('用户名或密码不正确！');history.go(-1);</script>";
}
}
}
else
{
echo "<script>alert('提交未成功！'); history.go(-1);</script>";
}
?>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 小白教程——Windows下用PHP写一个简单的登录注册页面（二）
- 学习用js, ajax, php做一个简单的小黄鸡页面（调用simsimi API）
- 小白教程——Windows下用PHP写一个简单的登录注册页面（一）
- 用PHP和HTML写一个简单的网站登录注册项目
- ajax实例 html页面中用js调用一个php文件
- 学习用js, ajax, php做一个简单的小黄鸡页面（调用simsimi API）
- js用ajax和jison在不同页面的php和html之间互相传值的方法
- 写了一个比较简单的会员注册页面，带会员已经存在验证，发上来大家给点建议
- 使用PHP返回需要登录验证的HTML页面
- 一个简单的用ajax验证注册用户名是否存在的例子
- js对注册页面的简单验证
- 一个注册会员页面中：表单验证的js
- 自己用html、js、ajax、php制作的简单网页版计算器。
- 用php怎么写一个用户注册登录的页面呢？
- 【转】jQuery+Ajax+PHP登录实例 一个简单的用Jquery中ajax方法登录的例子
- PERL-MOJO写一个简单的登录验证页面
- php用户注册页面利用js进行表单验证
- 用户注册页面--ajax.php.js.css
- php+js+html+ajax获取页面数据
- 困扰我的一个简单的php调用js跳转页面