javascript事件处理--实例onblur

来源：互联网发布：知之为知之中知的意思编辑：程序博客网时间：2024/06/05 07:45

.html代码如下：

<html><head><title>表单验证</title></head><style type="text/css">*{font-size:10pt}#data{margin:0 auto;width:400px;height:300px}.mess{height:8px;text-align:center;color:red;font-weight:bold;display:none;}</style><script type="text/javascript">function checkUserName(){var obj = document.getElementById('userName');var obj1 = document.getElementById('showUserMess');if(obj.value == ""){obj1.style.display="block";}else if(obj.value.length <= 6){obj1.innerText = "用户名太短！！";obj1.style.display = "block";}else{obj1.style.display = "none";}}</script><body><div id="data"><form name="myForm"><table><tr><td>用户名:</td><td><input type="text" id="userName"<span style="color:#ff0000;"> onblur="checkUserName()"</span>/></td></tr><tr><td colspan="2" class="mess" id="showUserMess">用户名不能为空！！</td></tr><tr><td>密码：</td><td><input type="password" id="pwd"/></td></tr><tr><td colspan="2" class="mess">密码不能为空！！</td></tr><tr><td><input type="submit" value="确定"/></td><td><input type="reset" value="取消"/></td></tr></table></form></div></body></html>

显示效果如下：

0 0