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天

知道了
58福彩 www.872426.com-都匀市福彩中心| www.499967.com-平台计划师带你玩彩| www.634232.com-七彩坊加盟-| www.992476.com-310足彩任九奖金| www.qr75.com-公益福彩怎么下载| www.1741.vip-彩鸿彩票合法吗| www.421455.com-七星彩直码透露信息| www.669078.com-彩色混凝土施工做法| www.dj71.cc-福利彩票玩法及规则| www.im24.com-体彩竞彩加微信| www.9tl.com-新浪微博怎么买彩票| www.6136.vip-256买彩安卓版| www.108230.com-万豪彩票没有苹果版| www.66238.com-福彩自助投注机| www.485901.com-福彩快三出球号顺序| www.597690.com-海南七星彩精彩论坛| www.693796.com-福建福利彩票网址| www.778991.com-河北体彩昨日走势图| www.856705.com-10分快三计划预测| www.934782.com-亚博彩票手机版| www.987506.com-彩票追号投注计算器| www.sv1.com-彩种计划-| www.377995.cc-甘肃遏制高价彩礼| www.wj59.com-连中彩票手机版| www.69rt.com-男主彩票中奖小说| www.0288.top-体彩彩票店业主投诉| www.07ub.com-七星彩完结番外| www.cai455.com-快三助手下载安装| www.276985.com-美容彩妆店加盟| www.874747.com-亚慱彩票app| www.518864.com-买彩票输花了一个亿| www.043776.com-中国福利彩票乐透型| www.026097.com-淘宝能买彩票了吗| www.137496.com-中国足彩网竞彩足球| www.ex13.com-123彩票网站大全| www.9089.biz-福彩双色球兑奖号码| www.943403.com-湛江七星彩网投| www.ez17.com-博牛彩票真的假的| www.d20.pw-彩票复式计算器下载| www.hc53.com-彩运8是个什么平台| www.8949.loan-全球盛兴彩票v3| www.699385.com-卖私彩怎么量刑| www.801526.com-966购彩网-| www.891978.com-彩票分析软件靠谱吗| www.983730.com-幸运时时彩骗局| www.an64.com-江苏利彩-| www.g00.com-海南四码彩票玩法| www.558073.com-赢大彩票-| www.811701.com-福利彩票基础知识| www.925442.com-天齐网体彩双胆预测| www.999873.com-网易彩票为什么停售| www.sl24.com-时时彩五星走势图彩| www.63du.com-福彩双色-| www.cp4748.com-湖北快三多少钱一期| www.qu64.com-彩票崔永元-| www.41ni.com-怎样分析足彩走势图| www.0734.com-排三乐彩网开奖号| www.50566.cc-ag333爱购彩| www.503362.com-快乐彩可靠吗| www.322105.com-彩导航彩票汇总| www.3364.top-彩虹天团app官网| www.sa8.com-彩神88-| www.615408.com-四川福彩开奖信息| www.851633.com-安阳结婚彩礼新规| 99彩票www.543977.com| www.31kx.com-彩虹卖号网站| www.148434.com-乐优炫彩百度百科| www.047211.com-288彩票官方网站| www.369890.com-天霁彩票95003| www.389887.com-彩票过期了-| www.82jc.com-新彩吧总汇-| www.579322.com-燕照风采福利彩票| www.370470.com-55彩票怎么看走势| www.468628.com-福彩刮刮乐官网| www.45yx.com-牛彩网11选五| www.431.cc-368彩票全国开奖| www.469.tv-金沙彩票-| www.414089.com-脸上挂彩-| www.514480.com-彩钢安装教程| www.593959.com-东方国际彩票安全吗| www.774693.com-七乐彩复式机选| www.k44.me-七天彩官方网址| www.06460.cc-福彩3d牛彩网彩摘| www.667770.com-怎么才能中七星彩呢| www.813711.com-宁夏体彩开奖信息| www.938572.com-双赢彩票网址| www.806236.com-彩票361理财| www.977871.com-足彩在哪里买| www.ia28.com-安徽福彩领取| www.61el.com-七乐彩周几开奖| www.7093.biz-博创彩票网址官网| www.38821.com-红彩票app-| www.110656.com-福利彩票多久一期| www.224747.com-五分快三倍投技巧| www.299316.com-快三走势图预测大小| www.pz05.cc-87彩票官方网站| www.uo68.com-快三中奖多少分之一| www.191536.com-湖湖北福彩快三| 大赢家彩票www.599894.com| www.uo28.com-内蒙古快三转家预测| www.0815.me-足彩还可以买吗| www.9336.biz-彩票得主中奖秘诀| www.82601.com-足彩19025推荐| www.261663.com-时时彩五星胆码技巧| www.372506.com-极速时时彩在线计划| www.555876.com-爱彩人靠谱吗| www.661571.com-足彩半全场漏洞| www.j08.net-糖果派对彩金中奖图| www.578.live-分分彩买大小技巧| www.02957.com-福建体育彩票官网站| www.007529.com-南国彩票论坛南海| www.911549.com-家彩论坛千禧试机号| 大赢家彩票www.493381.com| www.322768.com-精准彩票全天计划| www.073261.com-穷人买彩票希望| www.833343.com-手机扫码查彩票| www.976915.com-雷诺好彩一预测| www.st81.com-快三数学计算方法| www.589539.com-七星彩头尾规| www.293960.com-买体彩的软件| www.362142.com-彩票烂了怎么办| www.5359.wang-彩票软件输钱| www.818025.com-胜负彩19050| www.932576.com-双彩网论坛首页| www.r36.net-做彩票代理拉人经验| www.96up.com-高频彩背后-| www.8914.vip-山西体彩领奖流程| www.054829.com-3d通福彩计算软件| www.176221.com-安徽福彩快三遗漏号| www.190330.com-宁夏快三昨天走势图| www.859783.com-彩民论坛推荐号| www.866301.com-河南体彩481任2| www.653967.com-金龙彩票安卓版下载| www.956377.com-彩神输钱-| www.20304.cc-四川省福利彩票| www.689118.com-爱彩乐11选5福建| www.qp83.cc-中国福利彩票票种| www.423.tv-聊呗彩票计划群| www.9127.cm-七乐彩往期开奖查询| www.569630.com-福彩彩吧图谜总汇| www.630728.com-彩乐瀑官网电话| www.691306.com-爱美人足彩-| www.748050.com-好彩爆珠哪种最好| www.802780.com-福彩总部电话号码| www.864982.com-彩票压大小稳赢公式| www.919875.com-彩票app建设| www.963743.com-手机买彩票的软件| www.999903.cc-彩票服务平台| www.bd90.com-刷福利彩票单靠谱吗| www.56832.cc-购乐彩下载-| www.4pm.com-怎样看彩票是否中奖| www.185615.com-江苏快三是啥意思| www.043.online-体彩6十l开奖查询| www.g46.club-内蒙古彩票巨奖| www.301069.com-手机验证送38彩金| www.133742.com-500彩票大小| www.047326.com-乐彩论坛旧版下载| www.832582.com-七彩平台登陆| 豪彩VIPwww.9fk.com| www.48gy.com-体彩超级大乐| www.334768.com-乐猫彩票安卓版下载| www.513132.com-想开个彩票店| www.602673.com-彩票褶皱了能兑奖不| www.661187.com-cp128彩票-|