登錄頁面的表單驗證（登錄+密碼 ）
阿新 • • 發佈：2017-10-31
數據 jquer 文件名 kit 存在 -1 ror http java 
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 classView Code="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;}View Code
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("請求失敗！"); } }); } } };});View Code
參考其他博主的表單驗證：http://blog.csdn.net/liuyan19891230/article/details/50434355
登錄頁面的表單驗證（登錄+密碼 ）