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

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

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;}

用户名：

密　码：

登录

window.onload = function() {

addBlur($('user')); // 检测id为user的元素失去焦点后，value值是否为空

addBlur($('pass')); // 检测id为pass的元素失去焦点后，value值是否为空

};

function $(obj) { // 根据id获取指定元素

return document.getElementById(obj);

}

function addBlur(obj) { // 为指定元素添加失去焦点事件

obj.onblur = function() {

isEmpty(this);

};

}

function isEmpty(obj) { // 检测表单是否为空

if (obj.value === '') {

$('tips').style.display = 'block';

$('tips').innerHTML = '注意：输入内容不能为空! ';

} else {

$('tips').style.display = 'none';

}

}