文本框中的事件应用
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./email-text.js"></script>
<link type="text/css" href="./email-text.css" rel="stylesheet"/>
<title>文本框中的事件应用</title>
</head>
<body>
<form id="form1" action="#">
<div id="email" class="divInit">
邮箱：<span id="spnTip" class="spnInit"></span>
<input id="txtEmail" type="text" class="txtInit" />
</div>
</form>
</body>
</html>
js
$(function(){
$("#txtEmail").trigger("focus");//默认时文本框获取焦点
$("#txtEmail").focus(function(){
//文本框获取焦点事件
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divBlur").addClass("divFocu");
$("#spantip").removeClass("spanBlur").removeClass("spanSucc").html("请输入您常用邮箱地址！ ");
})
$("#txtEmail").blur(function(){
//文本框丢失焦点事件
var vtxt = $("#txtEmail").val();
if(vtxt.length == 0){
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！ ");
}
else{
if(!chkemail(vtxt)){
//检测邮箱格式是否正确
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱格式不正确");
}
else{
//如果正确
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divFocu");
$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
}
}
})
//验证邮箱格式是否正确
//参数staremail，需要验证的邮箱
function chkemail(staremail){
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(staremail)){
return false;
}
else{
return true;
}
}
})
css
body{
font-size: 13px;
}
/* 元素初始状态样式 */
.divInit{
width: 390px;
height: 55px;
line-height: 55px;
padding-left: 20px;
}
.txtInit{
border: #666666 1px solid;
padding: 3px;
background-color: #CCCCCC;
}
.spnInit{
width: 179px;
height: 40px;
line-height: 40px;
float: left;
margin-top: 8px;
padding-left: 10px;
background-repeat: no-repeat;
}
/* 元素丢失焦点样式 */
.divBlur{
background-color: #FEEEC2;
}
.txtBlur{
border: #666666 1px solid;
padding: 3px;
background-color: #FEEEC2;
}
.spnBlur{
background-color: #EDFFD5;
}
/* div获取焦点样式 */
.divFocu{
background-color: #EDFFD5;
}
.spnSucc{
background-color: aquamarine;
margin-top: 20px;
}
/* 验证成功时span样式 */
想法
如果触发事件，其中的区别操作是：删除一个class样式，加上一个class样式