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

 更新时间:2019年04月29日 15:48:22   作者:w冰淇淋   我要评论
这篇文章主要介绍了JS实现系统登录页的登录和验证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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,// 获取自己系统后台用户信息接口
    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;
  }
});

到这里,一个完整的登录界面结束,下面看登录失败和成功时的效果:

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

相关文章

  • 利用Ext Js生成动态树实例代码

    利用Ext Js生成动态树实例代码

    今天在公司帮同事写了个用Ext Js生成动态树的Demo,在这里分享一下,也好供以后自己查阅。
    2008-09-09
  • Ionic3 UI组件之Gallery Modal详解

    Ionic3 UI组件之Gallery Modal详解

    这篇文章主要为大家详细介绍了Ionic3 UI组件之Gallery Modal的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • javascript强制点击的方法

    javascript强制点击的方法

    这篇文章主要介绍了javascript强制点击的方法,可用于下载站或文档显示站,实现点击后才能出现相应显示的功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript 更严格的相等 [译]

    JavaScript 更严格的相等 [译]

    大部分JavaScript程序员都知道:应该使用严格相等(===)来代替“普通”的相等操作(==).但是,有时候你的确需要一个比严格相等===更严格的运算符,比如说:在你想检查某个值是否是NaN的时候,又或者你想区分-0和+0的时候.本文解释了相关的知识以及ECMAScript.next中的解决办法:“is”操作符
    2012-09-09
  • javascript实现3D切换焦点图

    javascript实现3D切换焦点图

    一款用JavaScript模仿3D立体切换效果的js焦点幻灯片特效,使用方法很简单:用鼠标拖拽图片向左右方向就好~
    2015-10-10
  • 基于JavaScript实现图片点击弹出窗口而不是保存

    基于JavaScript实现图片点击弹出窗口而不是保存

    这篇文章主要介绍了基于JavaScript实现图片点击弹出窗口而不是保存的相关资料,需要的朋友可以参考下
    2016-02-02
  • JS+CSS实现分类动态选择及移动功能效果代码

    JS+CSS实现分类动态选择及移动功能效果代码

    这篇文章主要介绍了JS+CSS实现分类动态选择及移动功能效果代码,涉及JavaScript实现页面元素动态变换效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • javascript基本数据类型和转换

    javascript基本数据类型和转换

    本文主要介绍了javascript的基本数据类型和转换,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • javascript 就地编辑实现代码

    javascript 就地编辑实现代码

    最近正在看《javascript设计模式》,其中有一个'就地编辑'的示例,用来表现不同的继承方式,看完之后想自己凭理解写一个类似的东西。
    2010-05-05
  • 深入理解JavaScript系列(29):设计模式之装饰者模式详解

    深入理解JavaScript系列(29):设计模式之装饰者模式详解

    这篇文章主要介绍了深入理解JavaScript系列(29):设计模式之装饰者模式详解,装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数),需要的朋友可以参考下
    2015-03-03

最新评论