判断登录界面的账号密码是否为空的时候又不想用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. centos7中yum安装ntfs-3g

    CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行. 1 ...

  2. [Programming WCF Services]Chapter 1. WCF Essentials - EndPoint

    1.配置文件方式设置EndPoint(ABC) 1.1.基本配置 <system.serviceModel> <services> <service name=" ...

  3. H3C inode for OSX 10.10 校园网客户端亲测可用

    1.打开终端 2.输入以下命令 sudo /library/StartupItems/iNodeAuthService/iNodeAuthService start 3.输入管理密码 4.打开客户端联 ...

  4. [Unity c#]c#中的反射

    什么是反射 在.NET中的反射也可以实现从对象的外部来了解对象(或程序集)内部结构的功能,哪怕你不知道这个对象(或程序集)是个什么东西,另外.NET中的反射还可以运态创建出对象并执行它其中的方法. 反 ...

  5. HDU 5651 xiaoxin juju needs help

    组合数杨辉三角打表,这样避免了除法求逆元. #include<cstdio> #include<cstring> #include<cmath> #include& ...

  6. 微信小程序一些简单的快捷键

    常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选 ...

  7. 如何使用UDP进行跨网段广播（转）

    源:如何使用UDP进行跨网段广播 广播域首先我们来了解一下广播域的概念.广播域是网络中能接收任一台主机发出的广播帧的所有主机集合.也就是说,如果广播域内的其中一台主机发出一个广播帧,同一广播域内所有的 ...

  8. 《算法导论》插入排序----InsertSort

    算法导论,插入排序 public class InsertSort { public static double [] sort(double [] num) { for(int i =1; i< ...

  9. 思迅/泰格/科脉/收银软件/商超软件数据库修复解决断电造成损坏的mdb\dat文件SQL数据库 置疑 修复 恢复

    拥有专业管理软件数据库修复技术工程师,专业提供管家婆.美萍.思迅.科脉等管理软件技术服务,电脑维修\重装系统技 术服务.无法登陆打不开等出错问题处理(连接失败,请输入正确的服务器名,SQL Serve ...

  10. Django 设置cookies与获取cookies.

    在Django里面,使用Cookie和Session看起来好像是一样的,使用的方式都是request.COOKIES[XXX]和request.session[XXX],其中XXX是您想要取得的东西的 ...