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.50105.com-悟空彩票app| www.162580.com-什么彩票网站好| www.974160.com-网彩什么时候恢复| www.yr95.com-澳门快三走势图| www.578445.com-佛山体育彩票中心| www.700003.com-98c彩票网-| www.803055.com-利盈彩票是真的吗| www.332304.com-买彩票要多少钱一张| www.025389.com-极速快车是什么彩票| www.87618.cc-天下彩票大全看图| www.093633.com-彩世界app苹果版| www.874676.com-大同彩票网站| www.960765.com-注册送16元彩金| 彩神帝www.598300.com| www.128526.com-超级彩票16亿| www.591820.com-977彩票平台苹果| www.695791.com-足彩m串n对照表| www.840344.cc-福彩销售怎么返点| www.908073.com-彩票预测七星彩电话| www.984225.com-3d字迷新彩网| www.bi83.com-冠军彩票送彩金| www.4107.com-讨论彩票输钱| www.707004.com-辽宁全运彩11选5| www.067972.com-云彩票-| www.3418.org-好彩酒楼江北店| www.12909.com-运盛彩票网-| www.791533.com-宝乐彩提现-| www.890676.com-倍率高的彩票网站| www.959753.com-世纪佳缘彩票骗局| 凤凰彩票www.55228j.com| www.nr06.com-福利彩票选号的工具| www.23bz.com-韩国彩票818期| www.698.cn-竞彩足球怎么看不懂| www.299140.com-吉林省彩票管理中心| www.397601.com-3d彩票今天图纸| www.469061.cc-重庆时时彩第9期| www.576316.com-轩彩娱乐登录入口| www.057217.com-一分快三开挂软件| www.133368.com-一举成名天天好彩知| www.254512.com-十一选五上海爱乐彩| www.896671.com-彩票小程序-| www.830971.com-排三新彩网手机站| www.16gw.com-江西快三直播开奖| www.8197.cc-彩票九苹果下载软件| www.984868.com-玩长城彩票挣钱吗| www.ax25.com-彩票的玩法介绍大全| www.xr12.com-身无分文中彩票| www.14ta.com-彩届联盟-| www.33691.com-福彩高频助手| www.550762.com-福彩追号技巧| www.739001.com-体彩福彩全假的| www.338164.com-哪个彩票软件能合买| www.436682.com-福利彩票103| www.558680.com-彩博888怎么样| www.9340.cc-有线电视球彩台| www.45444.cc-彩票站中奖话术| www.su90.com-体彩七星怎么算中奖| www.611148.com-一分快三倍投公式| www.477003.com-时时彩福少做号软件| www.360246.com-大数据彩票app| www.481890.com-亿彩安卓软件| www.572619.com-今晚福彩三d试机号| www.220061.com-吉林快三豹子遗漏| www.180559.com-南京福彩快三走势图| www.183216.com-一分钟快三开奖结果| www.67lr.com-体彩七星彩开奖记录| www.593850.com-竞彩即时比分010| www.696455.com-竞彩网是不是正规的| www.593228.com-彩虹六号豪华版有啥| www.831170.com-2019实体彩票站| www.973035.com-彩虹世界官网网址| www.cp9551.com-中彩网安全吗| www.663871.com-七星彩2288-| www.773810.com-福彩三g走势图| www.863276.com-大智慧彩票股| www.cp3388.com-江苏快三是假的| www.889388.com-网易彩票手机端| www.971624.com-中华彩票网址app| www.hv63.com-五分快三历史开奖| www.g87.me-彩店宝-| www.603916.com-福彩了d-| www.258710.com-波叔足彩-| www.365866.com-自学彩铅画的书| www.265116.com-福彩三地现场直播| www.535580.com-七星体彩开奖30| www.814544.com-彩票游戏开元棋牌| www.06cb.com-彩铅混色教程| www.788012.com-手机qq彩票-| www.862620.com-周五开什么彩票开奖| www.934701.com-快三怎么下载走势图| www.987878.com-上海快三计划官方| www.hd47.com-中国福彩快三湖北| www.578389.com-濮阳体彩中心电话| www.88435.cc-英国彩票网-| www.125649.com-厦门吕一鸣彩票| 大赢家彩票平台www.591733.com| www.eo36.com-北京快三交易平台| www.069322.com-中国体彩七-| www.141133.com-中彩双色球擂台赛| www.103200.com-华东福彩6十1| www.200164.com-214彩票-| www.2468.in-传统足彩258网| 七乐彩票www.qilc0.com| www.93978.cc-福利彩票贵州站| www.144058.com-双色球彩票兑换期限| 爱购彩票www.3552f.com| www.650192.com-海南体彩4十1开奖| www.772064.com-派彩电子走势图代理| www.773965.com-彩博888官网| www.085841.com-新重庆时时彩走势| www.223776.com-福建体育彩票官网| www.255850.com-福彩3走势图表| www.350796.com-彩晶膜多少钱| www.066982.com-黑彩有哪些app| www.136435.com-两分钟开一次的彩票| www.018408.com-彩71彩票网-| 新盈彩www.xinyc8.com| www.846.in-3d家彩-| www.584411.com-中国推荐的彩票软件| www.672797.com-休闲快三九寨红叶| www.70yp.com-时时彩牛牛两面| www.936511.com-彩票淘宝-| www.993486.com-足彩开奖时间每天| www.tn8.cc-快三时时彩票| www.so12.com-七乐彩杀22码| www.838012.com-海安彩票大奖| www.992104.com-手机时时彩k线图| www.tq81.com-彩票平台代理刷佣金| www.94ka.cc-手机365彩票| www.400638.com-乐彩客旧版本| www.947056.com-福彩高频要取消吗| www.994919.com-0500彩票官方版| www.ge0.com-河北福彩快三官网| www.ns92.com-福利彩票43期| www.75zu.com-福彩3d天罡八卦| www.316053.com-虹口竞彩网点| www.19300.com-牛彩网图迷-| www.409831.com-米彩和昭阳的电视剧| www.557401.com-彩票走势大全安卓版| www.236196.com-彩乐乐彩票下载安装| www.366594.com-福彩昨日开奖结果| www.540678.com-山东彩票app下载| www.617207.com-省体彩中心兑奖地址| www.727433.com-大爆奖彩票是真的吗| www.715625.com-福彩3d今天校验码| www.93479.com-心理五快三良| www.939060.com-信阳千万彩票无人领| www.998365.com-清乾隆多种釉彩大瓶| www.vd8.cc-乐和彩-| www.rg56.com-彩6彩票-| www.2727.mobi-汉中彩票大奖得主| www.090365.com-摩登彩票-| www.223748.com-广东体育彩票官网| www.291168.com-彩票三十六选期开奖| www.346809.com-明彩电视是杂牌吗| www.12100.com-今日福彩中奖结果| www.817668.com-福客来彩票官网| www.fl85.com-奥克网足球彩票| www.026357.com-彩票邀请码大全群| www.289351.com-今天七彩奖开奖结果| www.oy42.com-河北省快三开奖| www.83935.com-如何看待高价彩礼| www.100309.com-禁止出售彩-| www.25628.cc-福彩七乐彩玩法说明|