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.597765.com-网页版11选5彩票| www.502669.com-多彩云众筹和多彩投| www.516355.com-色彩基础理论知识| www.654681.com-彩票中大奖江西| www.807523.com-陈赫演的电视买彩票| www.898250.com-七星彩开奖结论坛| www.588488.com-白龙彩票-| www.694968.com-福利彩票兑奖地址| www.791470.com-彩易博天誉高手论坛| www.879363.com-下载app江苏快三| www.951666.com-彩91-| 中国福利彩票www.6364o.com| www.go20.com-规定彩礼不能超过| www.179558.com-北京快三玩法官网| www.130933.com-彩礼2019-| www.60157.com-沈阳彩票机器多少钱| www.06255.com-富贵彩票可靠嘛| www.737783.com-好运快三就是个坑| www.53231.com-快三456多少钱| www.358650.com-超级百万彩票玩法| www.5473.vip-快三每隔几分钟开奖| www.735335.com-美彩票-| www.896732.com-368彩票自动投注| 凤凰彩票www.77803g.com| www.340397.com-好彩网首页布衣3d| www.852676.com-最近的体育彩票站| www.45qz.com-福彩快三加盟| www.hd18.com-快乐彩票6348| www.217900.com-彩福彩票最新版| www.366914.com-彩铅星空画法教程| www.248639.com-香港澳门彩票官网| www.459971.com-彩票5星是什么意思| www.110187.com-海南七星彩九组头尾| www.234262.com-甘肃快三对子| www.458820.com-手机福彩官方网站| www.k14.pw-山西体彩+一选五| www.740795.com-高频彩能玩吗| www.823401.com-附近体育彩票站点| www.222596.com-二分快三全天计划| www.368856.com-login彩票坊| www.503528.com-福建省福彩中心员工| www.057995.com-粤彩联盟报今期| www.145585.com-竞彩足球预测分析| www.60478.cc-南洋乐和彩网首页| www.5643.cm-网恋时时彩骗局| www.789940.com-三的福彩图-| www.871440.com-福彩彩图吧-| www.960500.com-微信pc28送彩金| www.cai0477.com彩票快3怎么玩的| www.sl50.com-时时彩最新人工计划| www.14tw.com-安徽体彩十一选| www.971064.com-快三稳中-| www.611973.com-青岛莱西体彩转让| www.620825.com-秒速时时彩官网下载| www.730350.com-彩票走势图易网| www.822731.com-人人中彩票网电脑版| www.902362.com-福彩幸运二开奖号码| www.976269.com-七星彩在什么店买| www.ca8.cc-彩票反水是什么意思| www.sy13.com-七星彩中奖技巧| www.111956.com-酷彩吧是不是奖多多| www.q92.net-河北快三规律| www.79om.com-福彩3d心精英论坛| www.1235.me-体育彩票十二生肖| www.6476.xyz-满堂彩手机版| www.186098.com-彩之源彩票是真的吗| www.879975.com-呼市福彩中心地址| www.54947.com-足球彩票18096| www.001992.com-釉彩成分-| www.127282.com-简单彩铅画多肉| www.8573.biz-惠民彩票是不是合法| www.29924.com-彩运网cy222| www.473693.com-体彩排五几点开奖| www.804450.com-福州体彩十一选五| www.902984.com-北京快三遗漏查询表| www.987966.com-全能彩票-| www.fy49.com-福建福利彩票开奖| www.012052.com-快三福彩书籍| www.727237.com-香港马会天空彩票| www.292320.com-大发快三uu快三| www.513171.com-三彩女装官方| www.605554.com-彩票榜官方邀请码| www.712677.com-齐鲁风采彩票不带0| www.767916.com-新淘彩网-| www.7038.top-竞彩篮球上哪买| www.49bd.com-幸运十分彩开奖网址| www.010575.com-熊猫彩票信息| www.060077.cc-即开彩是真的吗| www.215355.com-瑞彩网是骗局吗| www.310786.com-吉林市彩票管理中心| www.400356.com-什么是希腊5分彩| www.562739.com-高频彩有假吗| www.177666.com-甘肃快三计划网页| www.879665.com-快乐时彩下载| www.99iw.com-向洪甲预测彩票准吗| www.043356.com-彩票辽宁-| www.018029.com-彩票投注站申请| www.122650.com-彩金的缺点-| www.195068.com-体彩彩票怎么看中奖| www.053737.com-足彩网上投注258| www.331138.com-三d彩神通关注码| www.85399.cc-彩巴3d迷图第二版| www.035761.com-彩票开奖提醒| www.922528.com-足彩经验-| www.97ay.com-梦想彩票软件| www.5191.club-3d彩吧助手式机号| www.303147.com-够力七星彩下载苹果| www.886287.com-古风女背影彩铅| www.82im.com-青岛市福彩发行中心| www.11653.com-福彩3d彩乐乐杀号| www.69793.com-易彩乐官网-| www.hj43.com-博众彩票软件官网| www.39ee.com-七星彩复式按顺序吗| www.21566.cc-大家乐彩票合法吗| www.77396.cc-众发彩票主页| www.877036.com-彩票刷流水方案| www.959165.com-购买美国强力球彩票| www.hw3.com-彩票长龙技巧| www.766643.com-福彩显示器怎么安装| www.910836.com-京彩_首页-| www.980699.com-利彩网443978| www.kd6.com-江苏乐彩快三| www.45022.com-彩38网站靠谱吗| www.078177.com-盈彩彩票app安卓| www.704185.com-彩票336cc-| www.767835.com-快三猜一个好| www.655667.com-m8彩票坑人-| www.191984.com-河南福彩网快3预测| www.69504.com-天津时时彩直播| www.9460.pw-青海人喜欢买彩票| www.042347.com-快易彩app下载| www.001242.com-内蒙福彩中心位置| www.132769.com-世界杯福彩-| www.207181.com-体彩nba-| www.027505.com-正规高频时时彩| www.087026.com-福运彩票官网| www.15si.com-体育彩票装修简介| www.673182.com-七星彩得主-| www.77788.cc-新浪彩票频道首页| www.497380.com-家彩网试机号开机号| www.098169.com-百度乐彩网站| www.029741.com-体育彩票安卓| www.133674.com-天天福彩在线收听| www.dz33.com-福彩快三项目| www.412233.com-彩票空间-| www.946718.com-彩票预测神器怎么样| www.230639.com-世界杯彩票投注官方| www.7328.cc-彩虹三无人机出口| www.771681.com-时时彩庄家追杀你| www.832880.com-牛彩双色球字谜图谜| www.889586.com-凤凰彩世界下载| www.943255.com-众彩网下载-| www.984743.com-福彩双色球可选号| www.eb9.cc-快三有什么含义| www.571751.com-吉林快三逐鹿计划| www.634897.com-建盏养七彩过程| www.684883.com-爱投彩票可靠吗| www.739163.com-3d彩票杀号软件| www.802588.com-彩票小狂人五码复式| www.867605.com-算局七星彩和排列五| www.919079.com-彩吧天气网首页| www.521869.com-喝彩中华王佩瑜| www.09tf.com-彩票七乐彩单式| www.nf56.com-105彩票怎么下载|