详解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 相关文章推荐
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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
天津市收音机工业发展史
2021/03/04 无线电
解析左右值无限分类的实现算法
2013/06/20 PHP
php二维数组转成字符串示例
2014/02/17 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
介绍Java的内部类
2012/10/27 面试题
JAVA软件工程师测试题
2014/07/25 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
幼儿园五一活动方案
2014/02/07 职场文书
求职简历自我评价2015
2015/03/10 职场文书
教师学习心得体会范文
2016/01/21 职场文书
《打电话》教学反思
2016/02/22 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
GPU服务器的多用户配置方法
2022/07/07 Servers