Jquery中表单事件

最新推荐文章于 2024-04-04 00:19:46 发布

Uno2

最新推荐文章于 2024-04-04 00:19:46 发布

阅读量533

点赞数

分类专栏： Jquery学习

本文链接：https://blog.csdn.net/Raynaing/article/details/51287972

版权

Jquery学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.focusin {
				background-color: green;
				font-weight: bold;
			}
		</style>
		<script src="js/jquery-1.12.1.js"></script>
		<script>
			$(function() {
				//获得焦点触发
				$("input[name='name']").on("focus", function() {
					$(this).addClass("focusin");
				});
				//失去焦点触发
				$("input[name='name']").on("blur", function() {
					$(this).removeClass("focusin");
				});
				//失去焦点并且内容发生变化时触发
				$("input[name='name']").on("change", function() {
					$("#show").text($(this).val());
				});
				//表单验证
				$("form").on("submit", function() {
					var name=$("input[name='name']").val();
					var sex = $("select[name='sex']").val();
					if ((name == "") || (sex == "请选择性别")) {
						alert("检查表单");
						return false;
					} else {
						return true;
					}
				});
			})
		</script>
	</head>

	<body>
		<div id="show">显示信息</div>
		<form action="#">
			name:
			<input name="name" type="text">
			<br /> sex:
			<select name="sex">
				<option selected="selected">
					请选择性别
				</option>
				<option>男</option>
				<option>女</option>
			</select>
			<input type="submit" value="提交">
		</form>
	</body>

</html>