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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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
PHP中常用数组处理方法实例分析
2008/08/30 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python实现的分层随机抽样案例
2020/02/25 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
彩色的翅膀教学反思
2014/04/25 职场文书
团队精神口号
2014/06/06 职场文书
法人代表证明书格式
2014/10/01 职场文书
2014会计年终工作总结
2014/12/20 职场文书
个人德育工作总结
2015/03/05 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
mysql数据库隔离级别详解
2022/06/16 MySQL
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python