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


Posted in Javascript onApril 29, 2019

这篇文章用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实现系统登录页的登录和验证

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

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

Javascript 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
实例详解vue中的$root和$parent
Apr 29 #Javascript
微信网页登录逻辑与实现方法
Apr 29 #Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 #Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 #Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 #Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 #Javascript
微信小程序-form表单提交代码实例
Apr 29 #Javascript
You might like
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
JavaScript静态的动态
2006/09/18 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
高三自我鉴定范文
2013/10/19 职场文书
自我评价是什么
2014/01/04 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
小学校园活动策划
2014/01/30 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
加入学生会演讲稿
2014/04/24 职场文书
大学生求职计划书
2014/04/30 职场文书
2016新年问候语大全
2015/11/11 职场文书
用Python实现Newton插值法
2021/04/17 Python
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python