同步提交的坏处
跳转页面-> 前端没法验证数据的合法性

异步提交表单

阻止表单默认提交

1.return false;

2. e.preventDefault();

视频处 funcitin(){} 忘写e

  1. //1.方法一
  2. <form action="server/b3.php" method="post" onsubmit = "return false"
  3. //2.方法二
  4. <button type="submit" class="J_submitBtn">提交</button>
  6.         var oSubmitBtn = document.getElementsByClassName('J_submitBtn')[0];
  8.         oSubmitBtn.onclick = function (e) {
  9.         var e = e || window.event;
  10.         e.preventDefault();
  11.         console.log('1');
  12.     }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>LOGIN</title>
  7.     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
  8.     <link rel="stylesheet" href="css/index.css" />
  9. </head>
  11. <body>
  13.     <div class="modal-container js_modal">
  14.         <div class="login-box">
  15.             <a href="javascript:;" class="fa fa-times js_closeBtn"></a>
  16.             <div class="hd">
  17.                 <h1>用户登录</h1>
  18.             </div>
  19.             <div class="bd">
  20.                 <div class="error-tip js_errorTip"></div>
  21.                 <form action="http://localhost/api_for_study/index.php/User/login" method="post" id="js_loginForm">
  22.                     <div class="input-box">
  23.                         <label for="js_username" class="fa fa-user"></label>
  24.                         <input type="text" id="js_username" class="text-input" placeholder="用户名" maxlength=20 />
  25.                     </div>
  26.                     <div class="input-box">
  27.                         <label for="js_password" class="fa fa-lock"></label>
  28.                         <input type="password" id="js_password" class="text-input" placeholder="密码" maxlength=20 />
  29.                     </div>
  30.                     <div class="input-box">
  31.                         <input type="checkbox" id="js_persistedLogin" />
  32.                         <label for="js_persistedLogin" class="checkbox-label">保持登录30天</label>
  33.                     </div>
  34.                     <div class="input-box">
  35.                         <button type="submit" class="login-btn js-loginBtn">登录</button>
  36.                     </div>
  37.                 </form>
  38.             </div>
  39.         </div>
  40.     </div>
  42.     <header class="header">
  43.         <div class="user">
  44.             <div class="user-item js_loginStatus">
  45.                 <a href="javascript:;" class="user-btn js_openBtn">登录</a>
  46.             </div>
  47.         </div>
  48.     </header>
  50.     <script type="text/html" id="js_loginTpl">
  51.       <a href="javascript:;" class="user-btn js_openBtn">登录</a>
  52.   </script>
  54.     <script type="text/html" id="js_userTpl">
  55.       <span class="nickname">欢迎您，{{nickname}}</span>
  56.       <a href="http://localhost/api_for_study/index.php/User/logout" class="user-btn js_logout">退出</a>
  57.   </script>
  58.     <script src="./js/utils.js"></script>
  59.     <script src="./js/index.js"></script>
  60. </body>
  62. </html>
body{
    margin: 0;
}

a{
    text-decoration: none;
    color: #333;
}

h1{
    font-weight: normal;
    margin: 0;
}

div{
    box-sizing: border-box;
}

input,
button{
    outline: none;
    border: none;
}

.header{
    width: 100%;
    height: 60px;
    background-color: #424242;
}

.header .user{
    float: right;
    height: 100%;
}

.header .user-item{
    float: left;
    height: 100%;
    padding: 0 20px;
    text-align: center;
    line-height: 60px;
}

.header .user-item .nickname{
    color: #fff;
    margin-right: 15px;
}

.header .user-item .user-btn{
    color: #ccc;
}

.header .user-item .user-btn:hover{
    color: #fff;
}

.modal-container{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}

.modal-container.show{
    display: block;
}

.modal-container .fa-times{
    position: absolute;
    right: 15px;
    top: 16px;
    font-size: 18px;
    color: #fff;
}

.modal-container .login-box{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -175px 0 0 -200px;
    width: 400px;
    height: 350px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 3px 5px #333;
    overflow: hidden;
}

.modal-container .login-box .error-tip{
    height: 30px;
    color: red;
    font-size: 14px;
}

.modal-container .login-box .hd{
    height: 50px;
    background-color: #57B7F9;
    text-align: center;
    line-height: 50px;

}

.modal-container .login-box .hd h1{
    font-size: 18px;
    color: #fff;
}

.modal-container .login-box .bd{
    height: 350px;
    padding: 30px;
}

.modal-container .login-box .bd .input-box{
    position: relative;
    height: 35px;
    margin-bottom: 20px;
}

.modal-container .login-box .bd .input-box input{
    width: 100%;
    height: 100%;
    text-indent: 30px;
    font-size: 16px;
    border: 1px solid #ddd;
}

.modal-container .login-box .bd .input-box .text-input:focus{
    border-color: #57B7F9;
    box-shadow: 0 0 2px #57B7F9;
}

