标签：
HTML：
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
font-family: "微软雅黑", "arial", " sans-serif";
font-size: 16px;
}
body {
margin: 20px;
}
/*下面三个是元素初始样式*/
.divInit {
width: 480px;
height: 46px;
line-height: 46px;
padding-left: 20px;
border: 1px blue solid;
}
/*input输入框*/
.txtInit {
border: #666 solid;
padding: 3px;
background: #ccc;
}
.spnInit {
width: 179x;
height: 36px;
line-height: 36px;
float: right;
margin-top: 4px;
padding-left: 40px;
background-repeat: no-repeat;
/*border: 1px red solid;*/
color: red;
}
/*元素丢失焦点样式*/
.divBlur {
background-color: #FEEEC2;
}
.txtBlur {
border: #666 solid;
padding: 3px;
background-image: url(img/input2.png);
}
.spnBlur {
background-image: url(img/wrong.png);
}
/*div获取焦点时样式*/
.divFocu {
background-color: #EDFFD5;
}
/*span验证成功时span样式*/
.spnSucc {
background-image: url(img/ok.png);
/*margin-top: 20px;*/
}
</style>
<script type="text/javascript" src="js/jquery-2.2.2.min.js">
</script>
<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 (!checkEmail(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 checkEmail(str) { var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ if (re.test(str)) { alert("正确"); } else { alert("错误"); } } }); </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> <button style="margin: 50px;">验证按钮</button></form></body></html>
标签：
原文地址：http://www.cnblogs.com/theWayToAce/p/5499397.html
