QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 表單代碼 > jQuery仿百度登錄框表單驗證代碼

广西快乐十分开奖分布图: VIP商用 jQuery仿百度登錄框表單驗證代碼

jQuery登錄表單制作百度統計點擊按鈕彈窗登錄框,郵箱和密碼,驗證碼表單驗證效果代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

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標簽的點擊彈窗驗證效果-->
<div class="item">
	<div class="logo">
		<img src="statics/images/product-hm.png" alt="網站統計">
	</div>
	<div class="title">網站統計</div>
	<div class="desc">全球最大的中文網站流量分析平臺,為網站的精細化運營決策提供數據支持,進而有效提高企業的投資回報率。</div>
	<div class="opts">
		<a href="javascript:;" class="tiyan"><span>立即體驗</span><em></em></a>
	</div>
</div>
<!--按鈕結束-->

<!--彈窗開始-->
<div class="tan">
	<div class="box">
		<div class="form">
			<span class="close">?</span>
			<h3>歡迎來到網站統計</h3>
			<p class="desc">統計/推廣/聯盟 賬號請在此登錄</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="請輸入驗證碼" />
					<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>
<!--彈窗結束-->

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

		$("#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 = "請輸入正確的驗證碼";
				$('#valicode').addClass('red');
			}else{
				errtxt = "";
				$('#valicode').removeClass('red');
			}
			//錯誤提示消息,有錯誤則顯示,沒錯誤就隱藏
			showmsg(errtxt);
		})
		//驗證
		$('#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 = "請輸入正確的驗證碼";
				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>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了