詳解JS實現(xiàn)系統(tǒng)登錄頁的登錄和驗證
更新時間:2019年04月29日 15:48:22 作者:w冰淇淋
這篇文章主要介紹了JS實現(xiàn)系統(tǒng)登錄頁的登錄和驗證,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
這篇文章用JS顯示表單的登錄以及驗證和對鍵盤的監(jiā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;} /**錯誤信息提醒**/ .msg{ color: #ea8c37; font-size: 14px; padding-left: 40px; padding-top: 10px; clear: both; font-weight: bold; }
3.JS代碼
//驗證表單是否為空,若為空則將焦點聚焦在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獲取用戶信息并進行驗證,如果賬戶密碼不匹配則登錄失敗,如不需要驗證用戶信息,這段可不寫 $.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 () {//做延時以便顯示登錄狀態(tài)值 showMsg("正在登錄中..."); console.log(data); window.location.href = url;//指向登錄的頁面地址 },100) } else { showMsg(data.message);//顯示登錄失敗的原因 return false; } } }, error : function(data){ showMsg(data.message); } }); } //錯誤信息提醒 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; } });
到這里,一個完整的登錄界面結(jié)束,下面看登錄失敗和成功時的效果:
以上所述是小編給大家介紹的JS實現(xiàn)系統(tǒng)登錄頁的登錄和驗證詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
溫習Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)
javascript是一門簡單的語言,也是一門復(fù)雜的語言。這篇文章主要介紹了溫習Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2016-05-05javascript中的綁定與解綁函數(shù)應(yīng)用示例
本文為大家詳細介紹下javascript中綁定與解綁函數(shù)在Ie及Mozilla中的應(yīng)用,感興趣的各位可以參考下哈,希望對大家有所幫助2013-06-06JavaScript Promise與async/await作用詳細講解
Promise是異步編程的一種解決方案:從語法上講,promise是一個對象,從它可以獲取異步操作的消息;從本意上講,它是承諾,承諾它過一段時間會給你一個結(jié)果2023-01-01