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天

知道了
彩01彩票 www.87373.cc-苏宁彩票ap-| www.81851.com-中发彩票怎么赚钱| www.226836.com-湖北彩票假球案| www.535477.com-六位数的彩票有吗| www.682469.com-网上买足彩放开了吗| www.883138.cc-pc彩票可靠吗| www.31819.cc-东方彩票投入梦想| www.023522.com-彩票不亏损刷流水| www.302422.com-幸运彩栗-| www.479308.com-99福彩是真的吗| www.643911.com-山东分分彩开奖号码| www.871943.com-时时彩缩水安卓工具| www.cp2855.com-福建体育彩票| www.618428.com-彩票机中奖显示什么| www.209344.com-黑彩怎么干-| www.356012.com-彩票的数学知识| www.545769.com-福利彩票向谁申请| www.799720.com-玩彩票平台犯法么| www.984830.com-彩票开奖幸运选号| www.vb84.com-3d彩吧图库丹东| www.52956.com-买福彩用什么软件| www.35263.cc-58.cc赢彩网| www.xg31.com-香港赛马会博彩公司| www.192009.com-江苏彩经网快三| www.343709.com-乐彩网工具-| www.9785.vip-排三体彩试机号今天| www.222252.com-彩票下载117| www.572361.com-彩票开奖计划软件| www.771963.com-东方彩票平台登录| www.m53.cn-头奖彩票网贴吧e| www.825722.com-山西太原快三走势图| www.664515.com-人物彩铅画教程| www.585310.com-福彩三弟试机号| www.805699.com-九盛彩票是正规的吗| www.921098.com-天才彩女专家专栏| www.948348.com-牛彩网大全-| www.51712.cc-彩票倍投表-| www.315374.com-彩虹棋牌比机有挂吗| www.537231.com-彩票的危害-| www.732913.com-体彩19048期| www.32ph.com-赫斯缇雅全彩本子| www.24300.com-尼彩i5-| www.102897.com-k彩福地网站| www.507179.com-分分时时彩开奖规律| www.644040.com-风彩彩票可靠吗| www.849220.com-辽宁体育彩票客户端| www.um5.com-快三预测网-| www.2843.org-上海快三开奖转盘| www.24043.com-神采争霸快三下载| www.655841.com-小财神彩票论坛分析| www.358738.com-23彩票-登录| www.160779.com-快发彩票线路| www.96392.com-福彩百度文库| www.06076.com-彩票代投兼职靠谱吗| www.273293.com-福彩是事业单位么| www.976277.com-高价彩礼违法吗| www.070660.com-彩神ⅴlll-| www.297197.com-有导师代买彩票挣钱| www.560068.com-杨彩票看号预测快三| www.003406.com-快三大小单双有概率| www.263697.com-大通彩票路线导航| www.804442.com-cp彩票怎么样| www.7710.cc-天下彩开奖结果表| www.987.ren-够力七星彩安卓| www.028936.com-通宝博彩-| www.133977.com-河南快三兑奖日| www.237429.com-吉林快三微信群97| www.41is.com-今天3d彩报纸| www.6507.vip-福利彩票双色球赔法| www.31242.com-时时彩定位胆算法| www.z94.club-神彩网论纭-| www.921288.com-彩票平台彩神| www.623976.com-下载春秋彩票直营厅| www.182237.com-极速快三开奖历史| www.237587.com-下载中国福利彩票| www.cw92.com-431彩票-| www.38aw.com-河南福利彩票跑号码| www.0311.pro-全球彩票产业| www.610266.com-淘宝不能买彩票了| www.460909.com-禁止出售世界杯彩票| www.894822.com-信彩网湖北快三计划| www.920788.com-彩票双胆怎么算出来| www.022315.com-时时采彩app下载| www.2106.org-彩虹七号什么游戏| www.690019.com-砺儿看彩双色球| www.035210.com-青岛快三开奖直播| www.859944.com-彩票是真是假视频| www.247898.com-福利彩票代玩兼职| www.146601.com-福星福彩预测| www.rq71.com-有没有1赔1的彩票| www.001825.com-体彩有什么彩种| www.345543.cc-福彩三d精彩列表| www.040116.com-经典彩app-| www.80oy.com-有盈彩票是骗局揭秘| www.957140.com-金利彩票是黑平台吗| www.234857.com-3d彩吧第一版字谜| www.502517.com-亿彩坑人-| www.ci89.com-极速快分分彩三下载| www.2757.wang-汉中福彩吧-| www.301155.com-南方双彩网首页预测| www.676028.com-岳阳彩礼一般多少钱| www.851331.com-时时彩最稳根几期| www.37214.com-购彩ii-| www.cp2456.com-胜利彩票是黑平台吗| www.60pz.cc-福彩3d大花虎| www.0876.pw-买什么彩票能挣大奖| www.716296.com-彩铅樱桃画法| www.974990.com-体彩大乐透前三加一| www.3ew.com-最大黑彩网站| www.25ut.com-腾讯彩票全天计划群| www.138757.com-新彩彩票正规软件吗| www.303628.com-牛彩网彩摘网| www.131207.com-河南结婚多少彩礼| www.169272.com-快三走势-| www.999.club-6位数买什么彩票| www.75zt.com-七乐彩红球杀1个号| www.036027.com-快三如何才能赚钱| www.765455.com-哪个彩票平台有反水| www.923036.com-下载人人彩票双色球| www.830.cm-能直播彩票吗| www.20334.com-1号彩下载-| www.116674.com-福彩3d稳定和差| www.961.date-彩云国物语第三季| www.115073.com-下载彩票软件安装| www.f37.in-欢乐彩票骗局| www.9850.vip-中国古建筑彩绘图集| www.965.in-七星彩2个一样| www.558851.com-体彩大乐透数字范围| www.812931.com-易网彩票预测汇总| www.dk7.com-怎么玩快三-| www.46pr.com-必发彩票app| www.4550.vip-重庆时彩时彩合买| www.58468.com-安彩高科重组传闻| www.703323.com-彩票刮刮乐下载| www.881034.com-人人平安彩票靠谱吗| www.85wr.com-福彩3d詹天佑| www.qw34.com-老重时时彩走势图| www.t02.org-几百期彩票-| www.vl89.com-彩吧3d寻马图| www.794800.com-中国彩票快乐12| www.855099.com-8亿彩是真的吗| www.624633.com-福彩应用-| www.716379.com-算局七星彩奖表画规| www.784966.com-乐迎彩票app苹果| www.850508.com-世界杯竞彩投注| www.19hy.com-彩票书图片-| www.650902.com-新手水彩风景| www.34ub.com-七星彩出相同号码| www.689325.com-山东福利彩票地址| www.811860.com-双彩属于哪里| www.554267.com-体彩广告语-| www.673605.com-广西体彩投诉电话| www.806640.com-大小骰宝彩票咋玩| www.920018.com-809彩票app-| 爱彩乐www.874918.com| www.620259.com-快三豹子之后出什么| www.713921.com-福彩3的试机号| www.794959.com-快三福彩解除银行卡| www.626446.cc-彩票坊网站-| www.745217.com-大赢家彩票138| www.870105.com-澳门威尼手机彩票| www.952180.com-cc分分彩开奖| 幸运彩票www.444067.com| www.nk90.com-彩票注册平台送38|