判断登录界面的账号密码是否为空的时候又不想用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. CodeForces 598E Chocolate Bar

    区间DP预处理. dp[i][j][k]表示大小为i*j的巧克力块,切出k块的最小代价. #include<cstdio> #include<cstring> #include ...

  2. OpenStack - liberty CentOS 7

    OpenStack私有云部署 Controller Node:       em1(10.6.17.11),em2() Computer Node:         em1(10.6.17.12),e ...

  3. Sencha Cmd的简介

    Sencha Cmd的简介 ~~~~~~~~~~~~~~~~~~~~~~~ Sencha cmd 是一个跨平台的命令行工具,它从你应用程序的新创建到部署入产品中的整个生命周期都提供了许多自动化的执行任 ...

  4. (中等) HDU 5293 Tree chain problem，树链剖分+树形DP。

    Problem Description   Coco has a tree, whose vertices are conveniently labeled by 1,2,…,n.There are ...

  5. (简单) POJ 3321 Apple Tree，树链剖分+树状数组。

    Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow ...

  6. ID3决策树预测的java实现

    刚才写了ID3决策树的建立,这个是通过决策树来进行预测.这里主要用到的就是XML的遍历解析,比较简单. 关于xml的解析,参考了: http://blog.csdn.net/soszou/articl ...

  7. 为什么jQuery要返回jQuery.fn.init对象

    作者:zccst jQuery = function( selector, context ) { // The jQuery object is actually just the init con ...

  8. 像51一样操作STM32的IO（转）

    源:像51一样操作STM32的IO //-------------------------------------------------------------------------------- ...

  9. uos事件控制块与任务同步

    Ucos为了任务之间的通讯定义了信号量,互斥性信号量,消息对象 消息队列等结构以及api,为了统一的管理这些同步,定义了一个结构叫做时间控制块OS_EVENT,如下 typedef struct os ...

  10. STM32驱动TEA5767收音机模块

    Tea5767是飞利浦公司出的一款集成化的收音机芯片,大四的时候机缘巧合遇到了这个芯片,用了一下,写点资料 主要特性 TEA5767HN是一款低功耗立体声收音IC,广泛应用于手机MP3 .MP 4 播 ...