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.341382.com-网络彩票推广用语| www.972504.com-福建福彩快3预测| www.740215.com-买彩票几注什么意思| www.586874.com-南方双彩绿色版下载| www.74099.com-福彩3d公式杀码| www.942.me-体彩排五直播| www.cc1.cc-福彩快3走势图福建| www.3800.pro-江苏快三手机怎么买| www.559029.com-满洲里市福彩中心| www.654997.com-局王七星彩下载安装| www.739598.com-中信彩票网站首页| www.999575.com-福利彩票走势图尺寸| www.3045.cm-甘肃福彩快三玩法| www.1199.vip-彩神争争霸一| www.09cc.cc-星辉彩票登录官网| www.936905.com-凤凰彩票可以玩吗| www.279653.com-五分时时彩开奖记录| www.789624.com-福彩山西快乐十分钟| www.877915.com-往期彩票开奖一览| www.975497.com-立彩app下载地址| www.cp6328.com-中国福彩手机投注| www.w23.space-诺亚彩票注册| www.180907.com-中彩在线app| www.208768.com-彩神通关注码| www.088549.com-彩票平台检测玩家| www.988366.com-国民彩票手机版下载| www.180292.com-福彩快三开奖结果| www.376553.com-彩宝设计图-| www.091240.com-58彩票平台怎么样| www.213048.com-金沙博彩-| www.296899.com-惠民彩票合法吗| www.383159.com-茶陵公益彩票| www.892371.com-彩票开奖360安全| www.969421.com-用酷彩吧合法吗| www.cp5922.com-买彩票的人都是傻子| www.567221.com-赢彩吧是违法的吗| www.821662.com-聚彩官网害死多少人| www.932763.com-神圣彩票网址多少| 大赢家彩票网www.54400n.com| www.392585.com-株洲福彩新闻| www.048765.com-爱彩乐怎么样| www.636253.com-彩虹机怎么用| www.781040.com-江西快三彩票app| www.919081.com-彩票站编号-| www.cp0186.com-快三助手官方| www.197674.com-河南快三3遗漏| www.043939.com-彩票扫一扫查询中奖| GO彩www.gai57.com| www.547211.com-什么是彩票跟单| www.98cs.com-乐点彩app-| www.5243.vip-万彩彩票怎么样| www.41595.com-彩牛网免费资料大全| www.16393.cc-竞彩足球计算机| www.730209.com-易彩快3开奖查询| www.025452.com-彩票开奖481| www.778915.com-旺彩社区3d绕胆图| www.1503.pw-生日彩虹屁-| GO彩www.gu64.com| www.767924.com-广西双彩走势图表| www.865382.com-淘宝彩票平台代理| www.937308.com-福田彩福大厦怎样| www.992054.com-雪源源足彩比分直播| www.rm66.com-全天重庆彩五星计划| www.456191.com-鼎丰彩票下载安装| www.822347.com-七星彩18147| www.898737.com-一等奖彩票票样| www.961642.com-众彩极速赛车| 聚彩网www.810575.com| www.693723.com-中国彩票官方| www.897668.com-多彩贵州网领导班子| 818合彩www.www.1555hc.com| www.967745.com-360彩票开奖大全| www.rw6.com-河北福彩好运2玩法| www.82820.cc-搜狐彩票合法吗| www.49336.com-福利彩票。-| www.i44.cc-彩票帮投兼职| www.255498.com-彩富网免费大全| www.473796.com-福彩前区中三个| www.593361.com-七彩国际平台| www.693291.com-短信投彩票-| www.82tc.com-竞彩北单官网| www.69821.com-海南福彩额度| www.462209.com-彩票规则漏洞| www.68au.com-大星彩票开奖查询| www.834.tv-直播间聊彩票| www.568713.com-福彩3d会员-| www.700089.cc-福彩3d规则好复杂| www.504878.com-人生没有彩排下一句| www.654900.com-七星彩开奖直播链接| www.48lm.com-海滨时时彩计划| www.3886.in-彩金和黄金哪个值钱| www.05900.com-体育官方彩-| www.329308.com-超级彩票助手手机版| www.668.vip-福彩没有手机客户端| www.787966.com-彩票开奖历史20| www.037827.com-快三和值最大遗漏数| www.133407.com-易彩快3计划网| www.765411.com-七星彩七金码解诗网| www.206930.com-彩68彩票下载| www.489552.com-657彩票网登录| www.73566.cc-靠谱的彩票计划群| www.492668.com-富赢彩票邀请码| www.23582.com-达人彩票官网下载| www.29cy.com-昨天的体彩中奖号| www.676187.com-彩票那个奖金最高| www.532565.com-临沂中彩票-| www.72ph.com-1516购彩-| 500万彩票www.w695.com| www.848444.com-时时彩趋势-| www.187988.com-时时彩组三规律口诀| www.361792.com-杏彩平台登录| www.122049.com-中乐彩官网登录| www.497559.com-彩经网怎么了| www.2994.vip-鸿运港彩论坛| www.610586.com-彩钢瓦安装方法图解| www.689607.com-中国彩票网上投注| www.035027.com-彩票大小1赔1| www.4404.vip-福彩快三骗人吗| www.9630.org-重庆十分彩开奖时间| www.974423.com-浙福彩12选5| www.u65.org-网上怎么买竞彩篮球| www.35iv.com-星期三什么彩票开奖| www.29139.com-河北省福彩中心官网| www.31zq.com-博友彩手机版| www.7792.loan-珐琅彩小茶杯| www.125177.com-彩票分哪几种怎么玩| www.728669.com-大乐透预测号中彩网| www.45845.com-大中华彩票怎么样| www.049595.com-体彩竞彩比分怎么玩| www.004875.com-海口福彩快2在哪买| www.188824.com-快乐彩开奖号码走势| www.8kb.com-足彩六场半全场对阵| www.355704.com-足彩怎么扣税| www.449888.com-爱赢彩店-| www.3327.cm-彩色装饰画人物| www.33443.com-凤彩网字谜总汇| www.984008.com-258彩票网-| www.bf68.cc-手机淘宝彩票| www.94bi.com-福建体彩中心搬迁| www.228777.com-皇家彩世界app| www.242620.com-福利彩票中奖规则图| www.88945.cc-皇帝彩票资金安全吗| www.650834.com-天津时时彩图库| www.731926.com-易彩快3必中| www.815681.com-福利彩票排列7开奖| www.885923.com-众彩网排列五走势图| www.941016.com-福彩网代理邀请码| www.984138.cc-久久彩票骗局| www.cp1717.com-幸运快三全天计划| www.71hx.com-竞彩篮球彩票安全吗| www.281813.com-彩民之家资料大全| www.302880.com-河北福彩排列七奖池| www.336933.com-广西福彩快三手机| www.4042.xyz-彩票做号工具| www.85727.com-福彩编号是什么意思| www.529783.com-斗鱼直播彩票| www.242826.com-福利彩票几点开奖| www.545485.com-彩票计算软件哪个好| www.618574.com-招竞彩分析师招聘| www.179620.com-10分快三计划软件| www.460076.com-玩彩票大平台苹果版| www.673906.com-中国古代建筑彩画| www.45iw.com-湖北快三多少钱一注| www.2635.net-七星彩2元走势图|