<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单事件</title>
<style>
.me{
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -75;
width: 400px;
height: 100px;
background-color: #ccc;
overflow: auto;
padding: 10px;
}
input[type='text'], select{width: 200px;}
#tips{color: red;}
.focusin{
background-color: lightgreen;
font-weight: bold;
}
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript">
//页面加载完成简写形式
$(function(){
//输入框获得焦点 改变其背景色和字体
$("input[name='name']").on("focus",function(){
$(this).addClass("focusin");
});
//失去焦点时候 还原背景色和字体-删除添加的CSS类
$("input[name='name']").on("blur",function(){
$(this).removeClass("focusin");
});
//文本改变时显示在页面上
$("input[name='name']").on("change",function(){
$("#tips").text("姓名:"+$(this).val());
});
//性别选择改变时显示在页面上
$("select[name='sex']").on("change",function(){
$("#tips").text("性别:"+$(this).val());
});
//表单提交前检查
$("form").on("submit",function(){
var name = $("input[name='name']").val();
var sex = $("select[name='sex']").val();
if(name!=""&&sex!="请选择")
{
return true;
}
else
{
alert("表单验证不通过！");
return false;
}
});
})
</script>
</head>
<body>
<div class="me">
表单测试事件
<div id="tips">这里显示提示信息</div>
<form action="#" method="post">
姓名:<input type="text" name="name" /><br>
性别:<select name="sex">
<option selected="selected">请选择</option>
<option>男</option>
<option>女</option>
</select>
<input type="submit" value="提交表单" />
</form>
</div>
</body>
</html>
