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 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP查询网站的PR值
2013/10/30 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python下载图片实现方法(超简单)
2017/07/21 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
wxPython实现整点报时
2019/11/18 Python
资产评估专业大学生求职信
2013/09/29 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
家装业务员岗位职责
2015/04/03 职场文书
员工离职证明范本
2015/06/12 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技