html登录实现原理,详解JS实现系统登录页的登录和验证

这篇文章用JS显示表单的登录以及验证和对键盘的监听&＃xff0c;这里有两种方法&＃xff0c;一种是无需用户验证直接登录&＃xff0c;一种是需要账户密码匹配才可登录。

1. html代码

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代码

//验证表单是否为空&＃xff0c;若为空则将焦点聚焦在input表单上&＃xff0c;否则表单通过&＃xff0c;登录成功

function check(form){

var accountName &＃61; $("#accountName"),$password &＃61; $("#password");

var accountName &＃61; accountName.val(),password &＃61; $password.val();

if(!accountName || accountName &＃61;&＃61; ""){

showMsg("请输入用户名");

form.accountName.focus ();

return false;

}

if(!password || password &＃61;&＃61; ""){

showMsg("请输入密码");

form.password.focus ();

return false;

}

//这里为用ajax获取用户信息并进行验证&＃xff0c;如果账户密码不匹配则登录失败&＃xff0c;如不需要验证用户信息&＃xff0c;这段可不写

$.ajax({

url : systemURL,// 获取自己系统后台用户信息接口

data :{"password":password,"accountName":accountName},

type : "GET",

dataType: "json",

success : function(data) {

if (data){

if (data.code &＃61;&＃61; "1111") { //判断返回值&＃xff0c;这里根据的业务内容可做调整

setTimeout(function () {//做延时以便显示登录状态值

showMsg("正在登录中...");

console.log(data);

window.location.href &＃61; url;//指向登录的页面地址

},100)

} else {

showMsg(data.message);//显示登录失败的原因

return false;

}

}

},

error : function(data){

showMsg(data.message);

}

});

}

//错误信息提醒

function showMsg(msg){

$("#CheckMsg").text(msg);

}

//监听回车键提交

$(function(){

document.οnkeydοwn&＃61;keyDownSearch;

function keyDownSearch(e) {

// 兼容FF和IE和Opera

var theEvent &＃61; e || window.event;

var code &＃61; theEvent.keyCode || theEvent.which || theEvent.charCode;

if (code &＃61;&＃61; 13) {

$(&＃39;#submit&＃39;).click();//具体处理函数

return false;

}

return true;

}

});

到这里&＃xff0c;一个完整的登录界面结束&＃xff0c;下面看登录失败和成功时的效果&＃xff1a;

以上所述是小编给大家介绍的JS实现系统登录页的登录和验证详解整合&＃xff0c;希望对大家有所帮助&＃xff0c;如果大家有任何疑问请给我留言&＃xff0c;小编会及时回复大家的。在此也非常感谢大家对网站的支持&＃xff01;