判断登录界面的账号密码是否为空的时候又不想用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. DMLC深度机器学习框架MXNet的编译安装

    这篇文章将介绍MXNet的编译安装. MXNet的编译安装分为两步: 首先,从C++源码编译共享库(libmxnet.so for linux,libmxnet.dylib for osx,libmx ...

  2. 关于集合set ---STL

    关于集合set的去重复,向集合中插入元素 #include<iostream>#include<set>using namespace std;int main(){ set& ...

  3. java war 打包、解压命令（转载）

    经常将工程打包成war包,打包如下: // 将当前目录打包成war包 jar   cvf   temp.war   */  . 命令格式: java cvf 打包文件名称 要打包的目录 打包文件保存路 ...

  4. (简单) POJ 3468 A Simple Problem with Integers , 线段树+区间更新。

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  5. Android L（5.0）源码之图形与图像处理之简单图片——Bitmap

    最近在研究android 5.0的gallery模块,学习了相关的知识点,准备写点博客总结一下,有时间了会补充完整

  6. [转]Go语言(golang)开源项目大全

    内容目录 Astronomy 构建工具 缓存 云计算 命令行选项解析器 命令行工具 压缩 配置文件解析器 控制台用户界面 加密 数据处理 数据结构 数据库和存储 开发工具 分布式/网格计算 文档 编辑 ...

  7. TFS2013 升级至TFS2015及项目的创建

    TFS2015已发布想体验下新特性 由于现有数据库已经是SQLSERVER2012 SP1 开发工具VS2013 都符合升级要求 现在体验下吧 1.先下载TFS2015 运行安装向导一路NEXT 直至 ...

  8. PHP下的命令行执行

    PHP 的命令行模式 以下是 PHP 二进制文件(即 php.exe 程序)提供的命令行模式的选项参数,您随时可以通过 PHP -h 命令来查询这些参数. Usage: php [options] [ ...

  9. Nodejs中Mongodb使用

    Mongodb使用 打开解压后的Mongodb文件夹,新建data.logs文件夹,并在logs文件夹中新建mongodb.log文档. 添加后Mongod文件夹示意图: 用cmd命令行启动Mongo ...

  10. WPF中ContextMenu通过CommandParameter传参

    场景:ListBox中有个ContextMenu,希望点击其中一个菜单项的时候把ListBox当做CommandParameter传递给Command,但是发现无论是通过ElementName还是Re ...