.modal-container .login-box .bd .input-box label{
    position: absolute;
    top: 11px;
    left: 10px;
    font-size: 18px;
}

.modal-container .login-box .bd .input-box input[type="checkbox"]{
    margin-top: -2px;
}

.modal-container .login-box .bd .input-box .checkbox-label{
    font-size: 14px;
    left: 30px;
    top: 6px;
    color: #666;
}

.modal-container .login-box .bd .input-box .login-btn{
    width: 100%;
    height: 100%;
    background-color: #57B7F9;
    color: #fff;
    font-size: 16px;
}

index.js

var loginAction = (function (doc) {
    var oModal = doc.getElementsByClassName('js_modal')[0],
        submitURL = doc.getElementById('js_loginForm').action,
        oUsername = doc.getElementById('js_username'),
        oPassword = doc.getElementById('js_password'),
        oErrorTip = doc.getElementsByClassName('js_errorTip')[0],
        oPersistedLogin = doc.getElementById('js_persistedLogin'),
        oLoginStatus = doc.getElementsByClassName('js_loginStatus')[0],

        loginTpl = doc.getElementById('js_loginTpl').innerHTML,
        userTpl = doc.getElementById('js_userTpl').innerHTML;
    return {
        openLoginBoard: function (show) {
            if (show) {
                oModal.className += ' show';
            } else {
                oModal.className = 'modal-container js-modal';
            }
        },
        login: function (e) {
            var e = e || window.event;
            e.preventDefault();
            var username = trimSpace(oUsername.value),
                password = trimSpace(oPassword.value);
            if (username.length < 6 || username.length > 20) {
                oErrorTip.innerText = '用户名长度: 6-20位';
                return;
            }
            if (password.length < 6 || password.length > 20) {
                oErrorTip.innerText = '密码长度：6-20位';
                return;
            }
            this.submitForm(username, password, oPersistedLogin.checked);
        },
        submitForm: function (username, password, isPersistedLogin) {
            xhr.ajax({
                url: submitURL,
                type: 'POST',
                dataType: 'JSON',
                data: {
                    username: username,
                    password: password,
                    isPersistedLogin: isPersistedLogin
                },
                success: function (data) {
                    var code = data.error_code,
                        errorInfo = '';
                    switch (code) {
                        case '1001':
                            errorInfo = '用户名长度不正确';
                            break;
                        case '1002':
                            errorInfo = '密码长度不正确';
                            break;
                        case '1003':
                            errorInfo = '此用户名不存在';
                            break;
                        case '1004':
                            errorInfo = '密码不正确';
                            break;
                        case '1005':
                            errorInfo = '登录失败，请重试';
                            break;
                        case '200':
                            location.reload();
                            break;
                        default:
                            break;
                    }
                    oErrorTip.innerHTML = errorInfo;
                }
            });
        },
        checkAuth: function () {
            console.log('1');
            var _self = this;
            manageCookies.get('auth', function (cookie) {
                if (cookie != undefined) {
                    xhr.ajax({
                        url: 'http://localhost/api_for_study/index.php/User/checkAuth',
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            auth: cookie
                        },
                        success: function (data) {
                            var code = data.error_code,
                                errorInfo = '';
                            switch (code) {
                                case '1006':
                                    errorInfo = '登录验证不通过，请重试';
                                    _self.openLoginBoard(true);
                                    _self.render(false);
                                    break;
                                case '1007':
                                    errorInfo = '登录已过期，请重试';
                                    _self.openLoginBoard(true);
                                    _self.render(false);
                                    break;
                                case '200':
                                    _self.render(true);
                                    break;
                                default:
                                    break;
                            }
                        }
                    });
                }
            });
        },
        render: function (isLogin) {
            if (isLogin) {
                manageCookies.get('nickname', function (cookie) {
                    oLoginStatus.innerHTML = userTpl.replace(/{{(.*?)}}/g, cookie);
                });
            } else {
                oLoginStatus.innerHTML = loginTpl
            }
        }
    }
})(document);

;
(function (doc) {
    var oOpenBtn = doc.getElementsByClassName('js_openBtn')[0],
        oCloseBtn = doc.getElementsByClassName('js_closeBtn')[0],
        oLoginBtn = doc.getElementsByClassName('js-loginBtn')[0];

    var init = function () {
        loginAction.checkAuth.call(loginAction);
        bindEvent();
    }

    function bindEvent() {
        oOpenBtn.addEventListener('click', loginAction.openLoginBoard.bind(null, true), false);
        oCloseBtn.addEventListener('click', loginAction.openLoginBoard.bind(null, false), false),
            oLoginBtn.addEventListener('click', loginAction.login.bind(loginAction), false);
    }
    init();
})(document);
// 每次加载页面校验cookie 如果为空则什么都不做 如果成功则登录 否则则提示
// 每次提交表单前校验 密码与用户名长度
//  提交时若成功 则刷新页面  location.reload();  否则则提示