テキストボックスのイベント適用(メールアドレス検証を含む)4-9
2700 ワード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<style type="text/css">
body{font-size:13px}
.divInit{width:390px;height:55px;line-height:55px;padding-left:20px}
.txtInit{border:#666 1px solid;padding:3px;background-image:url('../Images/005.gif')}
.spnInit{width:179px;height:40px;line-height:40px;float:right;margin-top:8px;padding-left:10px;background-repeat:no-repeat}
.divBlur{background-color:#FEEEC2}
.txtBlur{border:#666 1px solid;padding:3px;background-image:url('../Images/002.gif')}
.spnBlur{background-image:url{'../Images/003.gif'}}
.divFocu{background-color:#EDFFD5}
.spnSucc{background-image:url('../Images/004.gif');margin-top:20px}
</style>
<script type="text/javascript">
$(function(){
$("#txtEmail").trigger("focus");
$("#txtEmail").focus(function(){
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divBlur").addClass("divFocu");
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").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("");
}
}
});
})
function chkEmail(strEmail){
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)){
return false;
}
return true;
}
</script>
</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>