1.写项目的过程中避免不了的就是登录界面。登录界面需要表单验证。做个整理，下次使用的时候就更加方便，不用去翻文档啦！
效果图如下：
HTML部分代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>运营登录界面</title> <link href="../css/login.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="container login_BG"> <div class="box"> <div class="logo"><img src="../images/LOGO.png"/></div> </div> <div class="login_box_wrap"> <div class="login_title">用户登录</div> <div class="login_form_box"> <form id="ajaxForm" method="post" action=""> <div class="field username_field"> <label class="username_icon"><img src="../images/login_name.png"/></label> <input id="usertxt" name="username" type="text" placeholder="请输入员工编号"/> </div> <div class="field password_field"> <label class="password_icon"><img src="../images/login_pwd.png"/></label> <input id="pwdtxt" class="txt2" name="password" type="password" placeholder="请输入密码"/> </div> <div class="rember_pwd"> <input id="saveid" type="checkbox" value=""/><span>下次记住我</span> <a href="##">忘记密码？</a> </div> <div class="login_bt"> <a href="##">登录</a> </div> </form> </div> </div> <div class="Error_prompt"> <span>该用户不存在或密码错误，请更换账户。</span> </div> <div class="footer">Copyright © 2016 矩阵魔方信息技术有公司所有权保留/京ICP备15000365号-2</div> </div> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.cookie.js" type="text/javascript"></script> <script src="../js/login.js" type="text/javascript" charset="GBK"></script> </body> </html>
CSS部分代码：
*{ margin: 0; padding: 0; } body,html{ font-family: "Microsoft YaHei"; background: url("../images/bg.png"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; } .container{ position: relative; min-width: 1200px; } .logo{ width: 1200px; height: 104px; margin: 0 auto; } .logo img{ width: 142px; height: 72px; float: left; margin-top: 32px; } .login_box_wrap{ position: absolute; left: 50%; margin-left: -267px; margin-top: 30px; width: 534px; height: 394px; background-color: #252525; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; } .login_box_wrap .login_title{ height: 30px; line-height: 30px; font-size: 26px; color: #FFFFFF; text-align: center; margin-top: 28px; margin-bottom: 32px; } .login_form_box .field { position: relative; margin-bottom: 20px; } .field label{ display: block; width: 50px; height: 56px; background-color: #fe9b31; margin-left: 60px; } .field label img{ padding: 10px 10px; } .field input{ position: absolute; left: 110px; top: 0; width: 328px; height: 20px; line-height: 20px; padding: 18px 20px; background-color: #e2e2e2; border: 0px; outline: none; font-size: 18px; color: #898989; } .rember_pwd{ color: #58bbee; height: 15px; line-height: 15px; font-size: 16px; margin-bottom: 40px; } .rember_pwd input{ width: 16px; height: 16px; margin: 0px 14px 0 60px; outline: none; } .rember_pwd span{ vertical-align: top; } .rember_pwd a{ text-decoration: none; color: #de3837; float: right; margin-right: 57px; } .login_bt{ text-align: center; } .login_bt a{ display: inline-block; text-decoration: none; width: 418px; height: 56px; line-height: 56px; font-size: 22px; color: #FFFFFF; background-color: #fe9b31; } .Error_prompt{ display: none; position: absolute; left: 50%; margin-left: -267px; margin-top: 442px; width: 534px; height: 56px; line-height: 56px; background-color: #feeba5; color: #ff0f0f; text-align: center; border-radius: 6px; } .footer{ position: absolute; margin-bottom: 48px; color: #FFFFFF; font-size: 18px; left: 50%; margin-left: -321px; margin-top: 775px; }
JS部分代码：
$(function () { //点击登陆按钮时进行的判断 $(".login_bt").on("click", function () { if ($("#usertxt").val() == "" || $("#pwdtxt").val() == "") { $(".Error_prompt").fadeIn(800).html("员工编号或密码不能为空！"); return false; } else { $(".Error_prompt").fadeOut(400); //前端初步判断数据类型成功以后像后台发出请求来判断登陆是否成功 $.ajax({ type: "post", url: "data.json",//这里的data.json 是我模拟的一个json文件名。url放的是当前页面请求的后台地址。 dataType: "json", data: $('#ajaxForm').serialize(), success: function (data) { var result = data.result; //用户名和密码校验错误 if (result == "0") { $(".Error_prompt").fadeIn(800).html("该用户不存在或密码错误"); $(".Error_prompt").fadeIn("fast", "linear"); } }, error: function () { alert("请求失败！"); } }); } }); //用户键盘按下enter键判断的事件 document.onkeypress = function (event) { e = event ? event : (window.event ? window.event : null); var currKey = 0; currKey = e.keyCode || e.which || e.charCode; if (currKey == 13) { if ($("#usertxt").val() == "" || $("#pwdtxt").val() == "") { $(".Error_prompt").fadeIn(800).html("员工编号或密码不能为空！"); return false; } else { $(".Error_prompt").fadeOut(400); //前端初步判断数据类型成功以后像后台发出请求来判断登陆是否成功 $.ajax({ type: "post", url: "data.json",//这里的data.json 是我模拟的一个json文件名。url放的是当前页面请求的后台地址。 dataType: "json", data: $('#ajaxFrm').serialize(), success: function (data) { //请求成功之后要做的事情 }, error: function () { alert("请求失败！"); } }); } } }; });
