<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>验证用户名和密码是否为空</title>
<style>
body{background:#ddd;}
.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;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>
<script>
function $(id){
return document.getElementById(id);
}
function checkEmpty(obj){
if (obj.value == '') {
$('tips').style.display = 'block';
$('tips').innerHTML = '注意：输入内容不能为空!';
} else {
$('tips').style.display = 'none';
}
}
window.onload = function(){
$('user').onblur = function(){
checkEmpty(this);
}
$('pwd').onblur = function(){
checkEmpty(this);
}
}
</script>
</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="pwd" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">登录</button></p>
</div>
</body>
</html>
