您的位置：首页 > 其它

文本框中事件应用(含邮箱地址验证)4-9

2015-12-14 00:00 543 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航