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.42250.com-彩经网为什么打不开| www.089610.com-重庆时时彩必输原理| www.223139.com-彩票136期-| www.928957.com-猜冠军彩票是骗局吗| www.332314.com-彩票走势图106| www.481454.com-天下彩正版权威资料| www.613283.com-彩票直通车网下载| www.829203.com-新乐彩票app| www.925873.com-爱乐透彩票不更新| 大赢家彩票平台www.371935.com| www.sl24.com-时时彩五星走势图彩| www.416940.com-福彩双色球是几选几| www.yu37.com-中国彩票和美国| www.26836.cc-七星彩是否有规律| www.85559.cc-台湾彩虹频道直播| www.801204.com-60彩票安裝-| www.394944.com-彩虹app分发源码| www.761666.cc-大玩家彩票平台| www.853789.com-立彩佳美缝剂胡可| www.945766.com-福建体彩中心| www.994978.com-五百万彩票网站| www.ah40.com-昨天彩票开奖号码为| www.82755.cc-陆慧明今日竞彩| www.192316.com-亚博足彩app| www.0744.in-安徽十五选五彩票| www.633366.cc-河南福彩中奖规则| www.747656.com-环彩app正规吗| www.22701.com-手机发送短信买彩票| www.79279.cc-手机快三开奖结果| www.9313.net-17500彩票-| www.277090.com-云购彩票大发快3网| www.268103.com-爱彩乐彩票网正规吗| www.28993.cc-爱普生彩色打印机| www.75003.com-福彩刮刮卡种类| www.558799.com-随时赚彩票app| www.pm52.com-彩涂铝板用途| www.061342.com-彩票中奖网站预测| www.146166.com-玩彩票平刷能赚钱吗| www.218632.com-江苏快三代理加盟| www.864008.com-123彩票提不了款| www.095.biz-泉州福彩中心| www.60553.cc-爱彩乐陕西快乐十分| www.368145.com-如何画芒果彩铅画| www.1027.in-福彩快3全买| www.870003.com-祝福利彩票快三| www.949571.com-运盈彩票骗局| 风之彩www.88fzc.com| www.626479.com-彩民网app登录| www.702768.com-彩店宝下架了吗| www.787197.com-支付宝买世界杯彩票| www.868296.com-今天体彩5d走势图| www.cai767.cc-福彩快三官网| www.643481.com-七乐彩牛材网| www.728908.com-北京28彩票公式| www.803669.com-七星彩算组技巧| www.874630.com-彩票带单包赔骗局| www.952496.com-配送员中彩票| www.c52.cn-福彩体彩今天开奖号| www.075.biz-博彩支付接口| www.974459.com-福彩克星最新字谜一| www.072014.com-竞彩亚盘基础知识| www.53662.cc-时时彩预测app| www.962231.com-福利彩票3d跨度表| www.66699.cc-彩票拍照看中奖| www.602771.com-体彩刮刮乐如7而至| www.699207.com-彩民村心水论| www.794912.com-新彩网3d胆码| www.881042.com-私彩彩票网站出租| www.954901.com-跑马三分彩-| 500彩票www.501324.com| www.22018.cc-彩伦纺织-| www.3304.org-159彩票客户端| www.405475.com-福彩3d栋栋团队| www.688133.com-九州彩票苹果软件| www.4314.org-体彩排五式机号| 吉利彩票www.80075y.com| www.822188.com-彩票可以折吗| www.58mi.cc-福利彩吧彩吧3d| www.22967.cc-王者彩票有什么技巧| www.61bf.com-彩app娱乐-| www.05505.cc-天天快三彩票网51| www.373710.com-下载218王者彩票| www.987624.com-牛彩l网3d字谜| www.994801.com-好彩客最新版本苹果| www.155512.com-开什么彩票店最赚钱| www.331613.com-51彩票下载手机版| www.414003.com-我挂彩了什么意思| www.cb13.com-河南福彩快开彩| www.141317.com-山西彩票快乐10分| www.261041.cc-尊彩网app-| www.71499.com-为何不能网购彩票| www.626334.com-038彩票客服电话| www.753635.com-彩票账户余额| www.cai3277.com玩快三年入十万技巧| www.ik19.com-中国彩票下载手机版| www.wu25.com-送彩金的彩票网站| www.811716.com-双彩网pk10-| www.nz86.com-河南福彩快三技巧| www.kt74.com-内蒙古快三时时彩| www.78967.cc-福彩3d籍秘公式| www.6738.vip-九龙彩票平台| www.26va.com-网易彩票兑奖中心| www.496.date-彩吧vip聊天室| www.94056.com-彩色耐磨地坪漆| www.553622.com-竞彩半全场高手| www.610325.com-体育彩票连串买法| www.720960.com-那款彩票app好用| www.782062.com-网易彩票公司在哪里| www.847253.com-竞彩篮球投注量分布| www.906192.com-彩票出租平台| www.306666.cc-时时彩定胆除32| www.260325.com-网络彩票赌博被骗| www.346434.com-玩大发快三能赢钱吗| www.470555.com-国家授权正规足彩| www.551799.cc-百乐彩网址-| www.604159.com-排列五彩票票花| www.663015.com-北京福彩3d-| www.720268.com-飞马彩票团队群| www.386011.cc-彩票网站出不了款| www.8348.vip-重庆时时采彩5星| www.609528.com-菲律宾搏彩行业| www.4972.top-所有赛马结果及派彩| www.ze01.com-彩49-| www.510557.com-彩虹的约定相似的歌| www.610045.com-福彩3d破解大全书| www.675761.com-中国体育彩票报纸| www.751869.com-手机彩票app用| www.930049.com-香港牛蛙彩票资料| www.992818.com-中彩国际是干什么的| www.li.com-福彩选号助手app| www.636192.com-彩虹六号机票多少钱| www.572336.com-彩迷开奖网-| www.716572.com-彩铅画竹林-| www.803861.com-湖北快三今期走势图| www.jy87.com-彩票2元网电脑版| www.5gv.com-福彩3d今晚开机号| www.313827.com-足彩十四场比分| www.520860.com-体彩群骗局-| www.667785.com-彩票中奖37亿| www.788398.com-中国彩计划网| www.82xe.com-百度福利彩报| www.898137.com-时时彩基本知识| www.966102.com-五等奖体彩多少| www.vx29.com-快三怎么玩最合算| www.012.live-下载亿彩快三| www.180625.com-江苏快三是不是真的| www.356329.com-彩票的原理的规律| www.673600.com-香港快三网站| www.759855.com-云南时时彩开奖号| www.817351.com-福彩30期中奖号码| www.874645.com-最安全的私彩平台| www.932287.com-新2彩票论坛网址| www.984589.com-正规的彩票代购网站| www.cai3177.com江苏快3爱彩乐| www.2134.biz-牛彩网图汇总九| www.206509.com-彩神网多少人被骗了| www.mx78.com-彩票大数据定律| www.45mj.com-彩虹6号百科| www.9285.online吉林快三和值号码表| www.165888.com-贵州快三-| www.536.space-腾讯分分彩玩法秘籍| www.23462.com-中国足彩馆免费视频| www.585217.com-中国彩色宝石网官网| www.317290.com-玩时彩输了六十万|