QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 表单代码 > jQuery仿百度登录框表单验证代码

原创商用 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天

知道了
9彩注册 www.055800.com-福利彩刷流水是什么| www.51448.com-中国福彩12选5| www.705616.com-麒麟彩票骗局手机版| www.13sv.cc-体彩投注站编号查询| www.581189.com-幸运分分彩官方开奖| www.2sf.cc-百hk彩网-| www.93qm.com-中国第一张彩照机| www.669493.com-彩钢琉璃瓦生产线| www.199093.com-河北快三今天预测| www.579058.com-日本彩票开奖号码| www.830325.com-国家彩票害人| www.937547.com-9851彩票-| www.998880.com-美国洛杉矶国际快三| www.ch85.com-炫乐彩票app下载| www.101747.com-红彩网安卓版下载| www.188049.com-北京快三开奖结果查| www.267922.com-快三宝典下载手机版| www.358874.com-中国4d彩票-| www.444105.com-福彩中心判刑| www.532679.com-有关彩虹的唯美句子| www.94iq.com-易彩堂的邀请码是| www.52100.com-黑彩犯法怎么量刑| www.180124.com-北京快三遗漏值| www.985220.com-六会彩开奖结果查绚| www.10fv.com-999彩票网靠谱吗| www.93wb.com-北京基诺彩开奖结果| www.746234.com-彩天下合法吗| www.815680.com-ak彩票骗局全过程| www.912087.com-彩票站买私彩| www.991829.com-七乐彩奖池奖金| www.xc66.cc-河内5分彩开奖结果| www.964053.com-彩票分析师招聘郑州| www.cp467.com-安徽快三投注买网址| www.974.cm-中七星彩去哪里领| www.815572.com-河北省福彩网| www.932907.com-悉尼快三-| 大赢家彩票平台www.907712.com| www.09xe.com-彩8官网下载| www.798535.com-百盈快三助赢软件| www.904960.com-足球彩票app下载| www.981686.com-体育彩票店挣钱吗| www.cd28.com-福彩快三申请做代理| www.503188.com-快三春节开奖吗| www.720873.com-彩票数字之间的规律| www.131261.com-遵义订婚彩礼怎么给| www.393200.com-深圳彩票中心电话| www.1055.top-七星彩开奖现场直| www.428159.com-足彩11转9-| www.1053.vip-速彩娱乐骗局| www.55258.cc-快三全能必中计划| www.120946.com-福建福彩快三玩法| www.158472.com-腾讯高频快彩| www.235826.com-唯彩推荐-| www.612966.com-乐购彩下载-| www.795989.com-廊坊彩票大奖得主| www.872150.com-彩票双色球社区| www.939323.com-快三大小单双怎么压| www.as72.com-福彩有5d吗-| www.yu98.com-山东省体彩兑奖流程| www.43ex.com-彩色水泥瓦-| www.235239.com-7070彩票安装| www.019124.com-利彩5分快3-| www.881579.com-苹果手机博彩app| www.981915.com-彩票三d试机号| www.4645.top-彩票是运气还是技术| www.ef24.com-吉林快三计划图| www.660682.com-阿里彩票手机登录| www.730932.com-足球500胜负彩| www.789842.com-竞彩网混合计算器| www.863052.com-19051期胜负彩| www.970733.com-足球彩票手机新浪网| 99彩票www.528335.com| www.127420.com-日彩网1分快3| www.337089.com-湖北快三分布| www.521365.cc-哪里有彩票计划群| www.661775.com-外围足彩能挣钱吗| www.83ch.com-移动视频彩印| www.329655.com-时彩大平台-| www.552633.com-1号彩票1hcc| www.983282.com-新盈彩平台-| www.zj66.cc-福利彩票幸运号码| www.572444.com-天津时时彩网站| www.055868.com-胜利彩票登录网址| www.222096.com-七星彩推荐一注号码| www.57859.cc-鼎盛彩票网是黑网站| www.834774.com-好彩4味爆珠价格| www.999935.cc-总裁彩民村双色球| www.02eu.com-乐猫彩票安全吗| www.331989.com-分分钟时时彩网站| www.1519.com-中国体育彩网排列五| www.992337.com-310足彩推荐| www.pe83.com-河北快三套选规则| www.393052.com-彩铅画静物图片| www.170336.com-北京快三结果走势图| www.65544.cc-双色球彩票分析大师| www.pd67.com-河北福彩排七走势图| www.313085.com-体彩nba篮球竞猜| www.87547.com-312彩票app-| www.37736.com-七彩剽虫-| www.134179.com-19026期体彩| www.375017.com-搜索七星彩-| www.589978.com-七星彩老鼠精版| www.36547.cc-澳门彩票平台推荐| www.017808.com-一赔1的彩票| www.75295.cc-乐透啦彩票买安全不| www.892426.com-12快乐彩开奘结果| www.9959.loan-河北各地彩礼| www.2599.cc-君乐购彩-| www.416083.com-新版二四六好彩网| www.627619.com-大发彩票什么网址| www.3363.date-北京彩票票面的秘密| www.gr9.com-上海快三走势| www.977705.com-足彩让球胜平负规则| www.320011.com-福彩三d和值走势图| www.48234.com-福彩之家下载安装| www.581727.com-我我要看安徽快三| www.to17.com-大发快三算号神器| www.19pp.com-河南福彩网发行中心| www.138.in-带彩虹歌曲有哪些| www.121127.com-微信彩票群交流群| www.822572.com-彩票追加和倍投| www.9115.mobi-彩民之家香港云坛| www.14416.com-七星彩单式中奖| www.237014.com-360竞彩-| www.253034.cc-好彩3复式玩法| www.486783.com-福彩中彩网3b开奖| www.562197.com-中彩啦软件下载| www.646565.com-生肖彩票49选一| www.og86.com-皇都彩票安卓登录| www.2503.vip-幸运福彩-| www.143753.com-炫彩壁纸-| www.224820.com-河南快三购买技巧| www.331603.com-常笑体彩店合法吗| www.760487.com-西安三彩家怎么样| www.984923.com-体彩大乐透预测软件| www.nn1.cc-湖北福彩-| www.mc92.com-中彩在线注册| www.382706.com-马竞尤文足彩| www.0816.live-互联网彩票重启时间| www.7361.shop-11选5爱彩乐山东| www.123478.cc-福利彩票停售了吗| www.964249.com-310足球竞彩合买| 中国福利彩票www.33588e.com| www.116305.com-彩票分析师赚钱吗| www.862190.com-怎么黑彩票主机| www.745934.com-台湾5分彩开奖记录| www.968528.com-5亿彩app可靠吗| www.hy60.com-彩票组选什么意思| www.245877.com-易彩集团邀请码| www.721773.com-北京福彩3d微信群| www.85vb.com-福利彩票是怎么盈利| www.793863.com-交友博彩骗局| www.934399.com-佳缘彩票托的套路| www.cai172.com-江西快三开奖| www.vz12.com-合肥快三跨度表| www.629936.com-福彩3d赢家-| www.836511.com-福利彩票0304| www.338162.com-唯彩网双色球预测| www.463813.com-体彩什时间开始| www.557757.com-福彩20分钟-| www.647102.com-体彩胜负彩领奖| www.740366.com-类似500彩票| www.821824.com-巨彩分发系统| www.882847.com-高频彩大平台|