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天

知道了
亚洲28 www.5541.net-可以买足彩软件| www.008967.com-云南七星彩兑奖地点| www.653960.com-下载福彩快三助手| www.781666.com-快三输钱能不能帮我| www.869638.com-体彩扑克牌豹子多钱| www.955441.com-黑彩票平台破解器| 开心彩票www.398793.com| www.qv71.com-分分彩计划-| www.41wy.com-足彩胜负平计算器| www.429379.com-利彩彩票怎么样| www.655919.com-玩彩票怎么玩不赔| 大玩家彩票www.315019.com| www.509578.com-爱投彩票是什么| www.829974.com-o1彩票官方-| www.947861.com-海南竞猜型体育彩票| 大赢家彩票网www.54400f.com| www.113949.com-福彩双色球兑奖金额| www.251098.com-彩经彩票app| www.360630.com-江苏快三有多少期| www.488110.com-彩神卷纸uv机| www.660052.com-七星彩解梦图册| www.931969.com-手机699彩票下载| www.612356.com-南京雪中彩影| www.741037.com-探探投彩诈骗| www.892972.com-彩票缩水过滤| www.cr93.cc-大发优彩网-| www.35tk.cc-辽宁福彩走势图| www.17328.com-彩虹竞彩app| www.83109.com-最新一期彩票中奖号| www.893133.com-彩做号-| www.971315.com-网上江苏体彩网首页| www.ad02.com-大智慧网福彩走势图| www.h59.club-博皇走势预测快三| www.64jl.com-众彩网是什么东西| www.2233.me-下彩彩票app苹果| www.8905.org-竞彩冷门中奖| www.818200.com-搜狐彩票合法吗| www.723531.com-常州彩票中奖排行| www.jh18.com-重庆时时彩回血上岸| www.68rb.com-福彩三地太湖谜语| www.5796.vip-体彩扑克牌中奖奖金| www.32379.cc-彩色印刷包装公司| www.159182.com-福彩浙江12选5| www.547041.com-网上赚钱易彩| www.673098.com-因网赌高频彩输死了| www.783308.com-体彩票投注站怎么开| www.888383.cc-上海十一选5爱彩乐| 五星彩票www.5xce.com| www.nt12.com-内蒙古福彩中心| www.54012.com-爱彩人app苹果| www.046650.com-福利彩票店装修图片| www.976641.com-利彩开奖排列三| www.22hc.com-怎么更改彩票余额| www.0245.cc-众乐彩票赢钱容易吗| www.7279.xyz-彩虹六号we战队| www.835367.com-福利彩票双色球26| www.936870.com-溢彩飞扬-| www.998291.com-广州福彩中心地址| www.eo95.com-快三杀号技巧| www.xx81.com-688彩票主页| www.23zy.com-尼彩手机以旧换新| www.0328.top-福利彩票站附近| www.713395.com-3d彩票守号三年了| www.168567.com-福彩快三官网登录| www.526228.com-竞彩顺口溜-| www.47sg.com-彩票总站网站| www.0092.cc-买彩票用什么名字好| www.6092.vip-彩博是什么-| www.621841.com-3d福彩社区-| www.138689.com-全天时时彩计划网页| www.282795.com-澳门彩8点3o| www.396163.com-彩虹宝宝动画片视频| www.607730.com-玉泉路福利彩票站点| www.683778.com-体彩有官方app么| www.804660.com-中国体彩幸运之门| www.948235.com-好彩网论39492| www.18ea.com-体彩排列五获奖结果| www.89565.com-日免软好彩多少钱| www.080714.com-彩票资讯彩客网推荐| www.cp3391.com-现在内蒙快三走势图| www.a87.me-彩虹伞亲子游戏| www.103331.com-旺彩网手机版| www.189594.com-河南体彩泳坛夺金| www.266721.com-282天下彩-| www.331232.com-制作趋势彩票软件| www.48324.com-大发时时彩大小计划| www.91358.com-手机炫彩灯-| www.065356.com-彩铅画人物图片| www.164580.com-百姓彩票网论坛| www.233780.com-北京快三最新走快3| www.305809.com-易彩是真的假的| www.698946.com-3d开奖结果乐彩网| www.870068.com-网购彩票代理| 500彩票www.356477.com| www.51976.cc-快三买复式怎么算钱| www.133252.com-富彩彩票是正规的吗| www.369280.com-河内彩票骗局| www.497321.com-包赔车彩票-| www.598069.com-福利彩票推算| www.903298.com-95彩票网合法吗| www.986884.com-必中时时彩全能计划| www.im80.com-足彩波胆-| www.762676.com-易彩2.0登录| www.899369.com-博发彩票平台| www.976817.com-菏泽彩礼-| www.cp8577.com-上海福利彩票网| www.597523.com-实用的彩票app| www.409896.com-彩票扑克三怎么玩| www.ov62.com-彩票信息开奖结果| www.96ui.com-鸿博股份彩票软件| www.105906.com-cb8彩宝官方网站| www.234300.cc-赌彩票倾家荡产| www.334808.com-彩八彩票安卓版官网| www.410781.com-彩票平台制作在哪找| www.1810.me-体彩直选三开奖结果| www.9810.live-481彩票中奖| www.44808.cc-360安全彩票| www.363931.com-看见彩虹寓意| www.863710.com-福体彩藏机图谜字谜| www.967731.com-福利彩票往期结果| 购彩堂www.336440.com| www.867373.com-彩票网上全部停售吗| www.962917.com-彩圣字谜汇总| 彩客网www.035168.com| www.363752.com-彩虹色头发-| www.163224.com-大乐透彩民村| www.239835.com-台北快三一分钟一期| www.nq89.com-福利彩票机选号码| www.0543.in-网彩ap-| www.02038.com-快三危害-| www.56172.com-掌中彩骗局-| www.009014.com-166彩票双色球| www.088684.com-彩票哪个平台好| www.6514.me-长城彩下载-| www.25808.com-福利彩票十二选五| www.cp8277.com-江西快三玩法| www.190953.com-正规大发快三| www.274288.com-湖北省快三开| www.335544.com-吉林黑彩案件| www.387921.com-下彩彩票客户端触屏| www.485456.com-快乐分分彩在线计划| www.180358.com-福彩快三中奖概率| www.281503.com-时时彩和值打法| www.370557.com-下载全民彩票开奖| www.501275.com-淘彩站-| www.562923.com-重庆时彩客户端下载| www.465100.com-伪球迷买足彩胜负| www.576843.com-香港福彩字花资料| www.37ft.com-乐购彩票平台怎么样| www.96ux.com-福利彩票兑奖查询| www.2007.date-和彩颜料-| www.6486.xyz-大财神彩票网址| www.05035.com-大胜彩票app| www.49434.com-广西淘宝快三体彩| www.92191.com-竞彩过关计算器| www.041338.com-江苏快三福彩开奖号| www.110463.com-体彩七星彩下期预测| www.160880.com-神州网彩票-| www.221233.com-uu快三全天计划| www.271878.com-中原彩票l下载| www.833932.com-好彩36选3计算| www.933134.com-广东实时彩开奖号码| 中国福利彩票www.34788l.com| www.qf58.com-彩票65-|