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.79ps.com-国标快三视频| www.079693.com-彩票55官方下载| www.gn09.com-新疆福彩喜乐彩开奖| www.5502.top-彩虹岛with-| www.12003.com-彩票平台是骗局吗| www.41345.cc-玩彩票被骗无法提现| www.cp9550.com-旺彩-| www.769848.com-下载好彩app| www.3847.com-七星彩走势图规律图| www.877682.com-海外足彩-| www.967339.com-彩票一对一带微信| 500彩票www.647377.com| www.lk67.com-1号平台彩票网址| www.330928.com-下载彩神lv-| www.455894.com-一张彩票引发的故事| www.559852.com-极速时时彩免费软件| www.666149.com-苹果手机体育彩票| www.970178.com-福彩3d秘密通道| www.177513.com-吉林快三手机助手| www.800157.com-福彩快三网购| www.904779.com-中中国体彩官网| www.996756.com-体彩大乐透手机机选| www.ib74.com-1068彩票app| www.f27.club-乐迎彩票网站| www.67ax.com-幸运快三彩票计划| www.653894.com-大玩家彩票qq群| www.985561.com-体彩5d开奖网| www.mk0.cc-安徽福彩快三开奖号| www.vi23.com-福彩快彩-| www.28zt.com-体彩中心开机号| www.897.mobi-买彩票中奖的经历| www.5547.cm-这期算下期彩票号| www.12289.com-中国体彩摇奖中心| www.15211.com-众博时时彩平台| www.299448.com-体彩票开奖查询结果| www.126367.cc-创彩是干嘛的| www.948776.com-彩票有什么软件| www.387273.com-ag彩票数据提醒| www.539468.com-广东体彩发展历史| www.65397.com-西宁彩票在哪里兑奖| www.113755.com-极速快三导师| www.188987.com-内蒙古快三玩法规则| www.3619.org-全民彩票网-| www.77459.com-彩票走势图显示屏| www.559211.com-通辽体育彩票中心| www.696310.com-足彩19030期| www.781969.com-南洋乐和彩网首页| www.872433.com-贵阳彩票兑奖中心| www.987005.com-有没有好的购彩平台| www.45058.com-高盛彩票可信度| www.369431.com-福建体育彩直播聊天| www.ap16.com-贵州彩票最大奖| www.073307.com-豹赢彩票官方网站| www.33he.com-飞来福彩吧站长彩吧| www.977316.com-18137期足彩| www.8306.cc-星期一开奖的彩票| www.872425.com-凯里贵州体彩中心| www.740077.com-澳博彩票网-| www.771334.com-881彩票-| www.513520.com-时时彩3分钟一期| www.368673.com-七星彩中奖神器| www.897162.com-时时彩长龙判断| www.989281.com-手机51中彩彩票| www.z11.org-福彩山东那个台开奖| www.513506.com-雅彩彩票安全吗| www.608640.com-彩票背后的惊天秘密| www.700434.com-体彩如何网上购买| www.799336.com-福彩一体机使用说明| www.874960.com-信彩票平台-| www.964983.com-乐赢彩票网骗局揭秘| 万历彩票www.77114z.com| www.013308.com-腾讯分分彩五星规律| www.098808.com-彩票线上销售取消| www.3465.xyz-财通彩票正规吗| www.719015.com-中彩吧下载安装| www.971708.com-竞彩网上投注合法吗| www.199395.com-河南快三彩票平台| www.81121.cc-福彩排列五的玩法| www.23855.com-乐和彩票ios| www.030382.com-快三有什么技巧吗| www.138800.com-新天天彩是正规的吗| www.ec92.com-阿里彩票害人| www.83ds.com-喝彩中华第三季| www.2987.top-九万彩票旧版首页| www.235751.com-正规彩票投注平台| www.144120.com-福利彩票真有人中吗| www.299414.com-3d彩吧藏机图| www.936006.com-百盈彩票注册网站| www.bd60.com-彩票稳赚包赔骗局| www.vl20.com-快速查彩票开奖结果| www.8128.xyz-北京时时彩平台官网| www.864899.com-优信彩票注册| www.958666.cc-2014年七星彩| www.cp716.com-安徽体彩十一选五| www.um45.com-内蒙古时时彩快三| www.8822.vip-分分彩大小八期计划| www.4678.biz-网络彩票怎么刷流水| www.001894.com-高澜彩票专栏| www.11sq.cc-66好彩app下载| www.38ki.com-8亿彩真的赚钱吗| www.694638.com-彩票兑奖时间周几| www.12100.com-今日福彩中奖结果| www.23004.com-王者彩票快三破解| www.150123.cc-广东体彩管理中心| www.219850.com-福建快三走势| www.111370.com-彩名堂app安卓版| www.179226.com-天天福彩是骗局吗| www.008428.com-の更多精彩-| www.069065.com-幸运5分彩是真的吗| www.131861.com-全国彩礼排名最低| www.904128.com-快三复试彩票怎么玩| www.030209.com-新浪体彩开奖直播| www.832259.com-彩虹qq手机版| www.936684.com-麒麟彩票提现不了| 爱彩www.1444ac.com| www.ev32.com-彩票快三的规律| www.139337.com-辽宁福彩快乐十二| www.29ey.com-福彩3d魔图表| www.625411.com-1998彩票app| www.155302.com-彩票团队注册送彩金| www.039301.com-网上彩票跟投骗局| www.512518.com-儿童彩铅画风景| www.611092.com-下载彩38-| www.611954.com-附近卖体彩-| www.803066.com-合盈彩票网可信吗| www.901600.com-炫乐彩票二维码扫描| www.973804.com-新2彩票软件| www.4004.com-澳门彩票论坛| www.817173.com-杭州快三查询| www.903833.com-彩票现金平台出租| www.971172.com-彩票选号经典| www.cp9875.com-75868彩票-| www.n63.cn-怎样买彩票会中大奖| www.25229.cc-彩铅画需要多少色笔| www.72808.com-体育彩票站出兑转让| www.190443.com-大发快三有玩的吗| www.848393.com-众彩网官网-| www.93920.com-红米竞彩-| www.667456.com-球彩台節目表| www.773947.com-彩博888资料网站| www.851992.com-双色球专业玩彩分析| www.981931.com-红彩会彩票下载| www.533000.cc-酷彩app安卓版| www.616450.com-彩票的中奖图| www.692298.com-体彩排三推荐汇总| www.780817.com-彩虹吉他谱c调| www.866025.com-福彩快乐十分倍率| www.936543.com-体彩胜负彩中奖规则| 凤凰彩票www.88266l.com| www.jl06.com-505彩票大奖快三| www.055785.com-福利彩有大发快三吗| www.656762.com-易彩易彩福地app| www.639467.com-体彩装修-| www.422132.com-手机三五彩票| www.210606.com-极速快三是官方彩票| www.01262.com-3d彩票跨度预测| www.273029.com-于海彩票结案了吗| www.32593.cc-春秋彩票app| www.369814.com-七星彩几点封机| www.647.xyz-特彩吧现在开奖结果| www.283237.com-七星彩五个号多少钱| www.5227.me-福利彩票71-| www.067878.com-彩票平台架设搭建| www.141127.com-公众号老猫出彩|