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天

知道了
百盈PK10 www.wj76.com-全能体彩官网| www.550270.com-买彩票真能中大奖吗| www.650132.com-最便宜的彩票| www.757770.com-黑彩提现不了| www.878717.com-中国福彩积分卡查询| www.ml89.com-时时彩漏洞日赚千元| www.179934.com-体彩网足球比分| www.76au.com-乐彩网怎么挣钱| www.4319.com-k彩彩民福地下载| www.358907.com-七星彩大奖网站注册| www.356468.com-竞彩分分彩-| www.508585.com-广发彩票登录| 大赢家彩票www.599849.com| www.71671.cc-福彩3d彩图片| www.ty16.com-怎么看彩票长龙| www.46ib.com-下载彩票易网下载| www.909916.com-最新双色球彩民乐| www.je23.com-福彩快三怎么算| www.t75.top-遇到彩票托怎么办| www.561077.com-99彩官方登录| www.691118.com-河北彩票网注册账户| www.809607.com-南国彩票论坛南海网| www.911559.com-三地家彩论坛| 博友彩www.455598.com| www.rw46.com-快三输了能回本吗| www.853722.com-乾特火箭彩票下载| www.952918.com-广西福彩七乐彩开奖| www.cp6122.com-中国福利彩票下载| www.661126.com-蛙富导航彩票| www.736212.com-无极彩票平台| www.818444.cc-新浪网彩票首页| www.900346.com-国乐彩app下载| www.972004.com-足球彩票手机app| www.cp837.cc-快三72期开奖结果| www.nx33.com-福利彩票字谜| www.906531.com-分分时时彩万位技巧| www.978552.com-福彩自助精灵靠谱吗| www.fe6.cc-网络分分彩骗局| www.667208.com-7乐彩免费网推荐| www.298007.com-快三图案-| www.7989.top-博彩官网-| www.520397.com-富人买彩票-| www.707384.com-新浪足彩竞彩单场| www.799613.com-注册彩票送38元| www.880721.com-天猫彩票app下载| www.951453.com-优信彩票19660| 亚洲彩www.68568k.com| www.91400.cc-好彩蓝莓双爆缅甸版| www.703.cm-王者彩票是骗人的吗| www.13rs.com-山东彩票手机投注版| www.108708.com-七星彩是否中奖查询| www.78838.cc-132彩票新版下载| www.003446.com-菲律宾彩票合法吗| www.001478.com-北京时时乐彩| www.423018.com-福彩开店详细流程| www.889576.com-网上购彩票合法网站| www.992280.com-重庆时时彩杀号| www.14rx.com-七星彩局王长条图纸| www.428558.com-正好彩票网址| www.553102.com-香港′彩富网| www.622266.com-九彩鸿蒙圣僵| www.684599.com-最棒的彩票网站大全| www.760631.com-广东南粤好彩1预测| www.844120.com-彩票属于-| www.903027.com-真实的彩票代购网站| www.964893.com-18彩票官方下载| 新盈彩www.xinyc8.com| www.373216.com-可以去伯乐彩票玩吗| www.497516.com-辛运相伴辛运彩票| www.558993.com-赤峰福彩中心主任| www.230396.com-3d字谜凤彩网| www.337439.com-青海福利彩票3d| www.531657.com-彩搜藏机图-| www.663490.com-乐彩彩票平台代理| www.765838.com-58彩票官方正版| www.919497.com-app彩票软件平台| www.de03.com-瑞彩祥云网页| www.uy20.com-贵州福彩34期快3| www.11284.com-中国福彩中心电话| www.68153.cc-新彩吧图库p3| www.2du.com-九号彩票注册| www.901658.com-福彩冮苏快三| www.ju72.com-颖彩双色球专栏| www.3087.vip-买彩票免费领彩金| www.12lg.com-火凤凰彩票网站| www.595815.com-福彩3d数字八卦图| www.666085.com-新加坡华乐彩开奖| www.798633.com-极速时时彩基本走势| www.br.com-河北福彩20选5| www.vb33.com-易彩网骗局揭秘| www.061717.com-排三乐彩网走势图| www.209851.com-合买彩票的app| www.747990.com-福彩3d中奖号查询| www.397.website安徽福彩主任| www.6977.in-中奖彩票视频| www.xz84.com-购彩之家-| www.bh93.com-快三走势讲解| www.648775.com-怎么讲解彩宝碧玺| www.211446.com-百胜快三网址| www.716686.com-彩铅古风场景| www.900614.com-注册就送彩金的网站| 开心彩票www.250552.com| www.cp239.com-49彩票app-| www.218096.com-亿彩彩票app| www.252972.com-好彩妹钟嘉欣| www.568102.com-彩票当日开奖| www.79wi.com-分分彩挂机方案制作| www.587102.com-大唐娱乐彩票登录| www.550902.com-彩票合买在哪| www.139904.com-上海体彩中心地址| www.794110.com-福彩3g的分析| www.894518.com-怎么查彩票中奖地区| www.974898.com-七星彩开奖预测最准| www.my70.com-彩票店碰到赊账的| www.362191.com-描述彩虹的优美句子| www.986508.com-阿里巴巴福彩是什么| www.dc59.com-彩票365正规吗| www.8wh.com-鼎彩国际app| www.68ef.com-体彩排列5预测号| www.073034.com-澳洲有哪几种彩票| www.202595.com-彩38彩票领导者| www.315188.com-卖福彩-| www.398595.com-福利彩票开票时间| www.548766.com-彩播和绿播的区别| www.628196.com-泉州体彩聊天直播室| www.984070.com-彩票平台99-| www.jx15.com-17年七星彩-| www.798037.com-体彩11选择5预测| www.2353.win-七彩虹主板z77| www.66502.com-彩票预测下期| www.109294.com-红牛福利彩票| www.181860.com-安微快三预测和值| www.nw07.com-手机版安徽快三计划| www.735273.com-二米彩票-| www.877811.com-福彩票开奖查河| www.964481.com-大乐透彩票计算器| www.dx6.com-百盈快三计划| www.vu11.com-惠民彩-| www.939085.com-139彩票登录不上| 盛大彩票www.ca2932.com| www.409228.com-vr3分彩计划| www.560141.com-排三杀百位彩宝贝| www.633515.com-幸运彩神排列三专栏| www.702591.com-赢彩专家app| www.778641.com-新彩网是合法的吗| www.860310.com-彩票5050手机版| www.954805.com-体彩走势图带连线图| 大玩家彩票www.84499a.com| www.582162.com-彩票停止销售时间| www.550277.com-江苏体彩中心官网| www.506507.com-宝乐彩票我的账户| www.1992.cc-竞彩足球过关方式| www.338239.com-贾峪彩票中奖| www.858211.com-bet博彩-| www.l06.cc-正好彩票网-| www.4087.biz-海南注册彩票公司| www.682178.com-体彩二维码出票教程| www.318235.com-彩虹伞打地鼠| www.546050.cc-福彩店标准装修| www.62ge.com-体彩个位振幅走势| www.093004.com-工地临时彩钢瓦围墙| www.279098.com-ee球彩开奖结果| www.380784.com-彩票新手怎么看| www.8572.xyz-福彩3d中奖奖号|