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.280298.com-福彩3d走势图福| www.92123.cc-顺丰丰彩有中奖的吗| www.86692.cc-体彩助手如何登录| www.668.date-永利彩票服务器| www.qd51.com-超级彩票app下载| www.299010.com-大发时时彩专业计划| www.470455.com-博彩和体彩区别| www.1360.top-奔驰彩票是干什么的| www.630992.com-体彩飞鱼有什么规律| www.299412.com-福彩3d藏机图全部| www.393996.com-福利彩开奖结果昨天| www.899895.com-彩票下app-| 福利彩8www.flcb6.com| www.177666.com-甘肃快三计划网页| www.69993.com-时时彩后二胆码计划| www.19930.com-竞彩足球分析秘密| www.36985.com-天天中彩票软件版本| www.030212.com-体彩开奖直播视频| www.14580.com-官方五分彩-| www.66173.cc-安卓版彩票专选号器| www.325177.com-蓝海娱乐彩票怎么样| www.422461.com-下载彩票投注软件| www.702285.com-盛澳竞彩合法吗| www.014734.com-快彩乐快3-| www.331032.com-有彩票的棋牌游戏| www.450459.com-约彩网-| www.42vm.com-今晚彩彩票开奖查询| www.55rl.com-5808万体彩-| www.170671.com-贵卅快三开奖走势图| www.553632.com-竞彩半全场-| www.758520.com-彩薇花美容霜| www.815955.com-查一下乐彩网走势图| www.976548.com-七乐彩复式玩法| www.dr10.com-最新彩票指南| www.d99.cc-足彩先买平再对冲| www.76zr.com-重庆体育彩票站| www.4111.xyz-彩虹网络电视下载| www.587601.com-旺彩双色球软| www.685939.com-今日七星彩开奖号码| www.878617.com-体彩乐3-| www.964228.com-南方福彩app下载| www.dj23.cc-充值福彩网是骗局吗| www.i70.mobi-存38送58彩金| www.220346.com-优信快三彩票主页| www.58224.com-精彩音乐汇歌曲名单| www.890177.com-大发时时彩下载| www.999024.com-吉林快三豹子| www.hf65.com-时时中彩票下载| www.15ut.com-附近体育彩票店地图| www.51006.com-苏宁彩票下载| www.5272.com-搜狗彩票排五走势图| www.219.net-赛车时时彩app| www.8391.wang-彩掌柜彩票真实吗| www.074731.com-香港手机彩富网| www.310077.com-新浪爱彩下载| www.604891.com-有微信群玩时时彩| www.686226.com-500go购彩诈骗| www.785797.com-特区南国彩票七星彩| www.80az.com-可以投注的彩票软件| www.5zg.com-105彩票计划软件| www.609.tv-微信开时时彩赌博群| www.8310.top-重庆新时时彩走势图| 500彩票www.66621w.com| www.479.win-北京28福利彩| www.2509.vip-彩乐高手网-| 幸运彩票www.672166.com| www.377741.com-中华彩票网好看视频| www.948687.com-澳门基金六福彩| www.ds89.com-彩福平台-| www.yk48.com-长春逸彩快三| www.hf31.cc-正规彩票投注app| www.93793.cc-快三独胆-| www.54286.com-一张彩票多少钱| www.159.cn-五洲彩票受骗| www.493885.com-彩票站现外兑| www.668133.com-福彩的钱去哪里了| www.380528.com-七乐彩万能号码| www.557332.com-红运彩票app| www.657670.com-体彩巨奖兑付流程| www.93649.com-微彩吧app安卓| www.513699.com-淘彩票漏洞赚钱| www.888833.cc-河内5分彩官网| www.996601.cc-黑河福彩网-| www.93pz.cc-希腊玩什么彩票| www.391355.com-五星彩票开-| www.498853.com-彩票刷流水挣佣金| www.562219.com-万彩影像大师能破解| www.wf85.com-吉林快三遗漏走势| www.295637.com-十分快三是谁开的| www.641.biz-中彩票八字案例分析| www.156761.com-福彩主任被抓| www.265397.com-双彩网首页-| www.355192.com-彩票中奖最低多少钱| www.520073.com-福利彩票中两个号码| www.017450.com-彩票71网址-| www.625899.com-富华彩票平台| www.759868.com-时时彩怎么看走势图| www.859320.com-彩票一号店-| www.960949.com-彩票3d过滤器| www.hn73.com-湖北福彩快三3同号| www.741881.com-湖北快三论坛群| www.604432.com-怎么投诉彩票app| www.w08.cc-吉林快三微信| www.2317.wang-千万国际彩票| www.456447.com-红彩影视直播| www.67by.com-信彩票平台怎么样| www.120782.com-河南快三和值图| www.211418.com-网上快三合法吗| www.345444.cc-万博可以买时时彩吗| www.777175.com-皇冠体彩安全吗| www.975875.com-福彩排七兑奖规则| 大赢家彩票平台www.810521.com| www.tc66.com-彩网名-| www.61673.com-17彩票苹果版| www.096236.com-彩票哪个靠谱| www.165536.com-福利彩票发行| www.230329.com-518彩票app-| www.007447.com-幸运彩app苹果| www.691682.com-福彩管理中心网| www.356025.com-玩彩吗是什么意思| 彩天下www.256238.com| www.443099.com-网易红彩怎么破解| www.583233.com-彩色的中国歌曲| www.1307.cm-乐彩网真实可靠么| www.868022.com-海口彩票早版互换区| www.305226.com-数字彩票出号规律| www.239525.com-腾讯快三开奖| www.322693.com-海口七星彩现场直播| www.398214.com-摇摇乐彩票-| www.80499.cc-邯郸银行人员买彩票| www.195915.com-江西快三走势图表i| www.086083.com-乐彩彩票平台安全吗| www.028319.com-彩排说说-| www.123201.com-湖北武汉福彩店| www.199808.com-河北福彩三-| www.436555.com-体彩竞彩微信营销| www.535587.com-体彩7位数中奖号码| www.623706.com-鸣彩艺术-| www.703790.com-查今晚体彩36开奖| www.520157.com-快三1跨是什么意思| www.89el.com-竞彩体育篮球比分| www.3167.cc-购彩票软件哪个好| www.811266.com-购彩平台被曝光| www.883531.com-高频彩彩票投资技巧| www.972471.com-彩票七乐彩开奖号码| www.79sx.com-精英彩票网计划| www.1677.xyz-福彩走势图乐彩| www.203042.com-安徽快三预测群| www.261530.com-海南彩票论坛| www.777271.com-立彩赚钱账号| www.865852.com-博發彩票-| www.922333.cc-香港招聘足彩分析师| www.972794.com-水彩画日落-| 福利彩票www.78700a.com| www.632213.com-时彩怎么买才能中| www.xr66.com-彩票靠运气吗| www.058626.com-高手彩坛一彩票大全| www.27fn.com-体彩11选5彩票| www.137876.com-大发彩票是违法的吗| www.464340.com-500彩票过滤软件| www.28338.com-3d彩票是不是真的| www.bi4.com-江苏快三彩票正规吗| www.189984.com-江苏快三多久一期| www.630976.com-爱上彩票下载安装|