javascript事件处理--实例onblur

最新推荐文章于 2024-06-29 11:18:05 发布

yayun0516

最新推荐文章于 2024-06-29 11:18:05 发布

阅读量2.3k

点赞数

分类专栏： javaScript 文章标签： html javascript onblur

本文链接：https://blog.csdn.net/yayun0516/article/details/41643229

版权

javaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

.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;"> οnblur="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>

显示效果如下：