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.788442.com-彩要开奖结果| www.7899.cm-斐波那契数与彩票| www.37681.cc-九万彩票安卓| www.99179.cc-腾讯分分彩是正规吗| www.074655.com-彩6下载平台| www.37bx.com-体彩七星彩图片大全| www.2618.in-怎么买五分彩稳赚| www.4574.org-胜负彩机选中奖几率| www.9986.cm-酷彩吧安卓-| www.242989.com-官方彩票投注平台| www.365651.cc-房子彩铅绘画作品| www.2wm.com-怎么举报黑彩票网站| www.008803.com-福利彩票购票api| www.800155.com-全国彩票开奖结果l| www.889501.com-七乐彩票是什么鬼| www.964881.com-英快三走势图带连线| 天下彩www.890402.com| www.oi62.com-体彩大乐透奖金查询| www.084971.com-最新彩票ios版| www.033693.com-7星彩机选一注| www.209314.com-老鹰网彩票合买| 十三国际www.578113.com| www.865781.com-河北七星彩开奖结果| www.961758.com-支付宝买不了彩票| www.cp970.cc-安徽省快三形态| www.222259.com-彩票软件手机版| www.771409.com-体彩任选5-| www.875924.com-幸运时时彩是骗局吗| www.953104.com-手机福利彩票下载| 乐彩赢www.0014r.com| www.mk16.com-彩票网站大全app| www.617806.com-彩礼返还的法律规定| www.963613.com-彩铅风景画教程| www.242164.com-网上彩票网址有哪些| www.391980.com-手机可以买足彩吗| www.633552.cc-462彩票-| www.730832.com-快发彩票app下栽| www.848861.com-快三是即开型彩票吗| www.939266.com-足彩开奖结果| 网易彩票www.177806.com| www.sa18.com-福彩app官方| www.31rg.com-爱彩彩票怎么注册| www.1454.cc-奥客竞彩足球直播吧| www.896087.com-怎么下载吉林快三| C9999www.318548.com| www.974103.com-环球彩票不能提现| www.4707.net-有钱人买彩票| www.533370.com-体育彩票365安卓| www.yd39.com-双色球派彩每日推荐| www.2079.vip-彩票包赔是什么意思| www.093901.com-时彩宝典软件下载| www.294433.com-彩牛彩票客服端| www.pf59.com-快三中豹子多少钱| www.hz95.com-快三单双大小买法| www.bg08.com-如何看快三走势规律| www.vl82.com-体育彩票快三奖励| www.517930.com-中国中彩票几率大吗| www.678885.com-快购彩票下载安装| www.832587.com-桃屋猫三国梦想星彩| www.982217.com-福彩九加五多少钱| www.xd69.com-江苏快三所有号| www.097700.com-快三吉林长春| www.188099.com-彩票跨度规律| www.gi70.com-快三秒奶茶小时候| www.158.cn-合肥彩票店-| www.8025.com-炫姿彩茶麸神洗| www.499609.com-8号彩票软件安全吗| www.92375.com-发展竞彩客户端| www.43ad.com-重庆时彩怎么看号| www.558767.com-彩虹的约定下载| www.262623.com-福彩定位胆玩法技巧| www.346360.com-彩票走势图时时彩| www.cai9799.com内蒙古快三号码推荐| www.86879.cc-怎么戒掉买彩票| www.473258.com-彩票大奖有重复的吗| www.602061.com-银魂中3亿彩票| www.812282.cc-竞彩店怎么赚钱的| www.j58.win-湖北福彩开奖| www.84rp.com-彩票解码器-| www.41586.com-福利彩票破解| www.959186.com-彩民周刊彩票服务| 名门彩www.33997t.com| www.ko77.com-彩500大发快3| www.r17.me-中福快三是私彩吗| www.022428.com-买彩票的搞笑句子| www.024853.com-福刮彩票开奖结果| www.947571.com-体彩福彩八挂图| 梦想彩票www.33112t.com| www.134678.com-南通体彩中心在哪| www.249122.com-腾讯彩票下载| www.379121.com-双彩网赚钱是真的吗| www.537589.com-彩色的梦生字组词| www.550888.cc-凤凰彩票40088| www.657122.com-中国体彩消消乐| www.811027.com-福利彩票客服| www.965154.com-体育彩票5+2| www.nc55.cc-爱彩乐app怎么样| www.443543.com-搜索青蛙彩-| www.rw57.com-安徽福彩网首页| www.6463.org-上海市福利彩票站点| www.658089.com-e足彩开奖结果| www.in69.com-1360彩票-| www.89.com-辽宁七彩快三计划| www.84dq.com-大师彩票官方| www.987018.com-彩票猜大小规律| www.612934.com-彩票数字3开奖| www.770485.com-重庆时时彩老后局| www.895028.com-新世界时时彩助手| www.fl58.com-微信里怎么买彩票| www.4kj.cc-天天爱彩票密码找回| www.00065.com-商标彩色包装袋| www.65995.cc-3d彩票预测网站| www.76hp.com-造假彩票网-| www.1926.vip-时时彩单式500注| www.6885.org-3218彩城-| www.070370.com-大发快三如何预测| www.454131.com-彩票网258-| www.630551.com-3d彩吧彩报第三版| www.727654.com-彩之王app下载| www.835989.com-顺丰彩票中奖率高吗| www.909678.com-福彩3d技巧大全| www.985198.com-玩彩输了怎么办| www.iz70.com-福彩七乐彩玩法介绍| www.9qh.com-微博彩票合法吗| www.81kt.com-竞彩单场套利| www.2729.win-成都福彩咨询电话| www.8595.org-ok精彩朱正廷| www.654661.com-福彩7加5多少钱| www.784024.com-彩票犯罪-| www.906379.com-捕鱼送彩金-| www.ko.cc-极速快三预测| www.403335.com-林州市结婚彩礼多少| www.bm68.cc-128彩票-| www.509772.com-博彩汇娱乐平台登录| www.23066.cc-福彩彩票谜语版| www.19778.com-嘉兴体育彩票征召点| www.58113.com-网上体彩投注app| www.955.cm-彩票最-| www.980345.com-我附近的福利彩票店| www.oe36.com-彩票送18-| www.183951.com-浙江快三开奖结果| www.32597.cc-河南和重庆结婚彩礼| www.24gy.com-好彩客微信群| www.13085.com-足彩8串28计算| www.632290.com-彩票怎么中奖呢| www.gu99.com-7彩网是骗局吗| 500彩票www.66653p.com| www.527759.com-时时彩任二怎么玩| www.367095.com-彩铅橘子的画法教程| www.513855.com-网络买彩票靠谱吗| www.fx95.com-彩民群-| www.53mf.com-体彩七位数开奖日| www.378885.com-好彩一选号技巧| www.375018.com-海南飞鱼彩票推荐| www.670365.com-精彩十分中奖| www.159259.com-小v彩仙网址| www.376835.com-福彩36选7玩法| www.2929.in-彩票投注站装修设计| www.026192.com-开私彩怎么判刑| www.234175.com-安徽省福彩领奖流程| www.566152.com-彩虹6号配置检测| www.828484.com-彩票99网址-| www.18296.com-时时彩手机助手| www.46726.com-好彩3复式计算公式|