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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
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
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
基于jQuery的自动完成插件
2011/02/03 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
使用pandas read_table读取csv文件的方法
2018/07/04 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
大专护理专业自荐信
2015/03/25 职场文书
庆七一主持词
2015/06/29 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python字典的基础操作
2021/11/01 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
服务器nginx权限被拒绝解决案例
2022/09/23 Servers