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天

知道了
全红彩票 www.716589.com-彩铅画入门基础教程| www.38289.cc-官方彩什么意思| www.017163.com-三分彩最准计划| www.487080.com-足彩截止购买时间| www.258198.com-全天实时彩计划| www.368244.com-我的彩票账户003| www.029937.com-内蒙古体育彩票微信| www.578726.com-彩之堂快三-| www.503680.com-深圳彩票系统开发商| www.391600.com-全民乐彩31363| www.037393.com-彩票缩水软件手机| www.300028.com-大家赢快3彩票平台| www.589713.com-艾彩网登录入口| www.679938.com-彩至尊注册-| www.762167.com-奇门测彩票取尾数法| www.844485.com-福彩7位数中奖号码| www.921197.com-3d彩票算法教程| www.987388.com-七星彩怎么手机投注| www.ut2.com-中国手机彩票网站| www.802226.com-中国福利彩票云南| www.969523.com-彩票计划团队哪个好| www.cp7753.com-福利彩票3d-| www.hd0.com-中国快三彩票网| www.78.gg-滴滴彩票安卓版| www.820589.com-彩钢家庭住宅| www.950737.com-专业玩彩双色球推荐| www.dg7.com-快三经验-| www.7928.loan-156计划彩票| www.lr40.com-网络彩票排行版| www.016965.com-福利彩票店怎么开| www.528796.com-大六壬测福彩3d| www.613643.com-大丰彩票平台登陆页| www.689873.com-盛大娱乐彩票app| www.622560.com-彩涂钢板的使用寿命| www.698365.com-独角兽彩虹什么寓意| www.196619.com-下载百宝彩票| www.693910.com-国外彩票app下载| www.815968.com-快三怎么买大小| www.915342.com-代玩彩票微信群| 中国福利彩票www.08588r.com| www.6667.mobi-彩盈下载安装| www.js5.com-河北彩票快3走势图| www.138416.com-互娱彩票下载网址| www.943318.com-博众时时彩官网| www.cai387.com-快三助手免费版| www.fd12.com-易彩快3的技巧| www.98or.com-盛彩娱乐官网| www.039203.com-彩票投资是什么意思| www.237184.com-大红鹰彩票-| www.61170.com-广西福令快三| www.6669.net-神彩物流被骗视频| www.43345.cc-云南体彩网-| www.007036.com-腾讯qq彩票官网| www.100360.com-福彩3α论坛| www.21201.com-澳大利亚彩票怎么买| www.637504.com-海南七星彩注册网站| www.713309.com-福彩3d和值数子表| www.782633.com-哪里可以下爱彩乐| www.855385.com-七星彩能买复式的吗| www.920053.com-福建快三玩法介绍| www.110651.com-彩9彩票安卓版| www.144242.com-体彩扑克牌开奖结果| www.253058.com-时时彩走势图软件| www.951342.com-体彩第19031期| 大赢家彩票平台www.547099.com| www.42qv.com-福彩3d村杀码预测| www.76410.com-彩博汇-| www.939797.com-彩98网站-| www.998881.com-洛杉矶快三-| www.ji83.com-今天河南快三结果| www.lx92.com-昨天上海快三走势图| www.09ed.com-福利彩票双色球| www.85vh.com-彩66平台-| www.29395.com-福星中彩网址| www.598261.com-体育彩排列5| www.381956.com-点击内容更精彩| www.yb95.com-派彩意思-| www.159099.com-鳄鱼彩票福彩3d| www.882876.com-福建省官方体彩网| www.971564.com-500彩票专家杀号| www.bp97.com-乐彩网破解版| www.651411.com-新彩票玩法-| www.010622.com-贵州快三怎么追跨度| www.632552.com-彩票什么规则| www.114248.cc-在网上买彩票靠谱吗| www.209677.com-福彩快开彩怎么玩呢| www.654740.com-七星彩大奖图片| www.906779.com-好彩app官方| www.113043.com-a·93彩票-| www.02507.com-江苏快三过滤| www.63719.com-足彩投注量和交易量| www.439825.com-中彩那天课文全拼音| www.22no.com-天津福彩中心办公| www.0134.top-彩色的梦怎么画| www.7073.biz-爱彩通怎么下载不了| www.19809.com-福利彩票提款| www.kf96.com-玩彩票wcp下载| www.977079.com-河南结婚风俗彩礼| www.780698.com-哪个平台打快三好| www.876577.com-中心彩报-| www.969396.com-万彩彩票邀请码| 彩票5www.550134.com| www.79300.com-探探上加微信玩彩票| www.042588.com-七星彩开奖记录表| www.n16.online-668彩票2805| www.90vr.cc-福彩双色球中一个| www.2992.site-福彩会中奖吗| www.539549.com-漳州市福彩中心电话| www.19cv.com-点击内容更精彩| www.2371.org-七彩幸福菊真的假的| www.002904.com-七星彩开结果| www.20gt.com-足彩360任选九| www.895528.com-新加坡快三开奖查询| www.73011.com-官网购彩票app| www.057736.com-玩彩的研究生独胆| www.65pe.com-体育彩票中途卖| www.0020.online买彩票中奖窍门| www.768615.com-好彩网是不是真的| www.986443.com-竞彩蓝球比分计算器| www.mg24.com-注册中彩网账户| www.88dq.com-网上售卖彩票犯法| www.813996.com-彩吧图迷第044期| www.565474.com-足彩盘看盘技巧| www.358374.com-广东体彩官方网| www.531259.com-时时彩违法吗| www.607038.com-打彩票选哪个数字好| www.111935.com-酷彩吧买彩票安全吗| www.962958.com-星光彩票群-| 大赢家彩票网www.544092.com| www.130596.com-多盈彩票手机版登录| www.cai1100.com福彩快3走势图| www.030797.com-冈易彩票双色球预测| www.150267.com-南昌体彩中心| www.252725.com-app微彩网-| www.700489.com-可变条码彩票定制| www.951374.com-大通彩票导航| www.z02.xyz-500万胜负足彩| www.853095.com-苹果版彩6下载| www.947542.com-老梁谈福利彩票| 鑫亿彩www.196902.com| www.206276.com-彩票争霸官方网站| www.399899.com-彩票斯毁还能兑奖吗| www.92zk.com-竞彩11248计划| www.621571.com-三d彩票三毛58期| www.678398.cc-福盈门彩票官网| www.744000.com-众彩网娱乐平台| www.650561.com-彩宝彩票官方| www.90rv.com-台州体彩11选5| www.543233.com-福彩3d高手在民间| www.493342.com-七乐彩彩票开奖时间| www.581301.com-彩票开奖程序| www.3903.com-福彩3d和尾技巧| www.dt6.com-十分快三计划| www.025362.com-旭彩网开码-| www.490025.com-彩一票开奖查询结果| www.573023.com-258彩票手机版| www.zg10.com-彩票双色球幸运选号| www.18vj.com-福彩摇球机-| www.79uo.com-极速快三必出| www.0668.site-彩票机卡纸怎么弄| www.63je.com-买老凤祥彩金可以吗| www.28295.cc-常州中彩票-| www.4dd.com-快乐购彩票-| www.276291.com-各种釉彩大瓶贴吧|