Ajax实现简单的登录验证与帐号注册

上一篇博客介绍了Ajax的GET和POST方法以及上传文件的进度条展示,这篇博客将介绍一个简单的登录与注册功能的实现

设计HTML

这个是即将成为我毕业设计的一个网站,

在导航栏我添加了两个注册和登录的按钮和按下登录按钮后弹出的登录框,这就构成了一个简单的登录窗口

代码如下: 需引入Bootstrap

<div class="modal fade" id="user_Login" tabindex="-1" role="dialog" aria-labelledby="user_Msg_to" aria-hidden="true">
    <div class="modal-dialog" id="userLoginBox">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="user_Msg_to">登 录</h4>
            </div>
            <div class="modal-body">
                <div id="inputBox" class="text-center">
                    <p>登录后在云端保存你的歌单!</p>
                    <form id="form1">
                        <p>
                        <div id="div-email_address" class="input-group">
                            <span class="input-group-addon"><i class="icon-envelope"></i></span>
                            <input id="user_id" class="form-control" type="text" placeholder="邮箱地址">
                        </div>
                        </p>
                        <p>
                        <div id="div-password" class="input-group">
                            <span class="input-group-addon"><i class="icon-key"></i></span>
                            <input id="user_pass" class="form-control" type="password" placeholder="密码">
                        </div>
                        </p>
                        <a id="login_to" class="btn btn-block btn-success">
                            <i class="glyphicon glyphicon-log-in"></i> 登 录</a>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    关 闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

设计PHP/MySql

这里主要讲述Ajax,关于php以及SQL都直接贴代码了:

<?php
$username='root';
$userpass='q12we3';
$host='127.0.0.1';
$database='music';
$conn=new mysqli($host,$username,$userpass,$database);
if(!$conn){
    echo '-1';
    exit;
}

$user_id = trim($_GET['user_id']);
$user_pass = $_GET['user_pass'];

$sql="SELECT * FROM `user` WHERE `user_id` = '".$user_id."' ";
$result=$conn -> query($sql);
$row = $result -> fetch_row();

if($row[0]==""||$user_pass!=$row[1]){
    echo "0";
}else{
    $test = $row[0].'|'.$row[2].'|'.$row[3];
    echo $test;
}

?>

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE `user` (
  `user_id` varchar(16) NOT NULL,
  `user_pass` varchar(16) NOT NULL,
  `user_name` varchar(32) NOT NULL,
  `user_icon` varchar(1000) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


INSERT INTO `user` (`user_id`, `user_pass`, `user_name`, `user_icon`) VALUES
('chation99', 'q12we3', '恰西', 'pic/userHead/qx.jpg'),
('admin001', 'wsad2428210', '管理员001', 'pic/userHead/bq2.jpg');


ALTER TABLE `user`
  ADD PRIMARY KEY (`user_id`);

Ajax实现功能

根据我们编写的PHP代码,在我们get数据到php的时候会返回0,或者一段记录,我们需要通过判断,如果为0的话代表登录失败,账号或密码错误,如果返回一段记录的话,我们就需要对这段记录进行分析以”|”为拆分号,将结果拆分为帐号,用户名以及头像地址,

首先初始化Ajax,为了方便把Ajax绑定为登录按钮的事件函数,我们需要把它抽象化为一个函数,参数为用户输入的帐号和密码

function ajaxLogin(id,pass,classes){
var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", url, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //do something..
        }
    };
    xmlhttp.send();
}
}

这里,我们需要做的重点就是//dosomething这里!

首先,我们判断返回值,如果是0就证明登录失败,做相应的操作,如果为一段记录,我们就分析该记录并做相应操作

function ajaxLogin(id,pass,classes){
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "pages/loginByNav.php?user_id=" + id + "&user_pass=" + pass, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText != 0) {
                var textArray = xmlhttp.responseText.split("|");
                //用split()函数分割字符串为一个数组
                //next do something..
            }else{
               //do something..
            }
        }
    };
    xmlhttp.send();
}

