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.192051.com-大发快三提前开奖器| www.lp51.com-人人中彩下载安装| www.16rd.com-足球比分360彩票| www.2854.win-河南福利彩票幸运一| www.2980.com-彩票app怎么制作| www.45076.com-彩票可信吗-| www.930128.com-1980彩票注册| 酷彩网www.773925.com| www.h23.org-七星彩安然-| www.93oy.com-白底属于彩照吗| www.188318.com-福彩3d玩彩老头| E彩堂www.9818u.cc| www.im38.cc-105彩票官网下载| www.320.me-乐彩赢网站几年| www.16729.cc-近期足彩开-| www.057021.com-七乐彩胆拖是怎么玩| www.362589.com-周杰伦彩虹歌词| www.601745.com-彩票16官网骗局| www.80558.com-刑法经营体育彩票| www.062627.com-福彩端是什么| www.138499.com-快三有人赚钱的嘛| www.219795.com-好彩网论坛-| www.194593.com-重庆时时彩骗局| www.328026.com-银川体彩中心电话| www.512708.com-8亿彩手机版网页版| www.620610.com-庆重时时彩破解| www.826555.com-鸿运彩票正规不| www.958737.com-js518全彩漫画| www.686856.com-四下语文书中彩那天| www.777456.cc-彩八仙时时彩苹果版| www.911147.com-彩票奖项说明| www.980497.com-赌彩票一分钟开一次| www.99hu.cc-福彩五行分布| www.7641.vip-彩票网图标-| www.40905.com-安微快3彩票是什么| www.023843.com-彩票五行属水| www.617635.com-晋中福彩中心在哪里| www.804035.com-一分极速彩票网站| www.924902.com-秒速快三怎么赢钱| 惠民彩票www.hm6988.com| www.136936.com-开个彩票店赚钱吗| www.224277.com-精彩十分玩法走势图| www.103600.com-广东彩钢夹芯板| www.699238.cc-中国福彩怎么玩| www.779365.cc-福彩3d双彩网论坛| www.852310.com-天下彩票开奖中心| www.927580.com-破解福彩3d断组法| www.979492.com-亿万快三实时计划| www.500876.com-彩色近照-| www.871511.com-福彩双色球投注软件| www.673122.com-七星彩兑奖有效期| www.801606.com-福利彩票怎么盈利| www.907002.com-体育彩票有四位数字| QQ彩票www.89894d.com| www.le29.com-八亿彩app下载| www.86354.com-三彩冬季女装| www.072803.com-彩票送28彩金| www.02692.com-什么是彩光祛斑| www.63595.com-七乐彩中奖票样图| www.878369.com-内蒙快三助手app| www.cp0991.com-大发快三大小技巧| www.29gl.com-彩票网站推广渠道| www.1145.wang-体育彩票怎么打票| www.67tv.com-乐彩vip标准版| www.260235.com-江苏福彩兑奖流程| www.359867.com-993彩票安装| www.445638.com-hk百彩网址-| www.551221.com-福彩幸运农场走势图| www.644890.com-多多中彩票安全吗| www.617186.com-体彩可以手机兑奖| www.723046.com-藏宝阁丨4s彩票| www.813337.com-微信群里玩彩票| www.907928.com-福彩可以在线购买吗| www.973469.com-有彩虹的头像| www.77043.com-e乐彩注册登录| www.650630.com-彩虹伞托班教案| www.740097.com-澳彩客户端-| www.820551.com-北京彩票领奖在哪里| www.923932.com-支付宝能买彩票吗| www.12294.com-彩票周末可以兑奖吗| www.96616.com-37彩票下载-| www.362987.com-彩票真实的吗| www.547826.com-万彩影像大师破解| www.92xf.cc-足彩2串1计划表| 瑞彩网www.809215.com| www.189383.com-福彩快3开奖号| www.271104.com-好彩柠檬焦油量| www.369596.com-老彩民社区-| www.487654.com-高手百万彩友心论坛| www.598472.com-体育彩票19020| www.775484.com-彩票店网名-| www.899496.com-彩81苹果版-| www.sx4.com-手机新浪爱彩| www.51506.com-糖果彩下载-| www.51951.cc-火箭彩票网站注册| www.984953.com-彩运网骗局解析| www.jg48.com-江苏快三漏洞打法| www.16hw.com-秦皇岛体彩店转让| www.2578.in-用数学的眼光买彩票| www.32oa.com-澳洲赛车彩票官网| www.0294.in-福彩实体店倒闭| www.590157.com-威彩网v30.cc| www.406.org-金博在线彩票登陆| www.3433.net-彩神8分分快三| www.8443.cn-亚博体彩是诈骗吗| www.37835.com-万彩资料下载| www.14os.com-体彩兑奖需要哪些| www.58176.cc-官方彩gz-| www.88881.cc-彩票第18125期| www.ef98.com-福建省福彩管理中心| www.39551.cc-北京体育彩票站长| www.70322.com-进入彩运8平台| www.384201.com-彩票软件数据库| www.eh1.com-分分时时彩走势| www.678404.com-福盈门彩票正规吗| www.567093.com-彩神通四码资料网站| www.637208.com-彩虹六号战队| www.721612.com-彩票霸主手机版破解| www.805959.com-福彩三d图谜第三版| www.884183.com-网上彩票能控制吗| www.948936.com-福彩新3d正规吗| www.km70.com-易彩集团软件靠谱吗| www.k49.net-福彩3d今天奖号| www.1417.in-福彩机选号码在线| www.rx83.com-洗手池快三秒热水器| www.975756.com-江西彩礼高吗| www.dj65.cc-飞鱼彩票玩法规则| www.934017.com-微信美女玩彩套路| www.3810.vip-体育竞猜彩票2串1| www.053477.com-竞彩足球推荐分析| www.301653.com-福彩三d综合版| www.5ty.com-新时时彩倍投技巧| www.85we.com-玩彩票如何看趋势| www.1740.in-谁有鸿彩新地址| www.269817.com-彩1平台-| www.019453.com-福彩销售员的发言稿| www.900959.com-排列5私彩的玩法| 亚洲彩www.68568b.com| www.fe64.com-淘彩app-| www.tx09.com-凤凰私彩app| www.yq09.com-吉林省福彩兑奖地址| www.45vy.com-彩漂的作用使用方法| www.2014.cm-彩虹6号手游下载| www.298103.com-快三群赌博-| www.365892.cc-福彩和值遗漏分析| www.206261.com-彩71是骗局吗| www.324755.com-马来西亚博彩犯法吗| www.441062.com-手机炫彩字体| www.176252.com-湖北快三单期计划| www.365239.com-福利彩票中5红1蓝| www.621933.com-附近买彩票的地方| www.549419.com-网上买足彩中大奖| www.878508.com-斯特凡万能彩票公式| www.40173.com-福利彩票有几种买法| www.730995.com-怎样利用福彩店赚钱| www.936781.com-乐福彩彩票-| www.mi93.com-快三顺子多少钱| www.484411.com-化妆品彩妆套装| www.572322.com-传统足彩258网| www.39ze.com-另一个凤凰彩票| www.334320.com-上海快三推荐号码| www.984895.com-炫彩字体-| www.ep01.com-快三秒奶茶加盟费| www.e53.net-七乐彩综合走势图|