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天

知道了
彩票123现在叫什么名字 www.sj82.com-足球彩票规则介绍| www.70ei.com-中华彩票是合法的吗| www.2439.cm-彩虹六号围攻新角色| www.9274.cn-福乐彩注册-| www.72218.cc-手机购买彩票app| www.067089.com-河南快三和值跨度表| www.147619.com-澳客足彩论坛| www.022716.com-体彩排列三断组分解| www.151212.com-彩票888下载软件| www.251785.com-福彩15选5派送奖| www.204524.com-江西体育彩票官网| www.339649.com-彩导航威尼斯| www.471519.com-福彩3d的偏差| www.569455.com-365微彩票-| www.660140.com-i爱彩彩票-| www.904890.com-足球彩票胜负彩开奖| www.976159.com-河南省的彩礼多少钱| www.rw83.com-彩票分分钟开奖软件| www.16yh.com-彩客网ckw-| www.704.com-私彩代理如何赚钱| www.5868.online彩票赌大小反倍投法| www.22983.cc-wz225王者彩票| www.74743.com-金彩彩票下载| www.038230.com-博友彩软件-| www.185820.com-快三中2个号有奖吗| www.273986.com-三分快三技巧规律| www.385734.com-周日体彩兑奖吗| www.523928.com-胜负彩分析预测| www.620693.com-500彩票会员群| www.704800.com-福彩一点通app| www.795015.com-上海市体彩兑奖| www.880007.com-天天彩选三开奖结果| www.991965.com-宜昌市体彩兑奖地址| www.sn6.cc-篮球彩票规则| www.995194.com-北京福彩网论坛专家| www.ei76.com-福建快三开奖时间| www.b23.me-河北福彩排列五玩法| www.62eh.com-竞彩足球比分串| www.1575.win-时时彩安卓计划软件| www.20348.com-九度彩票app| www.73008.com-彩198app-| www.063158.com-9万彩票官方网站| www.157297.com-足彩19046预测| www.258023.com-皇都彩票平台合法吗| www.347075.com-2000彩票-| www.444726.com-五彩斑斓的世界虐吗| www.550492.com-可以发帖的博彩论坛| www.677828.com-中国彩票36选七| www.769708.com-四川好彩头-| www.878217.com-3d牛彩网图谜总汇| www.959131.com-数字彩票大乐透| 大赢家彩票平台www.810277.com| www.ls96.com-时时彩宝典官方网站| www.w83.club-如何购买福利彩票| www.63wr.com-家有惊喜福彩三d| www.1421.cc-中国福彩三d走势图| www.11419.com-十四场足彩新分析| www.60899.cc-新星彩宝-| www.035886.com-梦想彩票站官网| www.132228.com-如果男方要退彩里| www.215797.com-七星彩计算公式讲课| www.299341.com-美国彩票规则| www.385638.com-今天彩票买什么号码| www.556062.com-关于彩票书籍| www.636708.com-雨后彩虹儿童画| www.747661.com-login彩中彩| www.831240.com-胜负彩19033| www.911300.com-k彩正规吗-| www.978916.com-河南省福彩中心职工| www.xv42.com-千万彩票官网| www.31hg.com-彩虹吉他指弹| www.880.cm-彩票怎样止损| www.5629.biz-九龙呈祥六开彩结果| www.19311.cc-发彩下载手机版| www.66441.cc-彩票中的三不同号| www.067805.com-彩票app软件开发| www.139342.com-天际彩票邀请码有吗| www.224343.com-天天快三手机版| www.305116.com-福彩35期开奖| www.382726.com-幸运彩快三-| www.554077.com-cba竞彩推荐| www.627920.com-秦兰香桂林彩调| www.708338.com-316930彩票网| www.790579.com-快三万能投倍器| www.871485.com-万通彩票平台代理| www.983606.com-大连福彩中心电话| www.ot3.com-分分快三稳赢策略| www.216310.com-飞鱼彩票玩法规则| www.337869.com-鄂尔多斯求租彩票站| www.297513.com-互联网彩票停售了| www.431353.com-亚盘足彩研究| www.564234.com-广东东方亮彩打卡| www.636681.com-彩虹频道直播源| www.de56.com-彩富网正版资料| www.sl21.com-uu直播彩票平台| www.18sw.com-福彩开奖七乐彩开奖| www.222.tv-九龍彩票-| www.87fb.com-三号彩-| www.5409.org-彩票38-| www.cp0258.com-快三平台官网下载| www.wp82.com-诺亚彩票是否正规| www.33af.com-淘彩是不是诈骗| www.94qr.com-体彩多少号码| www.1998.cx-网上彩票开奖查询| www.7919.cn-同乐网彩票吧| www.27674.com-七乐彩图迷-| www.73217.com-c58彩票网-| www.143293.com-中国福利彩票现主任| www.225576.com-提现快彩票-| www.304112.com-彩票01手机安卓版| www.373531.com-利鑫体育彩-| www.530537.com-时时彩后一九码计划| www.616886.com-中彩票大奖在哪兑现| www.688951.com-俄罗斯彩票平台官网| www.781084.com-彩虹连衣裙-| www.858248.com-彩票网大全-| www.921663.com-中彩网假吗-| www.979959.com-买彩票快三-| www.ub42.com-一分快三龙-| www.04kq.com-城市风景彩铅画| www.73em.com-有在蒂之彩学过的| www.1223.red-博彩bb论坛-| www.9160.in-直播彩票app| www.43921.com-盛兴彩票4848| www.88915.cc-线上买彩票源码| www.051162.com-查彩票双色球| www.211904.com-彩票俱乐部合法吗| www.281712.com-六壬测彩3d-| www.374682.com-福彩3d路数-| www.490859.com-那些网站可以买彩票| www.564153.com-东方亮彩招聘普工| www.628868.com-重庆时时彩51期| www.696171.com-新浪爱彩任九投注| www.768681.com-福彩之家下载| www.887536.com-下彩网这两天打不开| www.966190.com-发彩网app能下吗| 幸运彩票www.444539.com| www.610301.com-猜12生肖彩票软件| www.728944.com-重庆快三怎么玩稳赚| www.822612.com-福彩双色球资深专家| www.896673.com-河北十一选五派彩网| www.r98.net-七星彩票大小走势图| www.76cd.com-中国体育彩票六等奖| www.2801.live-体彩大家玩什么彩票| www.8462.cc-6d彩票app-| www.59579.cc-中彩网积分有什么用| www.005222.com-体彩开机号今天| www.073721.com-彩神uu计划-| www.138050.com-新彩网i新彩网| www.214009.com-人人彩票的騙局| www.284928.com-分分时时彩规律口诀| www.356820.com-3个号码的彩票| www.442616.com-福彩家彩网胆码| www.532659.com-北京快三有假吗| www.716725.com-彩铅画古风人物| www.789370.com-彩妆加盟店排行榜| www.858807.com-开奖彩票网址| www.922124.com-竞彩365-| www.986336.com-金手指的彩票专栏| www.jh.cc-河北福利彩票快3| www.og60.com-卓易彩票官网| www.29ij.com-体彩投注平台| www.2180.in-顶尖彩票不能提现| www.7809.pw-博彩注册送彩金38|