这样基本完成了登录验证,我们在添加一些网站响应,大部分代码我已经在我的另一篇博客介绍过了
BootstrapCSS与Bootstrap表单交互修改样式的JS——笔记整理

/* 修改input样式 */
function loginStyle(idInput, passInput, loginBtn) {
    var classes = "",oldClasses = "";
    var userId = document.getElementById(idInput);
    var userPass = document.getElementById(passInput);
    var login = document.getElementById(loginBtn);
    login.addEventListener("click", function (event) {
        if (userId.value != "" && userPass.value != "") {
            oldClasses = this.getAttribute("class");
            classes = oldClasses + " disabled";
            this.setAttribute("class", classes);
            this.innerHTML = "<i class='icon-refresh icon-spin'></i> 正在登陆...";

            var idU = userId.value;
            var passU = userPass.value;

            event.preventDefault();
            ajaxLogin(idU,passU,oldClasses);

        } else {
            if (userId.value == "") {
                classes = userId.parentNode.getAttribute("class");
                userId.parentNode.setAttribute("class", classes + " has-error");
            }
            if (userPass.value == "") {
                classes = userPass.parentNode.getAttribute("class");
                userPass.parentNode.setAttribute("class", classes + " has-error");
            }
        }
    }, false);
    var focus = function () {
        this.parentNode.setAttribute("class", "input-group");
    };
    userId.addEventListener("focus", focus, false);
    userPass.addEventListener("focus", focus, false);
}

/* Ajax登录 */
function ajaxLogin(id,pass,classes){
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "pages/loginByNav.php?user_id=" + id + "&user_pass=" + pass, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText != 0) {
                var textArray = xmlhttp.responseText.split("|");
                document.getElementById("inputBox").innerHTML = "<h3>欢迎回来，" + textArray[1] + "</h3><img class='img-responsive img-circle' src='" + textArray[2] + "'>";
                document.getElementById("user_name_nav").innerHTML = " " + textArray[1] + "，欢迎你！";
                document.getElementById("user_img_nav").setAttribute("src", textArray[2]);
                document.getElementById("user_info_nav").style.visibility = "";
                document.getElementById("loginAndReg").style.visibility = "hidden";
                document.getElementById("loginAndReg1").style.visibility = "hidden";
            }else{
                var login = document.getElementById("login_to");
                login.setAttribute("class",classes);
                login.innerHTML = "<i class='glyphicon glyphicon-log-in'></i> 登 录";
                removeElem("warningTip");
                var tips = "账号或密码错误！";
                var form = document.getElementById("form1");
                form.insertBefore(alertBox(tips,"warning"),form.childNodes[0]);
            }
        }
    };
    xmlhttp.send();
}

/* 新建提示框innerHTML */
function alertBox (tip,color){
    var box = document.createElement("div");
    box.setAttribute("id","warningTip");
    box.setAttribute("class","alert alert-"+color+" alert-dismissible");
    box.setAttribute("role","alert");
    box.innerHTML = "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><spanaria-hidden='true'>&times;</span></button>"+tip;
    return box;
}

效果如下~

注册

注册与登录大同小异,这里我多介绍一些其他功能的实现,

首先是php代码

<?php
$username='root';
$userpass='q12we3';
$host='127.0.0.1';
$database='music';
$conn=new mysqli($host,$username,$userpass,$database);
if(!$conn){
    echo '-1';
    exit;
}

$user_name = trim($_GET['user_name']);
$user_id = trim($_GET['email_address']);
$user_pass = $_GET['password'];

$sql = "INSERT INTO `user` (`user_id`, `user_pass`, `user_name`, `user_icon`) VALUES ('$user_id', '$user_pass', '$user_name', 'pic/default.jpg')";

if ($conn->query($sql) === TRUE) {
    echo "1";
} else {
    echo "0";
}

$conn->close();

?>

注册成功返回1,失败返回0; 注册页面如下:

