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

2019独角兽企业重金招聘Python工程师标准>>>
<!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>
转载于:https://my.oschina.net/u/2552902/blog/543876
文本框中事件应用(含邮箱地址验证)4-9

猜你喜欢
