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


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

 

展开阅读全文
©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读