<body>
<div id="head-div">
    <a href="../index.html"><span class="icon-music" style="font-size: xx-large"></span></a>
</div>
<h4>填写以下信息,加入我们</h4>
<div id="form-reg" ng-app="myApp">
    <form id="form1" ng-controller="samePass">
        <p>
        <div id="div-user_name" class="input-group">
                        <span class="input-group-addon" id="sizing-addon2"><i
                                class="glyphicon glyphicon-user"></i></span>
            <input name="user_name" required id="user_name" type="text" class="form-control" placeholder="昵称">
        </div>
        <span style="visibility: hidden">　</span>
        </p>
        <p>
        <div id="div-email_address" class="input-group">
            <span class="input-group-addon"><i class="icon-envelope"></i></span>
            <input name="email_address" id="email_address" class="form-control" type="text" placeholder="邮箱地址">
        </div>
        <span id="sameUsername" style="color: red;visibility: hidden" >* 帐号已被占用</span>
        </p>
        <p>
        <div id="div-password" class="input-group">
            <span class="input-group-addon"><i class="icon-key"></i></span>
            <input name="password" id="password" class="form-control" ng-model="pass" type="password" placeholder="设置密码">
        </div>
        <span style="visibility: hidden">　</span>
        <p>
        <div id="div-password-again" class="input-group">
            <span class="input-group-addon"><i class="icon-key"></i></span>
            <input id="password-again" class="form-control" ng-model="passA" type="password" placeholder="再次输入密码">
        </div>
        <span style="color: red" ng-show="pass!=passA">* 保持两次输入的密码一致</span>
        </p>
        <a id="login_to" class="btn btn-block btn-success">
            <i class="glyphicon glyphicon-log-in"></i> 注 册</a>
    </form>
</div>
<div id="foot-div">

</div>
<script src="../js/pagesJS/regAcc.js"></script>
<script>
    var app = angular.module("myApp",[]);
    app.controller("samePass",function($scope){

    })
</script>
</body>

这里我引入了AngularJS作为辅助表单验证的工具,用来绑定两个密码框,使用户保证两次密码输入的一致,这里不做介绍,在接下来的博客可能会介绍
javascript代码如下:

/* Ajax登录 */
function ajaxLogin(name,id,pass,classes){
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "regAcc.php?user_name=" + name + "&email_address=" + id + "&password=" + pass, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText == "1") {
                removeElem("form1");
                document.getElementById("form-reg").innerHTML = "<h3>欢迎你，" + name + "</h3><img class='img-responsive img-circle' src='../pic/default.jpg'><div id='backTo'><a href='../index.html'>去登录!</a></div>";
            }else{
                var login = document.getElementById("login_to");
                login.setAttribute("class",classes);
                login.innerHTML = "<i class='glyphicon glyphicon-log-in'></i> 注 册";
                removeElem("warningTip");
                var tips = "发生错误,注册失败！";
                var form = document.getElementById("form-reg");
                form.insertBefore(alertBox(tips,"warning"),form.childNodes[0]);
            }
        }
    };
    xmlhttp.send();
}

这里为帐号这一栏绑定一个失去焦点事件:

var user_id = document.getElementById("email_address");
user_id.addEventListener("blur",hasUserName,false);

/* Ajax验证用户名是否存在 */
function hasUserName(){
    var xmlhttp;
    var tips = document.getElementById("sameUsername");
    var name = document.getElementById("email_address").value;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "hasUserName.php?name="+name, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText == "1") {
                tips.style.visibility = "";
                tips.style.color = "green";
                tips.innerHTML = "* 恭喜你,帐号可以使用!";
            }else {
                tips.style.visibility = "";
                tips.style.color = "red";
                tips.innerHTML = "* 账号已被占用!"
            }
        }
    };
    xmlhttp.send();
}

好了 ,完成以上的几个步骤,试试效果

试着拿刚刚注册的帐号去登录 !

完整代码托管在GitHub: https://github.com/chation/musiconline
ps.整个毕业设计还没做完…