詳解JS實(shí)現(xiàn)系統(tǒng)登錄頁的登錄和驗(yàn)證
這篇文章用JS顯示表單的登錄以及驗(yàn)證和對鍵盤的監(jiān)聽,這里有兩種方法,一種是無需用戶驗(yàn)證直接登錄,一種是需要賬戶密碼匹配才可登錄。
1. html代碼
<div class="content"> <div class="login-wrap"> <form id="user_login" action=""> <h3>登 錄</h3> <input class="name" name="" id="accountName" type="text" placeholder="請輸入用戶名"> <input class="code" name="password" id="password" type="password" placeholder="請輸入密碼"> <div class="btn"> <input type="button" id="submit" class="submit" value="登錄" onclick="return check(this.form);"> <input type="reset" id="reset" class="reset" value="重置" > </div> <div id="CheckMsg" class="msg"></div> </form> </div> </div>
2.CSS樣式
.content{ padding:0 auto; margin: 0 auto; height: 450px; width: 100%; background: url(../Image/Login-Img/login_bg.jpg) no-repeat center; background-size:100% 450px ; margin-top: 25px; } .login-wrap{ position: absolute; width:320px; height: 300px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; right:200px; margin-top: 75px; background: url("../Image/Login-Img/form_bg.png") no-repeat; background-size: 100%; } .login-wrap h3{ color:#fff; font-size: 18px; text-align: center; } .name,.code{ border:1px solid #fff; width:230px; height: 40px; margin-left: 25px; margin-bottom: 20px; padding-left: 40px; } .name{ background: url("../Image/Login-Img/user.png") no-repeat left; background-position-x:12px; } .code{ background: url("../Image/Login-Img/passwd.png") no-repeat left; background-position-x:12px; } .btn input{ height: 40px; width: 120px; float: left; margin-right: 25px; border:none; color:#fff; font-size: 16px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin-top: 10px; cursor: pointer; } input:active{border-color:#147a62} .submit{background: #ea8c37;margin-left: 25px;} .reset{background: #bbb;} /**錯(cuò)誤信息提醒**/ .msg{ color: #ea8c37; font-size: 14px; padding-left: 40px; padding-top: 10px; clear: both; font-weight: bold; }
3.JS代碼
//驗(yàn)證表單是否為空,若為空則將焦點(diǎn)聚焦在input表單上,否則表單通過,登錄成功 function check(form){ var accountName = $("#accountName"),$password = $("#password"); var accountName = accountName.val(),password = $password.val(); if(!accountName || accountName == ""){ showMsg("請輸入用戶名"); form.accountName.focus (); return false; } if(!password || password == ""){ showMsg("請輸入密碼"); form.password.focus (); return false; } //這里為用ajax獲取用戶信息并進(jìn)行驗(yàn)證,如果賬戶密碼不匹配則登錄失敗,如不需要驗(yàn)證用戶信息,這段可不寫 $.ajax({ url : systemURL,// 獲取自己系統(tǒng)后臺用戶信息接口 data :{"password":password,"accountName":accountName}, type : "GET", dataType: "json", success : function(data) { if (data){ if (data.code == "1111") { //判斷返回值,這里根據(jù)的業(yè)務(wù)內(nèi)容可做調(diào)整 setTimeout(function () {//做延時(shí)以便顯示登錄狀態(tài)值 showMsg("正在登錄中..."); console.log(data); window.location.href = url;//指向登錄的頁面地址 },100) } else { showMsg(data.message);//顯示登錄失敗的原因 return false; } } }, error : function(data){ showMsg(data.message); } }); } //錯(cuò)誤信息提醒 function showMsg(msg){ $("#CheckMsg").text(msg); } //監(jiān)聽回車鍵提交 $(function(){ document.onkeydown=keyDownSearch; function keyDownSearch(e) { // 兼容FF和IE和Opera var theEvent = e || window.event; var code = theEvent.keyCode || theEvent.which || theEvent.charCode; if (code == 13) { $('#submit').click();//具體處理函數(shù) return false; } return true; } });
到這里,一個(gè)完整的登錄界面結(jié)束,下面看登錄失敗和成功時(shí)的效果:
以上所述是小編給大家介紹的JS實(shí)現(xiàn)系統(tǒng)登錄頁的登錄和驗(yàn)證詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- HTML頁面登錄時(shí)的JS驗(yàn)證方法
- 用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能
- js實(shí)現(xiàn)登錄注冊框手機(jī)號和驗(yàn)證碼校驗(yàn)(前端部分)
- 原生js驗(yàn)證簡潔注冊登錄頁面
- JSP實(shí)現(xiàn)登錄功能之添加驗(yàn)證碼
- javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
- js登錄滑動驗(yàn)證的實(shí)現(xiàn)(不滑動無法登陸)
- JSP + Servlet實(shí)現(xiàn)生成登錄驗(yàn)證碼示例
- Ionic+AngularJS實(shí)現(xiàn)登錄和注冊帶驗(yàn)證功能
- js實(shí)現(xiàn)滑動滑塊驗(yàn)證登錄
相關(guān)文章
純js實(shí)現(xiàn)仿QQ郵箱彈出確認(rèn)框
仿QQ郵箱的彈出層,彈出確認(rèn)框,主要是用火狐的firebug把html和css扣了下來,沒有做封裝,就定義了一個(gè)拖動事件. 大家可以封裝自己的彈出窗,嘿嘿!2015-04-04溫習(xí)Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)
javascript是一門簡單的語言,也是一門復(fù)雜的語言。這篇文章主要介紹了溫習(xí)Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2016-05-05javascript中的綁定與解綁函數(shù)應(yīng)用示例
本文為大家詳細(xì)介紹下javascript中綁定與解綁函數(shù)在Ie及Mozilla中的應(yīng)用,感興趣的各位可以參考下哈,希望對大家有所幫助2013-06-06js canvas實(shí)現(xiàn)二維碼和圖片合成的海報(bào)
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)二維碼和圖片合成的海報(bào),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11JS實(shí)現(xiàn)側(cè)懸浮浮動實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)側(cè)懸浮浮動實(shí)例代碼,有需要的朋友可以參考一下2013-11-11JavaScript Promise與async/await作用詳細(xì)講解
Promise是異步編程的一種解決方案:從語法上講,promise是一個(gè)對象,從它可以獲取異步操作的消息;從本意上講,它是承諾,承諾它過一段時(shí)間會給你一個(gè)結(jié)果2023-01-01js判斷兩個(gè)數(shù)組相等的5種方法實(shí)例
再最近的一次實(shí)際項(xiàng)目開發(fā)中,又遇到了需要對兩個(gè)數(shù)組內(nèi)容進(jìn)行比較的需求,索性整理下,這篇文章主要給大家介紹了關(guān)于js判斷兩個(gè)數(shù)組相等的5種方法,需要的朋友可以參考下2022-05-05