详解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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
js实现数组转换成json
Jun 26 Javascript
js获取图片宽高的方法
Nov 25 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
JS验证字符串功能
Feb 22 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
javascript实现放大镜功能
Dec 09 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
php中文验证码实现示例分享
2014/01/12 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python的id()函数解密过程
2012/12/25 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
python能做哪方面的工作
2020/06/15 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
银行爱岗敬业演讲稿
2014/05/05 职场文书
环保建议书200字
2014/05/14 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python