登录页面

来源：互联网发布：三位一体2 mac 编辑：程序博客网时间：2024/04/29 13:38

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 0