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中获取选中对象的类型
Apr 02 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
浅谈Redux中间件的实践
Jul 27 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开发中常用的字符串操作函数
2011/02/08 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
使用pandas读取文件的实现
2019/07/31 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
物流专员岗位职责
2014/02/17 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
党员自评材料范文
2014/12/17 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis