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.909964.com-彩界小狂人-| www.815350.com-江苏体彩排列七| www.410549.com-七彩球怎么拼装视频| www.557762.com-双色球杀红球彩经网| www.667621.com-彩票官员查处几十位| www.788024.com-体彩任三中了多少钱| www.011655.com-2345彩票走势图| www.109976.com-快三中俩号有钱吗| www.757435.com-购彩团队-| www.871969.com-七星彩31期-| www.964772.com-彩七七-| 500彩票www.961287.com| www.633040.com-竞彩篮球2串1稳赚| www.948297.com-天齐彩吧-| 杏彩www.00840y.com| www.jj93.com-福彩幸一二开奖河南| www.a26.club-彩票投注app下载| www.33rl.com-中国福彩10选5| www.1091.net-今日福彩字谜定位三| www.087370.com-辉煌彩票劫持| www.853917.com-多彩彩网38116| www.961031.com-安徽福彩网快三| www.242.cm-时时彩一星做号技巧| www.5122.pw-七星彩论坛海南彩区| www.658879.com-新彩网3d字谜总会| www.181544.com-中国快三投注| www.846111.com-私彩破案追回| www.930763.com-快三每天有豹子吗| 好运彩吧www.025728.com| www.956.tv-七星彩如何才算中奖| www.45704.com-彩票机号-| www.822757.com-爱马仕蓝彩星光香水| www.444534.com-彩票怎么看中奖号| www.566759.com-创银彩票-| www.637676.com-9811彩票-| www.2872.top-网上玩黑彩犯法吗| www.69453.com-凤凤彩票-| www.647769.com-95快彩app软件| www.723046.com-藏宝阁丨4s彩票| www.792805.com-彩票中奖符怎么用| www.864008.com-123彩票提不了款| www.924923.com-凤凰彩票官网| www.978781.com-好彩高手论-| www.c0.me-幸运快三三不同号| www.mm64.com-排列三试机号彩宝网| www.027992.com-鸿彩网下载-| www.522552.com-分分彩怎么看大小| www.654334.com-彩之源是骗人的吗| www.74gh.com-买彩票漏洞是怎么玩| www.456296.com-腾龙时时彩做号新版| 500彩票www.50051l.com| www.39503.com-七星彩好的号码推荐| www.540505.com-福彩试机号及金码| www.718236.com-彩库宝典新开奖结果| www.871447.com-桂平彩票中了2亿元| www.948599.com-武汉福彩-| 博友彩www.371o.cc| www.hj33.com-福彩快开自助| www.06nl.com-兰州福彩一等奖| www.148820.com-牛彩l网3d字谜| www.652872.com-重庆时时彩91计划| www.801866.com-刺客论坛3d彩经网| www.037470.com-信彩网页计划| www.222381.com-全天幸运快三计划| www.1079.cn-高手网彩票大全| www.763527.com-招聘足彩分析师| www.355236.com-昆山体彩中心地址| www.458220.com-彩票独胆是什么意思| www.551775.com-周一彩票-| www.621054.com-乐盈网彩票| www.690902.com-竞彩结果-| www.144659.com-广西双彩最新开奖号| www.056178.com-福彩p六二开奖结果| www.141.cx-夸人可爱彩虹屁| www.21981.cc-约彩鸾归去-| www.11057.com-蓝鲸彩票-| www.65956.com-缅甸好彩柠檬双爆珠| www.256240.com-易盈彩票苹果版| www.222711.com-安徽体彩11-| www.075352.com-达人彩票不靠谱| www.64tn.com-发微信买彩票中奖| www.3438.org-快三单双数据分析| www.08886.cc-彩票天天中奖靠谱吗| www.57833.com-博友彩票正规合法吗| www.028843.com-亿彩堂官网-| www.03oa.com-彩经网双色球预测号| www.523735.com-时时彩在哪里下载| www.9948.cn-温州彩礼一般多少钱| www.95703.com-竞彩8串1返还率| www.426644.com-体彩排列三布衣精华| www.987891.com-中彩手app下载| www.ih21.com-快乐彩app下载| www.p98.cc-今天体彩排五开奖号| www.104744.com-江苏快三追号计划| www.7222.hk-彩虹娱乐棋牌下载码| www.22828.cc-手机上怎样买彩票| www.177184.com-快三大奖彩票| www.sv07.com-彩票数字的周期循环| www.642510.com-体彩彩票代码字母| www.8785.biz-小炮七星彩开奖| www.057377.com-江苏福体彩-| www.999039.com-彩乐汇彩票合法| www.lz29.com-青海快三077预测| www.108637.com-为什么调整高频彩| www.222433.com-超准彩票计划| www.553549.com-网上买彩票怎样屠龙| www.639935.com-东方竞彩app| www.758895.com-微彩点播厅-| www.530411.com-百度彩票公告开奖| www.120657.com-体彩兑奖有提成吗| www.898345.com-百彩网手机资料大全| www.e01.pw-足彩中几个亿会吗| www.46676.com-时时彩平台免费出租| www.gq52.com-易彩快三走势图| www.812191.com-福彩3dqq群号| www.364004.com-彩票开奖安征快三| www.347261.com-在私彩做代理违法不| www.459558.com-重庆彩时时彩下载| 中国福利彩票www.3478s.cc| www.590810.com-彩票开奖查询奖| www.127906.com-彩虹倒带歌词对比| www.180344.com-外蒙快三走开奖结果| www.136165.com-怎么买彩票暴富| www.18158.cc-竞彩完场比分完整版| www.55702.com-彩票号码有规律吗| www.839838.com-对福利彩票的认识| www.054825.com-中国竞彩比分直播| www.188520.com-买彩大厅-| www.80448.cc-吉林快三微信投注群| www.169995.com-河南快三开奖查询| www.183508.com-今日快三河北走势图| www.960887.com-七乐彩查询-| www.311930.com-彩票提醒软件| www.406407.com-云南彩礼多少| www.281098.com-非法经营网络彩票| www.32an.com-昨儿彩票出的什么| www.485163.com-体彩选数原理| www.741705.com-彩宝时时彩官方网站| www.115590.com-澳客网足球彩票胜负| www.468864.com-百度福彩开奖| www.563553.com-q彩是合法的吗| www.635209.com-购买重庆时时彩平台| www.628883.com-好彩客破解-| www.771266.com-香港八卦幺机彩| www.120900.com-竞彩足球兑奖期限| www.0999.org-胜负彩军长推荐| www.209525.com-河北福彩排列5开奖| www.63353.cc-彩礼不能超过两万元| www.17at.cc-彩曜石真假对照图| www.77sw.cc-六台彩迷宫在哪看| www.380708.com-七乐彩开奖是几点| www.zp66.com-新强时时彩助手| www.776766.com-彩宝宝官方-| www.6638.biz-彩86app入口| www.913156.com-彩民之家l资料大全| www.964209.com-福彩网是不是正规的| 大玩家彩票www.84499b.com| www.nj91.com-内蒙古快三和尾振幅| www.t02.cc-福彩和值技巧大全| www.666975.com-乐彩8603cc-| www.89961.com-机选七星彩模拟| www.865891.com-网易彩票不更新开奖| www.948337.com-体彩管理中心工资| 彩乐乐www.cll168.com|