无刷新巨丑无比的表单验证

原创 2018-11-13 13:22:54 486
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <script src="jquery-3.3.1.js"></script>
    <script src="dist/js/bootstrap.js"></script>
    <style>
 .content{width: 100%;height:100%;background: #aaa;}
        .bg{background: #d4d6d6;}
        .btn-content{padding: 300px 0;}
    </style>
</head>
<body>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 bg">
                    <div class="btn-content">
                        <button class="btn btn-lg btn-danger center-block" data-toggle="modal" data-target="#login">别点击登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="login">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal"><span>x</span></button>
                    <h3 class="modal-title">用户登录</h3>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">邮箱:</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" id="email" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码:</label>
                            <div class="col-sm-10">
                                <input type="password" name="password" id="password" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="col-sm-10 col-sm-offset-2">
                        <span class="msg"></span>
                        <button class="btn btn-primary btn1">登录</button>
                        <button class="btn btn-info" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
 var btnDiv  = document.getElementsByClassName('btn-content')[0];
 var btn = document.getElementsByClassName('btn1')[0];
 btnDiv.style.height = document.documentElement.clientHeight+'px';
 btnDiv.style.paddingTop = (document.documentElement.clientHeight/2-20)+'px';
 btn.onclick = function(){
        var xhr = new XMLHttpRequest(); //创建一个xhr对象
        //监听响应状态
        // console.log(xhr);
 xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var spans = document.getElementsByClassName('msg')[0];
 spans.style.color = 'red';
 var json = JSON.parse(xhr.responseText);
 if(json.status == 1){
                        spans.innerHTML = json.msg;
 }else if(json.status == 0){
                        spans.innerHTML = json.msg;
 }
                    btn.disabled = true;    //禁用btn
 setTimeout(function () {
                        btn.disabled = false;//恢复btn
 spans.innerHTML = '';
 if(json.status === 1){
                            window.location.href = 'admin.php';
 }
                    },3000);
 }else{
                    alert('响应失败!'.xhr.status);
 }
            }
        }
        //设置请求参数
 xhr.open('post','inc/check.php',true);
 //设置头信息将内容类型设置为表单提交方式
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 //发送请求参数
 var data = {
            email :document.getElementsByName('email')[0].value,
 password :document.getElementsByName('password')[0].value,
 };
 var data_json = JSON.stringify(data);   //将js对象转为json字符串(其实就是文本)
        //发送参数格式化成数组样式(依旧是字符串)
 xhr.send('data='+data_json);
 }

</script>
</body>
</html>
<?php
//登录验证;

$user = json_decode($_POST['data']);    //将json字符串转为php对象
$email = $user->email;
$password = sha1($user->password);
$pdo = new PDO('mysql:host=127.0.0.1;dbname=zh','root','root');

//必须通过统计满足条件记录数来确定是否存在该用户
$sql =  "SELECT COUNT(*) FROM `zh_user` WHERE `email`='{$email}' AND `password`='{$password}'";
$stmt = $pdo->prepare($sql);
$stmt->execute();
//判断是否验证成功?
if($stmt->fetchColumn(0) == 1){
    //返回一个数组['status'=>1,'msg'=>'登陆成功,正在跳转...']转为json字符串
    echo json_encode(['status'=>1,'msg'=>'登陆成功,正在跳转...']);
    exit;
}else{
    echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,请重试']);
    exit;
}

1.png2.png

3.png


发布手记

热门词条