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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
详解Vue项目中实现锚点定位
Apr 24 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
TS 类型兼容教程示例详解
Sep 23 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
网络资源
2006/10/09 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php英文单词统计器
2016/06/23 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
jquery cookie的用法总结
2013/11/18 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Django REST framework内置路由用法
2019/07/26 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
中学生学习生活的自我评价
2013/10/26 职场文书
励志演讲稿大全
2014/08/21 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript