验证用户名和密码是否为空

最新推荐文章于 2022-11-19 19:12:58 发布

qq_40891002

最新推荐文章于 2022-11-19 19:12:58 发布

阅读量729

点赞数

分类专栏： js 文章标签： js html css

本文链接：https://blog.csdn.net/qq_40891002/article/details/106295914

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <title>验证用户名和密码是否为空</title>
    <style>
      body{background:red;}
      .box{
		  background:#fff;
		  padding:20px 30px;
		  width:400px;
		  margin: 0 auto;
		  text-align:center; 
		  }
      .btn{
		  width:180px;
		  height:40px;
		  background:#3388ff;
		  border:1px solid black;
		  color:#fff;
		  font-size:14px;
		  }
      .ipt{
		  width:260px;
		  padding:4px 2px;
		  }
      .tips{
		  width:440px;
		  height:30px;
		  margin:5px auto;
		  background:#fff;
		  color:red;
		  border:1px solid #ccc;
		  display:none;
		  line-height:30px;
		  padding-left:20px;
		  font-size:13px;
		  }
    </style>
  </head>
  <body>
    <div id="tips" class="tips"></div>
    <div class="box">
      <p><label>用户名：<input id="user" class="ipt" type="text"></label></p>
      <p><label>密　码：<input id="pass" class="ipt" type="password"></label></p>
      <p><button id="login" class="btn">登录</button></p>
    </div>
    <script>
    window.onload=function(){
		addblur($('user'));
		addblur($('pass'));
	}
	function $(obj){
		return document.getElementById(obj);
	}
	function addblur(obj){
		obj.onblur=function(){
			isempty(obj);
		}
	}
	function isempty(obj){
		if(obj.value===''){
			$('tips').style.display='block';
			$('tips').innerHTML="输入不可以为空哦";
		}
		else{
			$('tips').display='none';
		}
	}
    </script>
  </body>
</html>

这个可以简单回顾一下布局知识，比如这个简单的布局

写js的时候注意参数的传递，其实也简单，写的时候遵循从上到下的写法，需要什么函数就自定义一个函数，一层层的写，刚开始不会，看的别人的，后来自己复写了一下，代码能力有待提升，加油