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.237472.com-足球竞彩比分| www.cp7000.cc-江苏快三赚了几十万| www.28313.cc-彩票指南报电子报| www.3728.cm-五子彩球在线玩| www.973313.com-彩虹吉他谱女生版| www.zw21.com-怎么时时彩才能赚钱| www.128617.com-美国超级彩票| www.530862.com-彩铅手绘花朵画| www.562503.com-秒速赛车彩票技巧| www.654972.com-七星彩大公鸡安卓| www.909.hk-大学生破解彩票获刑| www.6449.pw-33彩票是谁超控| www.886627.com-福利彩票摇奖池| www.984818.com-彩票平台怎么风控的| www.rs93.com-彩票256-| www.77ky.cc-福彩幸运三开奖号码| 500彩票网www.310615.com| www.222706.com-喜中网金彩网| www.365632.cc-足球篮球人人竞彩| www.502635.com-杨震足彩推荐更新用| www.674411.com-河南福彩中心怎么去| www.92736.com-竞彩单关开奖结果| www.079632.com-飞鱼彩票算法| www.154729.com-十四场胜负彩吧| www.234669.com-福彩3d和制图| www.333254.com-广东十分彩技巧| www.97276.cc-彩票挂软件-| www.062500.com-9万彩票官网平台| www.145557.com-上海彩票基诺走势| www.703257.com-福彩3d中奖奖励| www.791937.com-彩票组合数公式| www.880543.com-9b百胜彩票-| www.954821.com-上海快三技巧134| 万利www.32123w.com| www.887027.com-彩票网站属于赌博吗| www.992719.com-喜乐彩票平台app| www.dx47.com-易彩集团彩票| www.105111.cc-体育彩票用什么软件| www.182296.com-内蒙快三跨度| www.259007.com-彩票幸运选号| www.329229.com-今晚福彩是否开奖| www.1262.vip-江苏11选五时时彩| www.42uv.com-查彩票下载什么软件| www.273811.com-福彩3d30期开奖| www.464316.com-买彩票有诀窍吗| www.799037.com-中福彩传媒3d| www.3087.vip-买彩票免费领彩金| www.016227.com-可以查询彩票| www.176361.com-5分快三怎样下载| www.252319.com-中华彩票app| www.25ze.com-猎人迷彩图片| www.3166.in-大通官方网彩票| www.5230.cn-新加坡赛马结果派彩| www.25538.cc-客彩网完全-| www.65ca.cc-福利彩票19030| www.3811.in-体彩22选5开奖| www.13777.com-重庆老时时彩宝典| www.65ca.cc-福利彩票19030| www.4500.hk-7星彩19028-| www.663869.com-7星彩历史开奖号码| www.3866.vip-福彩三地字迷图| www.ea77.com-彩票幸运农场走势图| www.489438.com-购彩网拼音怎么拼| www.994085.com-中国体育彩票飞鱼彩| www.497794.com-十三国际彩票邀请码| www.671277.com-快乐彩怎么预测和| www.953843.com-牛牛网彩票靠谱吗| www.27ov.com-生肖彩票app| www.42604.com-彩经网是正规网站吗| www.286458.com-琓彩人杀号-| www.113178.com-官方彩票人工计划| www.920321.com-中彩网预测-| www.1lg.com-福彩体彩店转让| www.807386.com-彩博士计划软件官网| www.981177.com-易彩彩票网-| www.272.pw-美国加州彩票网站| www.62020.cc-福彩双色球105期| www.761601.com-体彩网排列五走势图| 天下彩www.849770.com| www.0738.net-彩票对打套利的问题| www.182.website福彩3d奖号码| www.299708.com-快三彩票内蒙下载| www.333479.com-彩票转赠中奖| www.12fj.com-合肥市彩票兑奖中心| www.967704.com-手机彩票输了3万| www.ma53.com-时时彩个位必中规律| www.04ny.com-风景画简笔画带彩铅| www.92jk.com-彩票性缘23-| www.139622.com-盈彩网可以玩吗| www.429927.com-利彩华辰-| www.835791.com-好彩三八猜动物| www.974294.com-七乐彩现在游戏规则| www.5eb.cc-彩乃奈奈百度云分享| www.5598.pw-玩彩哪个平台最大| www.592098.com-彩票双色期球开奖查| www.762665.com-博时时彩-| www.842880.com-彩票不蒙面领奖| www.13584.com-足球竞彩胜负平玩法| www.071506.com-虎牌彩票app| www.886850.com-彩61靠谱吗-| 创世纪彩票www.36787j.com| www.865372.com-快三站主会做假吗| www.962216.com-山东体彩排三论坛| 凤凰彩票www.66652h.com| www.pp77.cc-福彩计划软件下载| www.755303.com-网易彩票社区| www.830344.com-qq分分彩怎么玩| www.zk92.com-体彩7位数开奖结果| www.648819.com-网易彩票是-| www.590108.com-中国体育彩票站点| www.847999.com-彩票站广告牌| www.73ii.com-天际彩票平台| www.647305.com-吉林快三庄家| www.271631.com-广东好彩1预测分析| www.8387.top-打彩是什么意思| www.000138.cc-天津好彩打印官网| www.898273.com-彩票扫一扫查询中奖| www.bg81.com-彩票计划师的大揭秘| www.381378.com-买彩票如何选号| www.580915.com-足彩单场比赛购买| www.675687.com-七乐彩预测最准的人| www.781728.com-中了5亿彩票税| www.888206.com-快三赔率-| www.3717.cm-乐盈彩票下载| www.88224.cc-彩民網-| www.136875.com-火箭彩票网ip板| www.384806.com-今天大乐彩票开奖吧| www.801062.com-梧桐彩票下载| www.58214.com-时时彩骗局揭秘| www.156263.com-选彩票神器-| www.133804.com-雷语好彩一-| www.iw98.com-今曰竞彩-| www.005940.com-577彩票下载| www.292169.com-一分钟一期中福快三| www.17578.cc-竞彩足球网易网推荐| www.910003.com-昆明亮彩光电| www.5500.biz-七乐彩4胆10拖| www.067628.com-宏图娱乐彩票骗局| www.984358.com-鸣彩艺术传媒公司| www.955.club-现在哪个彩票最好| www.128899.com-昨天彩票开什么号码| www.677111.com-中国福利彩票装修图| www.016109.com-彩票频道唯彩会| www.278835.com-快三秒奶茶经营模式| www.605711.com-吉祥彩票稳赚计划| www.3805.cm-福彩预测号-| www.oe66.com-彩票中奖号码查询| www.39rz.com-七星彩012走势| www.0982.cc-粤彩网彩票靠谱吗| www.137412.com-竞彩任选九开奖时间| www.7924.me-云来彩票手机版| www.9700.online福利彩票3d购买| www.020279.com-青蛙彩票-| www.116225.com-彩票投注网大全| www.000510.com-微信时时彩怎么坐庄| www.cp9529.com-彩票12-| www.068307.com-福彩快三百度百科| www.p17.net-微信提现彩票| www.3223.mobi-网冠彩下载-| www.388479.com-支付宝还能买彩票吗| www.607739.com-亚洲杯可以买竞彩吗| www.698958.com-华夏彩票合法吗| www.768140.com-福彩好还是体彩好| www.299041.com-慧扑彩票-|