登录页面

最新推荐文章于 2023-06-16 22:15:00 发布

时光默

最新推荐文章于 2023-06-16 22:15:00 发布

阅读量759

点赞数

文章标签： post

本文链接：https://blog.csdn.net/zengyonglan/article/details/52609791

版权

CSS 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

HTTP

1 篇文章 0 订阅

订阅专栏

login.html

<!--
@Author: zengyl
@Email:  zengyl@edaixi.com
@Date:   2016-07-18
@Last modified by:   zengyl
@Last modified time: 2016-07-18
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> KA 登录</title>
    <!-- <link rel="stylesheet" type="text/css" href="./bootstrap.min.css"> -->
    <link rel="stylesheet" href="./log.css">
</head>
<!-- <section> html5标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 -->
<body>
    <div class="top-border"></div>
    <section>
        <header class="login-header">
            <span>登陆首页</span>
        </header>
        <div class="panel-body">
            <form class="login-form">
                <div>
                    <label for="usrEmail">电子邮箱</label>
                    <input type="email" class="input-block" id="usrEmail">
                    <label for="usrPassword">密码</label>
                    <input type="password" class="input-block" id="usrPassword">
                    <div class="error-message" id="errorMessage"></div>
                    <button type="submit" class="btn" id="loginBtn">登录</button>
                </div>
            </form>
        </div>
    </section>
    <script src="./login.js"></script>
</body>
</html>

login.js

/**
 * 封装ajax post方法
 * @author zengyl<gongdl@edaixi.com>
 * @version [0.1]
 * @param   {[String]}    url          [必选]
 * @param   {[Object]}    data         [必选]
 * @param   {[Function]}  successFunc  [必选]
 */
function post(url, data, successFunc) {
    // 创建ajax引擎对象
    var xhr = new XMLHttpRequest();
    // 打开
    xhr.open("POST", url, true);
    // 发送
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //请求成功,将json字符串转换为js对象
            successFunc(JSON.parse(xhr.responseText));
        }
    }
}

//简化id选择器写法
var $ = function(id) {
    return document.getElementById(id);
}

var email = $("usrEmail");
var password = $("usrPassword");
var loginBtn = $("loginBtn");
var errorMessage = $("errorMessage");

//邮箱验证规则
var emailRule = /^([\w\-])+@([\w\-])+((\.[\w\-]{2,3}){1,2})$/;

//清除错误提示信息
function cleanInvalidInfo() {
    errorMessage.textContent = ""
}

//输入时隐藏错误提示信息
email.onfocus = cleanInvalidInfo;
password.onfocus = cleanInvalidInfo;

//点击登录按钮执行验证
loginBtn.onclick = function() {
    if (!(emailRule.test(email.value) && password.value)) {
        errorMessage.removeAttribute("hidden"); //删除属性
        if (!emailRule.test(email.value)) {
            errorMessage.textContent = "请输入正确格式的邮箱"
        } else {
            errorMessage.textContent = "请输入密码"
        }
    } else {
        //验证通过，隐藏错误信息，发送登录请求

        //测试用
        alert("点击登陆成功");

        cleanInvalidInfo();
        postUsrInfo();
    }

    return false;
}

//发送用户登录信息
function postUsrInfo() {
    var postInfo = {
        "email": email.value,
        "password": password.value
    };
    post("/ucenter/login", postInfo, function(res){
        if (res.ret) {
            var usrInfo = JSON.stringify(res.data);
            localStorage.setItem("kaUserInfo", usrInfo);//localStorage本地存储 setItem设置kaUserInfo为"usrInfo" 
            //登录转向app起始页
            window.location.replace(res.data.href);
        } else {
            errorMessage.textContent = res.message;
        }
    });
}

//访问登录页，如果已经登录，则直接跳转至app入口
(function() {
    if(localStorage.getItem("kaUserInfo")) {//getItem 获取kaUserInfo的值
        var href = JSON.parse(localStorage.getItem("kaUserInfo")).href;//JSON.parse()将字符串转为json格式
        window.location.replace(href);
    }
})();

时光默

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
登录页面

login.html<!DOCTYPE html><html><head> <meta charset="UTF-8">
复制链接

扫一扫