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天

知道了
1分快三 www.90258.com-七彩草图片大全| www.203081.com-彩神llapp-| www.84eb.com-乐彩客苹果下载| www.97581.com-竞彩专家推介| www.cp999.cc-广西好运快三走势图| www.1666.site-中彩网天空彩| www.10bp.com-足彩封盘-| www.585091.com-256彩票二维码| www.773231.com-陌陌彩票-| www.015366.com-彩票计划群潮信群| www.171062.com-大发快三怎么买能赢| www.215627.com-热门彩种是赌博| www.337139.com-中彩网与500| www.477460.com-彩神通双色球手机版| www.570866.com-福彩3d试机号快报| www.659842.com-秒秒彩-| www.770776.com-彩票网站怎么刷钱| www.121018.com-彩票计划员在哪上班| www.680252.com-易彩会员注册| www.870430.com-易旺彩票是什么| www.967152.com-彩票条码撕烂| www.cp31.com-江西多乐彩今日开奖| www.42nj.com-怎么看彩票结果| www.118604.com-彩票炒群话术怎么说| www.31568.com-彩票开奖查询141| www.tg4.cc-福彩开奖公告| www.639041.com-体彩申请单位| www.814053.com-高频彩公告-| www.936028.com-有靠买彩票发财的吗| www.gm0.com-时时彩出号绝密公式| www.p99.in-上海福彩选四预测| www.658578.com-彩彩乐群英会走势图| www.756437.com-彩票打码-| www.27400.com-最新足彩开奖| www.92479.com-160彩票真的假的| www.082217.com-彩票投注站微信号| www.193005.com-新彊福彩-| www.1510.vip-棒棒彩票下载app| www.37994.com-棒棒彩票官网| www.ls82.com-时时彩计划稳定版| www.06tc.com-彩神技巧-| www.22ox.com-瑞彩祥云平台租用| www.0io.cc-福利彩票数字彩| www.81vq.com-深圳福彩双色球开奖| www.672521.com-彩票赢家资料| www.772329.com-彩票平台列表| www.877808.com-五星彩票下载安装| 乐趣彩www.lqc2.com| www.og35.com-微信群买彩票| www.72vr.com-福彩排三大小走势图| www.3030.me-0k00澳客彩票网| www.33130.com-东方一分彩计划| www.054439.cc-吉林快三遗漏预测| www.135306.com-二元彩票走势图| www.224471.com-快乐彩开奖号码浙江| www.305696.com-打彩票运气-| www.88783.cc-聚宝k3彩票-| www.065883.com-时时彩后四做号方法| www.252083.com-中彩网如何买彩票| www.cp7358.com-北京快三技巧| www.384618.com-澳客彩票pc-| www.81834.com-时时彩后二遗漏| www.641322.com-香港时时三分彩| www.789948.com-炫彩摄影沙龙| www.881529.com-彩票论坛互动交流| www.984694.com-大乐透机选彩吧助手| www.aa57.com-怎么看彩票走势图| www.4hy.com-买彩票的诀窍| www.76fy.com-七乐彩中奖在哪领奖| www.2238.org-两块钱买彩票段子| www.7882.org-体彩大乐透开奖视频| www.314853.com-重庆市彩害了多少人| www.99jd.com-彩票澳客官网| www.943568.com-百福彩票官方网| www.780527.com-彩铅手绘日落风景| www.865640.com-福彩3d报纸和图案| www.007330.com-河南体彩大乐透| www.099499.com-有盈彩票app| www.196371.com-安徽快三单选单| www.ew71.com-易彩快3稳定计划| www.195850.com-福利彩票江西快3| www.254394.com-福泰娱乐快三下载| www.07486.cc-3000万彩票应用| www.46358.com-福彩彩票机保障| www.298938.com-甘肃快三最大遗漏号| www.281985.com-7乐彩下期专家预测| www.358150.com-女网友网上彩票| www.175806.com-亿博团队快三计划| www.916155.com-彩站怎么挣钱| www.169010.com-湖北快三走势图今天| www.218739.com-彩票平台刷流水兼职| www.8372.pw-七星彩福星长条| www.673957.com-和玺彩画和旋子彩画| www.282119.com-重庆时时彩在线杀码| www.bm70.com-竞彩篮球推荐| www.20lm.com-小炮智能彩票预测| www.4048.top-977彩票官网计划| www.66110.cc-福彩3d的选号技巧| www.141755.com-福利彩票机选号好吗| www.502387.com-kk彩票是骗局吗| www.707745.com-注册领元彩票彩金| www.844543.com-飞腾彩票是真的吗| www.927062.com-二四六天下彩资料大| www.996146.com-p3家彩网-| www.cc82.cc-快三究竟能不能赚钱| www.00129.com-爱投彩票能挣钱吗| www.484258.com-全中彩票软件| www.301025.com-存一元送58彩金| www.034923.com-快三开奖结果牛| www.320218.com-福彩快三网幸运快三| www.441160.com-我的彩票3d开奖| www.540233.com-福彩中奖号码预测| www.675428.com-奥鸿集团时时彩| www.984297.com-彩票杀龙什么意思| www.kg9.cc-福彩快三贴吧| www.pa28.com-即开彩下载-| www.27gm.com-体育彩票好中奖吗| www.96kj.com-万豪国际彩票网站| www.2578.in-用数学的眼光买彩票| www.7741.vip-9号彩票正规安全吗| www.cp0152.com-快三定单口诀| www.u27.cc-彩票转账支票| www.83zt.com-中国13彩-| www.2471.pw-好彩网首页下载| www.00715.com-彩摘网牛彩网彩摘网| www.96783.com-李永志彩票事件视频| www.057332.com-众盈彩票是骗局吗| www.132467.com-彩妆加盟-| www.213366.cc-江苏快三赚钱| www.9921.cm-彩票25期开奖| www.342634.com-排三开机南方双彩网| www.502952.com-国彩印刷厂-| www.363213.com-破解私彩票软件下载| www.490895.com-今曰甘肃快三结果| www.563793.com-易记彩票-| www.623839.com-胜负彩推荐app| www.677169.com-掌上福彩宝典的网址| www.733011.com-金坛体育彩票中心| www.789211.com-2018年结婚彩礼| www.856785.com-彩c6彩票-| www.900956.com-专业玩彩3d彩票网| www.954032.com-uu快三是哪里的| www.989208.com-彩票开奖机器多少钱| www.pd95.com-河北福彩官方网站| www.63yn.com-优优反波彩怎么样| www.490638.com-大乐透淘宝彩票| www.563371.com-60彩票网代理| www.744944.com-彩票管理条例全文| www.796490.com-腾讯分分彩全天号码| www.906638.com-福利彩票能选哪些号| 彩天下www.c5839.com| www.686748.com-中彩票人结局据调查| www.879556.com-快三是福彩吗| www.952959.com-中国福彩网开奖规则| 好彩头www.hct5.com| www.437178.com-中奖几率最高的彩票| www.qp51.cc-内蒙体育彩11选5| www.488083.com-福彩3d365分析| www.630628.com-乐彩网三地开奖结果| www.743468.com-凤翔彩票-| www.880759.com-体彩排列三中奖情况| www.980714.com-彩票分析软件选号器| www.c5.tv-好彩app合法吗| www.812349.com-开头带彩字四字成语|