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.6275.cn-五福彩票咋样| www.811345.com-彩蛋是什么意思| www.78ep.com-足彩有赢钱的吗| www.6870.cc-竞彩足彩500赛果| www.27243.com-英国教授研究彩票| www.5115.hk-天天中彩怎么买不了| www.49045.com-御彩轩计划手机版| www.007110.com-福彩双色球36期| www.086861.com-篮球彩票怎么玩法| www.848774.com-彩光嫩肤一般多少钱| www.933323.com-一分快三出龙多长| 大赢家彩票网www.54400y.com| www.207712.com-福彩3d过滤工具| www.307211.com-韩国彩票网址| www.375550.com-全民中彩官方| www.469178.com-外国彩票专家预测| www.550083.com-彩播直播ios| www.732553.com-全民汇彩票电脑版| www.804726.com-彩之网互动区首页| www.884034.com-黑彩投注比例| www.984500.com-微信打彩票-| www.cw95.com-玩彩神真能赚钱吗| www.xf21.com-掌上中彩是真的吗| www.12ok.cc-伯乐彩票-| www.87en.com-5000万彩票平台| www.sy44.com-湖北快三投注计划| www.35zn.com-七星彩第四位走势图| www.92cz.cc-最新掌中彩下载| www.8744.tv-玩彩计划哪个软件好| www.92223.cc-福彩3d谜图总汇二| www.qh82.com-好彩网是否合法| www.301896.com-五分快三技巧走势| www.990700.com-竞彩足球怎么玩能赢| www.nh85.com-500vip.彩票| www.4az.com-英国彩票网站| www.84ks.com-彩票后二倍数怎么算| www.4378.in-地方彩票有哪些种类| www.61255.cc-彩99新版-| www.041342.com-福彩出的什么号| www.226918.com-快三在线玩-| www.317383.com-彩票心得总结话语| www.52723.cc-好彩app怎么下载| www.974820.com-四川体彩网金7乐| www.xy8.com-彩票赠与后中奖| www.zn90.com-福彩数字三玩法| www.48571.com-彩票零相关分析法| www.141089.com-彩票老谢大乐透| www.221013.com-免费下载快三开挂| www.296772.com-精彩十分走势图表| www.373587.com-快三连开最高纪录| www.168923.com-湖北快三综合走势| www.330278.com-福建省福彩兑奖地点| www.437003.com-彩票推荐号双色球| www.027178.com-1寸彩色相片图片| www.268188.com-足彩500竞彩| www.388733.com-盈盈彩票网址| www.688115.com-微信买彩票公众号| www.94se.cc-易彩用什么软件破解| www.29098.com-北京福彩兑奖须知| www.53xd.com-山东省福利彩票| www.182349.com-青海福彩快三下载| www.279985.com-彩票代玩给30佣金| www.360621.com-彩票店能买快三吗| www.456973.com-特吧彩-| www.547826.com-万彩影像大师破解| www.615347.com-体彩7位数中奖概率| www.683135.com-彩经网缩水过滤工具| www.175105.com-福彩甘肃快三走势图| 500彩票www.50064q.com| www.yi87.com-遵义快三开奖结果| www.47wt.com-申请彩票站多少钱| www.xg83.cc-好彩36第4943| www.19fd.com-智慧彩挂机软件客服| www.96sq.com-彩票充值送100%| www.4498.vip-彩票中奖交税税率| www.88fo.com-众购彩票平台登录| www.3280.me-网络彩票输了十万| www.22617.cc-盛兴彩票app下载| www.904256.com-进球彩胜负彩| www.964545.com-128福彩幸运快三| 68彩票www.68689r.com| www.34rd.com-南通市彩砖厂| www.4791.net-彩客彩票旧版| www.021103.com-彩宝彩票是真的吗| www.111500.com-太阳彩票-| www.177192.com-江苏快三三-| www.236300.cc-福彩手机购彩平台| www.309211.com-彩票被骗-| www.270.site-3d天天彩报纸今天| www.6717.net-hk百彩网天下采网| www.36345.com-福彩主任是多大的官| www.027967.com-福彩吧私彩-| www.151386.com-彩票是啥-| www.561273.com-爱乐彩快三-| www.628980.com-福彩任务代打| www.003366.com-gc彩票投注网网址| www.aw93.com-5d体彩那个开奖号| www.897961.com-竞彩宣传创意| www.407424.com-七星彩掏空奖池| www.513501.com-三分重庆时时彩计划| www.580623.com-体彩专管员面试| www.645933.com-足彩研究心得| www.707569.com-大发彩票骗-| www.771406.com-彩虫7-| www.829989.com-彩一官网-| www.885775.com-带有彩虹含义的名字| www.947401.com-彩票3d图谜第三版| www.985485.com-今日足彩竞彩推荐| www.al89.com-彩票过滤软件下载| www.6zf.com-一日发彩票-| www.868738.com-七星彩360杀号| www.945567.com-体彩顶呱刮7中奖率| www.996400.com-新粤彩报纸-| www.ke1.cc-彩票开奖查修| www.128217.com-浪琴一天快三秒| www.605729.com-旺彩开奖软件下载| www.yc57.com-今晚七星彩号码| www.49sc.com-有买彩票的网址吗| www.dv64.com-网易彩票平台| www.d32.com-竞彩全民竞技| www.709501.com-aa1882大发彩| www.926297.com-江西上饶体彩销售点| www.34895.com-购乐彩真的假的| www.126807.com-奖多多彩票-| www.184484.com-福彩快3湖北结果| www.037741.com-七乐彩过滤软件| www.11711.cc-达人彩票-| www.365455.cc-中超竞猜彩票投注| www.170368.com-吉林快三历史走势图| www.236835.com-中国体育彩票软件| www.440866.com-福彩群英会20选5| www.096849.com-国家福彩网-| www.060460.com-私彩犯法-| www.120580.com-3d预测彩吧网| www.179376.com-兰州快三游戏规则| www.244397.com-京东彩票-| www.708252.com-大发时时彩必中计划| www.833551.com-c59彩票怎么样| www.965304.com-哪个彩票最容易中| www.fy40.com-彩票幸运5分钟开奖| www.4hb.com-我爱彩票彩票也爱我| www.084915.com-天天赢彩票刷规则| www.195832.com-福彩开奖直播| www.274184.com-快三长龙经验| www.086775.com-福运彩票合法吗| www.232788.com-贵州快三开奖结| www.822280.com-体彩追加-| www.948207.com-特彩吧琭场报码开奖| www.ho7.com-甘肃快三开爱彩乐| www.wa65.com-旧版人人中彩票| www.1875.com-微信投彩票怎么投注| www.ja34.com-爱彩乐彩票走势图| www.r01.com-微博彩票关闭了| www.363193.com-羽泉彩虹吉他谱教学| www.444168.com-中福快3是什么彩票| www.522212.com-58彩票网计划群| www.559812.com-诺亚在线彩票有托吗| www.615963.com-红金龙软红之彩| www.666745.com-乐彩网能提现吗| www.733580.com-2345彩票计划| www.791063.com-七星彩最新开奖公告| www.842880.com-彩票不蒙面领奖| www.886579.com-百度官方彩票云论坛| www.1905.red-贵州多彩宝官方网站|