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.203738.com-五d彩票-| www.235793.com-彩票彩票开奖大厅| www.16372.cc-万人彩-| www.72bj.com-高中生可以买彩票吗| www.289753.com-快乐彩34-| www.320054.com-时时彩单机计算软件| www.615748.com-代买彩票犯法吗| www.840093.com-电脑彩正版图片| www.575854.com-牛蛙彩票图彩好| www.739812.com-福彩快乐12加奖金| www.236890.com-彩票网上购买| www.981957.com-微彩娱乐是骗局吗| www.5632.cc-微信群投注彩票| www.004305.com-乐购彩票app| www.2469.vip-手机迷彩兔电影| 大赢家彩票平台www.221095.com| www.677025.com-腊肠彩色包装袋| www.800044.cc-福彩票开奖号| www.273729.com-福彩双色球规划| www.365238.cc-体彩周四彩票开什么| www.492289.com-福利彩票智能机器| www.949906.com-盛典彩票app| 中华彩票www.914903.com| www.471703.com-有台湾5分彩的平台| www.594119.com-竟彩足球500| www.682984.com-福彩3d走势彩吧| www.199253.com-福彩双色球开奖号| www.jt7.com-河南福彩智慧彩| www.04wj.com-画彩铅画的必备工具| www.11141.cc-福彩排列七最新开奖| www.021276.com-竞彩足球彩票胜平负| www.115575.com-彩铅彼岸花教程| www.5714.win-中央2台买彩票| www.591902.com-七星彩二元网| www.172159.com-牛彩网3d图谜| 500彩票www.500227.com| www.526114.com-360彩票工作室| www.8555.date-中彩网原版资料| www.000481.com-手机中国体彩网下载| www.562593.com-开福利彩票店挣钱吗| www.37735.com-兴华彩票靠谱吗| www.365978.com-7星彩开奖查询| www.c90.net-微信买彩票赚钱| www.37cp.com-鑫彩晨科技怎么样| www.555.me-三分彩时时彩| www.4040.xyz-七星彩质合路走势图| www.718511.com-彩虹什么意思同性| www.11491.com-彩乐乐彩票网合法吗| www.71514.com-河南幸运彩助手| www.075231.com-500彩票预测| www.199967.com-体彩群英会-| www.872522.com-天天快三开奖| www.095257.com-足彩微信公众号| www.32je.com-多彩宝app缴费下| www.964798.com-时时彩每天稳赚| www.dx97.com-网络私彩代理判几年| www.m17.online-大发快三怎么玩和值| www.63tp.com-众彩网怎么样合法么| www.48177.com-竞彩技巧app下载| www.811516.com-聚丰彩票5070| www.919905.com-彩票网站开发设计| 彩票大家乐www.21202y.com| www.007879.com-公益福彩今日盈亏| www.158453.com-好彩0567靠谱吗| www.286024.com-福彩三d解太湖汇总| www.003539.com-网上买彩票叶面| www.182412.com-500vip彩票-| www.021618.com-信彩票-| www.126207.com-菜彩票开奖查询| www.225939.com-天天中彩票没人管吗| www.356367.cc-买彩票花了上百万| www.283583.com-七星彩中五个好| www.595154.com-虎扑体育足彩论坛| www.672422.com-七星彩上期预测| www.753348.com-k8彩票网站正规吗| 博亿彩票www.699by.com| www.228891.com-河南快三追号| www.365386.cc-福彩4码遗漏| www.145717.com-彩票破解手机软件| www.285399.com-买快三什么意思| www.573838.com-在深圳福利彩票利润| www.681216.com-买七星彩赚钱骗局| www.782549.com-2元彩票网百度| www.859457.com-七乐彩单式开奖规则| www.938615.com-福彩快三必中的方法| 亚投彩票www.ya013.com| www.fl87.com-手机福彩下载| www.297779.com-甘肃彩票11选五| www.531921.com-彩票33带上岸| www.386390.com-999彩票苹果版| www.514378.com-七星彩大公鸡软件| www.608536.com-皇冠派彩-| www.971493.com-我的彩票开奖查询| www.cp5561.com-彩票快三有口诀吗| www.mm26.com-时时彩人工计划51| www.r25.net-江苏福彩玩法| www.52853.com-博彩广告站-| www.107398.com-500彩票辅助投| www.183084.com-江苏福彩快三下载| www.251354.com-中彩怎么搜不到了| www.317797.com-吉林省快三推荐| www.381576.com-私彩量刑-| www.478283.com-买彩票世界杯| www.543.cn-好易终端彩票兑奖| www.5670.pw-正规彩票排行榜| www.125040.com-坚守梦见的彩票中奖| www.200044.com-幸运彩app下载| www.035321.com-至尊彩一-| www.166459.com-快三开奖结果吉林| www.940075.com-休彩超级大乐透| www.4177.cn-七彩国际大酒店| www.40777.com-一定牛彩票是真是假| www.71833.cc-购彩软件大全| www.y11.cc-排列三乐彩字谜图| www.881504.com-辉煌彩票是骗局么| www.949257.com-如何理解责任彩票| 日彩网www.rcw8866.com| www.673278.com-古建彩绘沥粉的工具| www.739794.com-快乐彩票网官方端口| www.797959.com-易彩补漆笔怎么样| www.1054.live-彩票卖一张赚多少钱| www.322712.com-一网彩票安全吗| www.388301.com-福彩3d杀号王杀码| www.ig44.com-正规官方彩票软件| www.60nj.com-福彩和差表-| www.237964.com-福彩快三有没有规律| www.331239.com-趋势王彩票-| www.397829.com-章鱼体育彩票| www.503128.com-体彩玩法一胜一负| www.565208.com-彩票频道万彩吧| www.617326.com-彩票赌大小反倍投法| www.671031.com-百度彩票是真的吗| www.730823.com-牛彩纽约登录地址| www.789397.com-篮球竞彩分析app| www.133339.com-下载彩视-| www.202331.com-贵阳体彩-| www.290768.com-彩票计划软件破解版| www.422178.com-彩59彩票下载安装| www.521673.com-喝彩中华主持人| www.760076.com-南洋彩开奖结果查询| www.5491.com-双彩i论坛-| 福彩www.26878s.com| www.v46.site-排列三众彩网今天| www.cai9622.com福彩精彩十分玩法| www.112273.com-注册送33彩票| www.694682.com-中国足彩网百家欧赔| www.ya46.com-七星彩彩-| www.301434.com-周五开奖的彩票| www.291435.com-鸿彩五分快三| www.257888.com-大胜彩票app下载| www.313410.com-华夏彩票客户端下载| www.448776.com-山西福彩客服电话| www.823108.com-福彩3d研究方法| www.508770.com-彩16合法吗-| www.599976.com-买彩票输了如何回本| www.961417.com-七乐彩怎么计算奖金| www.202395.com-重庆贵族快三多少期| www.125049.com-彩票真能中奖| www.050180.com-福彩3d玩黑彩方法| www.0239.pw-3d彩报今天-| www.127584.com-彩虹玫瑰存在吗| www.009435.com-新彩网手机版下载| www.157166.com-易彩票app合法吗| www.284259.com-全部彩种下载|