jQuery事件冒泡#change(fn)事件结合应用案例--校验用户名是否存在

最新推荐文章于 2024-04-28 15:04:45 发布

CRUD_CODER_LIN

最新推荐文章于 2024-04-28 15:04:45 发布

阅读量2.7k

点赞数

分类专栏： JavaSE&JavaWeb

本文链接：https://blog.csdn.net/LINHONG_1994/article/details/99319148

版权

JavaSE&JavaWeb 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

事件冒泡即当触发内部节点元素时，同时会触发外部与之关联的节点事件。取消事件冒泡：return false;
blur(fn):blur()与change()区别：
（1）blur(fn):失去焦点，触发每一个匹配元素的blur事件；
（2）change(fn):文本改变且失去焦点，触发每个匹配元素的change事件。

应用场景：

在一个用户注册页面，当输入一个用户名时，如果已经存在，则在失去焦点时提示“用户名已存在，请重新输入!”，不存在，则失去焦点时提示“用户名可用!”

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){
		    /* $("#username").blur(function(){ */
			 $("#username").change(function(){ 
				var uname=$(this).val();
				if("林大侠" == uname){
					/* alert("用户名已存在，请重新输入"); */
					$("#unameMsg").html("用户名已存在，请重新输入!").css("color","red");
					return false;
				}else{
					$("#unameMsg").html("用户名可用!").css("color","green");	
				}			
			});
		});
</script>
</head>
<body>
<div align="center">
<h3>用户注册</h3>
	<form action="">
			用户名:<input type="text" name="username" id="username">
			<span id="unameMsg"></span>
			<br/><br/>
			密&emsp;码:<input type="password" name="password" id="password">	
	</form>
	<br/>
</div>
</body>
</html>