判断登录界面的账号密码是否为空的时候又不想用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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                 <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>

display的none与block（判断登录界面的账号密码是否为空）的更多相关文章

  1. 12.04 ubuntu 进入登录界面，账号密码确定是正确的但是进不来系统。

    很简单,HOME目录存储太多东西了,导致开机不了.

  2. Ubuntu系统---Ubuntu16.04进不了界面（登录界面循环，密码正确）（一体化安装（CUDA +NVIDIA驱动）+ cuDNN）

                                                 Ubuntu16.04进不了界面(登录界面循环,密码正确)(一体化安装(CUDA +NVIDIA驱动)+ cu ...

  3. winform设计一个登录界面和修改密码的界面-自动切换窗体（问题[已解] 望一起讨论）(技术改变世界-cnblog)

    http://www.cnblogs.com/IAmBetter/archive/2012/01/14/2322156.html winform设计一个登录界面和修改密码的界面-自动切换窗体(问题[已 ...

  4. c#登录时保存账号密码到cookie

    登陆界面有用户名.密码输入框,一个’记住账号密码‘的复选框. 1.登录时,勾选‘记住账号密码‘复选框,则会把用户名密码保存在客户端cookie里,保存时间为最大值(直到用户清除浏览器缓存或者取消勾选’ ...

  5. 修改官方发行openstack镜像的cloud-init登录方式为账号密码登录

    openstack使用的镜像多为qcow2格式,各个发行商也开源了针对openstack制作的镜像.但是这些镜像的登录方式都是注入用户名和密码的方式,就是说不能够直接通过账号和密码登录.那么如何将一个 ...

  6. js表单提交，判断文本框，用户名密码是否为空，JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

  7. svn查看登录过的账号密码

    直接下载:http://www.leapbeyond.com/ric/TSvnPD/

  8. PYQT5登录界面跳转主界面方法

    该问题,有很多种方法,但是很多方法要么这个有问题,要么那个有问题,最后终于找到一种没问题的方法.记录一下: 参考地址:https://www.jianshu.com/p/d18ff36a78d6?fr ...

  9. 完美解决PYQT5登录界面跳转主界面方法

    该问题,有很多种方法,但是很多方法要么这个有问题,要么那个有问题,最后终于找到一种没问题的方法.记录一下: Login.py(登录窗口)文件 import sys from PyQt5 import ...

随机推荐

  1. php中__clone() shallow copy 只是浅复制

    什么是浅复制呢? 简单一点,就是说复制一个对象的时候,如果对象$Obj的一个属性的类型是引用类型的,比如 $person这个属性,指向的是一个 叫做 $objPerson的一个引用, 那么复制$Obj ...

  2. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. openstack controller ha测试环境搭建记录（七）——配置glance

    在所有集群安装glance软件:yum install -y openstack-glance python-glanceclient 在任一节点创建glance用户:mysql -u root -p ...

  4. Unity3d之协程自实现测试

    using UnityEngine; using System.Collections; public class TestStartCoroutine : MonoBehaviour { IEnum ...

  5. tableView等滚动视图滚动时收缩上下导航栏与标签栏

    代码如下,今天有点忙,不想细说了,看不明白可以联系我 // // LQXViewController.m // LQXCallBackBar // // Created by 刘祺旭 on 15/4/ ...

  6. STM8的GPIO驱动

    芯片的外设一般按照这么几个流程来进行,GPIO,外部中断,定时器,串口,ADC,IIC,SPI,下面我就按照各个模式来写 首先是GPIO,STM8的GPIO拥有复用功能,这句话告诉我们必然需要配置IO ...

  7. SQL Server 2012 - 数据表的操作

     unicode:双字节编码      variable:可变的    character:字符 T-SQL:  Transact Structured Query Language unique:唯 ...

  8. [MySQL]mysql指定路径启动

    /usr/sbin/mysqld --defaults-file=/etc/mysql/my.cnf --basedir=/usr --datadir=/var/lib/mysql --pid-fil ...

  9. 移位操作<< >> 小计

    最近看代码移位操作的使用比较多,通过查阅资料搞明白了之前一直不明白的一个问题 移位效果: 左移位<<: 相当于乘以  2的左移位的相应次方   例如: x << 3    =& ...

  10. XP Mode 虛擬機器 for Windows 7

    免驗證官方直接下載 官網 Download Windows Virtual PC XP Mode for Windows 7 性質 Windows 7 免費 / en 多國 繁體中文(Traditio ...