2019年04月29日15:48:22作者：w冰淇淋

详细JS实现系统登录页面的登录和验证

更新时间：2019年4月29日15:48:22 作者：w冰淇淋

本文主要介绍JS实现系统登录页面的登录和验证。文章中对示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考和学习价值。有需要的朋友可以关注下方小编。一起学习吧

本文使用JS展示表单登录、验证和键盘监控。有两种方式用javascript实现用户登录验证的代码.，一种是不经过用户验证直接登录，另一种是账号密码匹配后才登录。

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

//验证表单是否为空，若为空则将焦点聚焦在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,// 获取自己系统后台用户信息接口
    data :{"password":password,"accountName":accountName},
    type : "GET",
    dataType: "json",
    success : function(data) {
      if (data){
        if (data.code == "1111") { //判断返回值，这里根据的业务内容可做调整
            setTimeout(function () {//做延时以便显示登录状态值
              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);
}
//监听回车键提交
$(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();//具体处理函数
      return false;
    }
    return true;
  }
});

到这里用javascript实现用户登录验证的代码.，一个完整的登录界面就结束了，我们看看登录失败和成功时的效果：

以上就是小编为大家介绍的JS实现系统登录页面登录验证的详细讲解和集成。我希望它对你有帮助。如有任何问题，请给我留言，小编会及时回复您。非常感谢您对 Scripting House 网站的支持！