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天

知道了
1分快三 www.690627.com-体彩排5玩法| www.105871.com-彩宝网8200-| www.272525.com-蛋蛋308彩票| www.06755.com-福彩金胆王一语定| www.449666.com-黑彩网站排名| www.890058.com-快三猜单双技巧| 8号彩票www.60108y.com| www.293579.com-彩神通手机版| www.452054.com-快三分分彩技巧| www.554048.com-晨兴彩票正规吗| www.639401.com-体彩设备押金多少钱| www.723253.com-常州市福彩中心| www.832595.com-三国孙尚香星彩无惨| www.942264.com-彩96注册官网| 500彩票网www.65707t.com| www.306567.com-app购彩网-| www.cai100.cc-快三走势图河北| www.yz03.com-福利彩票25期| www.93084.cc-彩39app下载| www.188628.com-快乐彩22-| www.79071.com-龙凤彩票平台| www.117612.com-500竞彩足球| www.ed9.com-中彩网官网-| www.555748.com-08彩票登录-| 福彩www.16878a.com| www.177616.com-福彩甘肃快三玩法| www.270654.com-福彩七乐彩走势图| www.226680.com-大发快三是合法的吗| www.464829.com-pp彩票是真的吗| www.119384.com-福彩3d能不能倍投| www.698703.com-福彩3d走勢圖| www.514224.com-上海快三结果| www.671666.com-六开彩宝典-| www.858018.com-彩票福彩体彩| 天地彩www.2tdc.com| www.0451.com-怎么弄网址平台彩票| www.06473.com-非凡彩票主页| www.06790.com-复式彩票如何算中奖| www.25743.com-体育彩票世界杯赔率| www.7668.net-福彩双色球广告图片| www.964796.com-125彩票是什么啊| www.de33.com-appcp快三-| www.zp15.com-胜负彩专家分析预测| www.46ll.com-亚洲彩-| www.565220.com-体彩软件哪个好| www.658226.com-彩视为什么注册不了| www.810633.com-彩票老店主今日推荐| www.887886.com-派彩11选5走势图| www.975292.com-汇彩网大发快三| www.aa19.cc-厦门快三实时开奖| www.599062.com-福彩今晚开奖号码是| www.951241.com-信誉彩票平台有哪些| 凤凰彩票www.712012.com| www.50uf.com-足彩复式过滤| www.022582.com-体彩杀跨断组预测| www.4964.cm-彩猫龙猫-| www.502912.com-京彩注册邀请码| www.750.cn-怎样下载彩库宝典| www.9801.me-七星彩19014期| www.72594.com-吉林省几个福彩中心| www.088080.com-亿彩网址登陆| www.063289.com-体彩店转让最新信息| www.8427.vip-今日天开1彩票中奖| www.121621.com-彩票历史开奖查询| www.692087.com-彩乐乐选号-| www.659834.com-华南地区七星彩论坛| www.833760.com-好彩丨开奖查询| www.918543.com-外国博彩app| www.999316.com-快三组合投注概率| www.qw31.com-时时彩软件平台| www.13af.com-520彩票网址| www.0871.space-福利彩票购彩平台| www.91897.com-好彩1投注单| www.299579.com-凤凰彩票不能提现| www.406062.com-七星彩500特| www.505979.com-体彩中心案-| www.576114.com-彩32下载-| www.657034.com-彩贝棋牌客服| www.721599.com-足彩单场胜负彩| www.800053.cc-褔体彩开奖结| www.872295.com-乐彩网下载安装| www.967581.com-体彩大乐透咋选号| www.aq59.cc-贵州彩票11选五| www.11362.cc-竞彩天天手环| www.58186.cc-福彩三d字图迷汇总| www.018776.com-足彩任九过滤软件| www.078030.com-福彩假吗-| www.222645.com-福彩3d专家-| www.275782.com-极速时时彩怎么老输| www.bo64.com-易彩网网址是什么| www.555043.com-彩票怎么中上亿| www.675281.com-彩票排列五走试图| www.756475.com-福彩十五选五号码| www.833828.com-天天中彩吧字迷| www.906531.com-分分时时彩万位技巧| www.973484.com-彩虹壁纸少女心| www.cp437.com-甘肃快三一定牛荐号| www.bo64.com-易彩网网址是什么| www.403895.com-婚嫁彩礼的规定| www.69192.cc-团彩网app下载| www.67qw.com-化妆品彩妆全套套装| www.no78.com-福彩兑奖流程| www.89hp.com-私彩跟官方串通| www.50cz.com-彩娱乐可靠吗| www.149443.com-51中彩官网-| www.336913.com-冮苏快三推荐| www.py89.com-盗窃彩票的案例| www.id22.com-哪里可以买彩票| www.881.net-快三彩票止损方法| www.379325.com-尼彩手机电池| www.877033.com-彩票检测-| www.072996.com-世界彩票大奖排名| www.242478.com-广西快三冷热号| www.et58.com-江苏快三外挂| www.18hm.com-三d福彩开奖结果| www.1221.in-全民双色球彩票官网| www.292577.com-北京快三高频开奖| www.423604.com-七星彩单双图| www.491513.com-腾讯十分彩开奖图| www.607853.com-3d彩吧助手走试图| www.679035.com-糖果派对四个彩金图| www.753951.com-网络彩票坑死了| www.831360.com-九龙心水彩票| www.898220.com-香港致富彩生肖| www.259094.cc-中国足球彩票玩法| www.363551.com-湖南福彩中心兑奖室| www.vu55.com-快乐彩开奖图| www.tg7.cc-彩票开奖双色球中奖| www.9883.in-36o彩票走势图| www.237138.com-今日足球竞彩推荐| www.517539.com-我爱彩票07-| www.7981.org-天牛图库综合彩报| www.950577.com-乐彩客app苹果| 500彩票网www.896010.com| www.493820.com-营口彩票站出兑信息| www.949893.com-8炫彩彩票如何玩| www.051196.com-可以彩票合买的软件| www.0760.win-铁公鸡七星彩软件| www.20033.cc-彩经网安徽快3| www.201426.com-彩票投注平台| www.294226.com-皇冠彩票登录端| www.797.name-新3d彩五分钟一期| www.7363.cc-哈市体彩出兑| www.252422.com-手机全民彩票可靠吗| www.52862.cc-彩神ll外挂-| www.031931.com-黑彩代理可以拿平台| www.88001.com-世纪佳缘彩票托| www.cp419.cc-私彩买到多少违法| www.982376.com-重庆体彩百变王牌| www.ak91.com-吉林市3彩票| www.626334.com-038彩票客服电话| www.734911.com-91彩神登不上| www.802301.com-精彩大片app| www.878401.com-时时彩任三组选玩法| www.952843.com-旺彩预测大全| 澳客网www.okw2.com| www.hx15.com-彩乐汇是骗局揭秘| www.714.in-多宝彩票手机版下载| www.096235.com-好彩网论39492| www.766028.com-时时彩10分钟一期| www.880688.com-009彩票网-| www.953090.com-体育彩票世界杯| 日彩网www.rcw567.com| www.012030.com-体彩排列三画谜|