对于有很多填写项目的表单,我们可能更希望在用户没有填写时或填写出错时,就即时显示提示,而不是等到提交时才进行验证。
结合js的onblur事件和style.display属性可以实现此功能。
html代码:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Register</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{margin:0;padding: 0;}
.login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
.login legend{font-weight: bold;color: green;text-align: center;}
.login label{display:inline-block;width:130px;text-align: right;}
.btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
input{height: 20px;width: 170px;}
.borderRed{border: 2px solid red;}
img{display: none;}
</style>
</head>
<body>
<div class="login">
<form name="form" method="post" action="register.php" >
<p><label for="name">UserName: </label>
<input type="text" id="name" >
<p id="titleNull" style="display:none;"><font style="color:red;">不可为空</font></p>
</form>
</div>
</body>
</html>
js控制代码:
<script type="text/javascript">
function hasClass(obj,cls){ // 判断obj是否有此class
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj,cls){ //给 obj添加class
if(!this.hasClass(obj,cls)){
obj.className += " "+cls;
}
}
function removeClass(obj,cls){ //移除obj对应的class
if(hasClass(obj,cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg," ");
}
}
function checkName(name){ //验证name
if(name != ""){ //不为空则正确
removeClass(ele.name,"borderRed"); //移除class,使原来的红色边框变为正常颜色
document.getElementById("titleNull").style.display = "none"; //不显示提示信息
return true;
}else{ //若为空
addClass(ele.name,"borderRed"); //添加class,使输入框变红
document.getElementById("titleNull").style.display = ""; //显示提示信息
return false;
}
}
var ele = {
name: document.getElementById("name")
};
ele.name.onblur = function(){ //name失去焦点则检测
checkName(ele.name.value);
}
</script>
当不填写内容,鼠标离开输入框时,onblur事件被触发,即显示提示文字和对应的输入框边框颜色变为红色:
填入内容后则提示消失: