js 判断登录界面的账号密码是否为空


Posted in Javascript onFebruary 08, 2017

判断登录界面的账号密码是否为空的时候又不想用alert显示就需要用display来隐藏alert啦(在设置时切忌要将隐藏的内容写在账号和密码的div中,否则会根据屏幕的分辨率不同而有所变化,这是本人教训)

首先要定义账号、密码和隐藏部分的id,即var x=document.getElementById("id"),包括按钮的id,然后点击登录按钮的时候(btn.onclick=function(){具体的选择隐藏和显示的内容})要写函数进行选择隐藏和显示;在重置按钮的是(btn.onclick=function(){清空的内容,包括登录按钮显示的内容})

具体代码如下:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<title>请登录</title><base target="_blank" /> 
<style>
 body{
 margin:0px auto;
 background-image: url(images/dlbj1.png) ;
 position: relative;
 }
 .dl{
 width: 380px ;
 height: 220px ;
 background-image: url(images/dl.png) ;
 text-align: center ;
 margin: auto ;
 margin-top: 15% ; 
 position: center; 
 } 
 .btn{
 font-family : 微软雅黑 ;
 font-size: medium ;
 }
 #username{
 max-width: 200px ;
 margin: 10px 0px 0px 0px ;
 height: 28px ;
 }
 #us{
 color: #FFFFFF ;
 font-family : 微软雅黑;
 }
 #ps{
 color: #FFFFFF ;
 font-family : 微软雅黑;
 }
 #password{
 max-width: 200px ; 
 margin: 20px 0px 10px 0px ;
 height: 28px ;
 }
</style>
</head>
<body>
 <form class="dl" method="post">
 <div class="dlsy">
 <br/><br/><br/>
 <div class="username">
 账号:<input type="text" id="username"/><span id="u" style="display: none;color: red;font-size:13px;">*请输入账号!</span>
 </div>
 <div class="password">
 密码:<input type="password" id="password"/><span id="p" style="display: none;color: red;font-size:13px;">*请输入密码!</span>
 </div>
 <div class="empty">
 <span id="up" style="display: none;color: red;font-size:13px;">*账号或密码错误</span>
 </div>
 <div class="btn">
 <button type="button" id="reset" class="btn btn-default button-rounded button-small">重置</button>            
 <button type="button" id="submit" class="btn btn-default button-rounded button-small">登录</button>
 </div>
 </div>
 </form> 

 <script type="text/javascript">
 var x=document.getElementById("username");
 var y=document.getElementById("password");
 var btnSubmit = document.getElementById("submit");
 var btnReset = document.getElementById("reset");
 var u=document.getElementById("u");
 var p=document.getElementById("p");
 var up=document.getElementById("up");
 //点击登录按钮时判断账号、密码是否为空或错误
 btnSubmit.onclick=function(form){
 if(x.value==""){
  if(y.value==""){
  up.style.display="block";
  }
  else{
  u.style.display="block";
  up.style.display="none";
  }
  }
 else if(y.value==""){
  if(x.value==""){
  up.style.display="block";
  }
  else{
  p.style.display="block";
  up.style.display="none";
  }
 }
 else{
  u.style.display="none";
  up.style.display="block";
  p.style.display="none";
 }
 }
 //点击重置按钮时清空账号密码
 btnReset.onclick=function(form){
  x.value=""; //清空input里的value
 y.value="";
 u.style.display="none";
 up.style.display="none";
  p.style.display="none";
 } 
 /*btn.onclick=function(form){
 /*if (x!="admin"||y!=123456){
 alert('账号或密码错误!');
 }
 //判断账号密码是否为空则弹出
 if (""==x) {
 alert("请输入账号!");
 flag=false;
 return false; 
 }
 else if(""==y){
 alert("请输入密码!");
 flag=false;
 return false;
 }
 if(flag==true){
 flag=true;
 }*/
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 #Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 #Javascript
Bootstrap模态窗口源码解析
Feb 08 #Javascript
Bootstrap路径导航与分页学习使用
Feb 08 #Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 #Javascript
Bootstrap导航条学习使用(二)
Feb 08 #Javascript
jquery对象与DOM对象转化
Feb 08 #Javascript
You might like
php正则
2006/07/07 PHP
PHP积分兑换接口实例
2015/02/09 PHP
Laravel实现表单提交
2017/05/07 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python中模块string.py详解
2017/03/12 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python 中xpath爬虫实例详解
2019/08/26 Python
python 元组和列表的区别
2020/12/30 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
学生实习推荐信范文
2013/11/26 职场文书
中英文求职信范文
2014/01/27 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
农村党支部承诺书
2015/04/30 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android