jQuery仿百度登錄框表單驗(yàn)證代碼

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<!--按鈕開始，嫌棄代碼太多可刪除，主要就是a標(biāo)簽的點(diǎn)擊彈窗驗(yàn)證效果-->
<div class="item">
	<div class="logo">
		<img src="statics/images/product-hm.png" alt="網(wǎng)站統(tǒng)計">
	</div>
	<div class="title">網(wǎng)站統(tǒng)計</div>
	<div class="desc">全球最大的中文網(wǎng)站流量分析平臺，為網(wǎng)站的精細(xì)化運(yùn)營決策提供數(shù)據(jù)支持，進(jìn)而有效提高企業(yè)的投資回報率。</div>
	<div class="opts">
		<a href="javascript:;" class="tiyan"><span>立即體驗(yàn)</span><em></em></a>
	</div>
</div>
<!--按鈕結(jié)束-->

<!--彈窗開始-->
<div class="tan">
	<div class="box">
		<div class="form">
			<span class="close">?</span>
			<h3>歡迎來到網(wǎng)站統(tǒng)計</h3>
			<p class="desc">統(tǒng)計/推廣/聯(lián)盟 賬號請在此登錄</p>
			<form action="" onSubmit="return false;">
				<input type="text" name="name" id="name" placeholder="請輸入郵箱地址" />
				<input type="password" name="password" id="passw" placeholder="請輸入密碼" />
				<div class="valicode">
					<input type="text" name="valicode" id="valicode" placeholder="請輸入驗(yàn)證碼" />
					<img src="statics/images/valicode.jpg" />
				</div>
				<div class="error"></div>
				<input type="submit" id="Submit" value="登錄">
			</form>
			<p class="reg">
				<a href="#">立即注冊</a>
				<a href="#">忘記密碼 </a>
			</p>
		</div>
	</div>
</div>
<!--彈窗結(jié)束-->

<script type="text/javascript">
	$(function() {
		//彈窗
		$('.tiyan').click(function() {
			$('.tan').show();
		})
		//關(guān)閉
		$('.close').click(function() {
			$('.tan').hide();
		})
		//觸焦變色
		$("input").focus(function() {
			$(this).removeClass('red');
		});
		//失去焦點(diǎn)驗(yàn)證當(dāng)前表單

		$("#name").blur(function() {

			var emailreg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
			var errtxt = "",
				name = $('#name').val();
			if(name == "") {
				errtxt = "郵箱地址不能為空";
				$('#name').addClass('red');
			} else if((!emailreg.test(name))) {
				errtxt = "請輸入正確郵箱地址";
				$('#name').addClass('red');
			}else{
				errtxt = "";
				$('#name').removeClass('red');
			}
			//錯誤提示消息，有錯誤則顯示，沒錯誤就隱藏
			showmsg(errtxt);
		})
		$("#passw").blur(function() {
			var errtxt = "",
				passw = $('#passw').val();
			if(passw == "") {
				errtxt = "請輸入密碼";
				$('#passw').addClass('red');
			}else{
				errtxt = "";
				$('#passw').removeClass('red');
			}
			//錯誤提示消息，有錯誤則顯示，沒錯誤就隱藏
			showmsg(errtxt);
		})
		$("#valicode").blur(function() {
			var errtxt = "",
				valicode = $('#valicode').val();
			if(valicode == "") {
				errtxt = "請輸入正確的驗(yàn)證碼";
				$('#valicode').addClass('red');
			}else{
				errtxt = "";
				$('#valicode').removeClass('red');
			}
			//錯誤提示消息，有錯誤則顯示，沒錯誤就隱藏
			showmsg(errtxt);
		})
		//驗(yàn)證
		$('#Submit').click(function() {
			var thisid = "",
				errtxt = "";
			$('input').removeClass('red');
			var emailreg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; //郵箱正則
			var name = $('input[name=name]').val(),
				passw = $('input[name=password]').val(),
				valicode = $('input[name=valicode]').val();

			if(name == "") {
				errtxt = "郵箱地址不能為空";
				thisid = "name";
			} else if((!emailreg.test(name))) {
				errtxt = "請輸入正確郵箱地址";
				thisid = "name";
			} else if(passw == "") {
				errtxt = "請輸入密碼";
				thisid = "passw";
			} else if(valicode == "") {
				errtxt = "請輸入正確的驗(yàn)證碼";
				thisid = "valicode";
			} else {

			}
			//錯誤提示消息，有錯誤則顯示，沒錯誤就隱藏
			showmsg(errtxt);
			//錯誤邊框變紅
			thisid ? $('input').removeClass('red').parents('form').find('#' + thisid).focus().addClass('red') : $('#' + thisid).removeClass('red');
		})

		function showmsg(errtxt) {
			errtxt ? $('.error').show().text(errtxt) : $('.error').hide();
		}
	})
</script>