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.597277.com-购彩网赚钱是真的吗| www.3822.xyz-香港跑狗彩图| www.030453.com-彩票快平台-| www.270625.com-093彩票官方版| www.66469.com-地方彩宁夏银川快三| www.575348.com-糖果彩官网-| www.400319.com-特区网七星彩票论坛| www.2768.xyz-爱玩彩票官网| www.86851.cc-盈盈彩-| www.jm05.com-大发时时彩全天计划| www.s57.space-青海彩票十一选五| www.67ob.com-竞彩2中一-| www.6131.xyz-如意彩票开奖网| www.22192.com-竞彩足球单关分析| www.753563.com-大乐中奖彩票图片| www.852654.com-168彩票苹果| www.yf80.com-吉林快三派彩网官方| www.8420.in-u9彩票官方-| www.66081.cc-3d福彩幸运码| www.021626.com-快三单双技巧| www.753957.com-网络彩票停售| www.13at.com-下彩网客户端2.1| www.08981.com-短信购彩-| www.133417.com-混凝土可以做成彩色| www.362627.com-周杰伦歌曲彩虹歌词| www.588398.com-七彩连珠加强版| www.3624.biz-奇门遁甲测港彩生肖| www.12010.cc-微信口袋彩票店| www.361505.com-六冠彩票是什么平台| www.532260.com-彩虹人生的唯美句子| www.777583.com-星空彩票苹果版| www.884502.com-澳洲时时彩开奖号码| 爱米彩www.am1115.com| www.233019.com-爱彩江苏快3| www.cai7699.com彩票规则-| www.cp3803.com-新快三算号器| www.464.biz-彩票大数据精准定位| www.400010.com-福利彩票三d走试图| www.568030.com-福彩三第遗漏| www.417245.com-hdp看彩虹台| www.907130.com-大发快三靠谱吗| www.315803.com-分分快三中奖技巧| www.dd14.com-快三app安全| www.900389.com-淘彩票软件-| www.877.org-彩铅樱花怎么画| www.102268.com-qq彩票正规吗| www.9002.cn-乐彩彩票是什么| www.051775.com-大发快三彩-| www.326937.com-古建彩绘教程| www.306117.com-758彩票官网| www.383842.com-010彩票app-| www.852082.com-七星彩1759期头| www.cp214.com-福彩快三彩票软件| www.zf28.com-修改快开彩票| www.37xr.com-开封市结婚彩礼多少| www.1625.wang-三彩彩票是否合法| www.9228.site-彩民村心水家| www.52089.com-网上黑彩漏洞| www.bo74.com-体彩中奖-| www.900089.cc-泡泡彩票app下载| www.988300.com-甘肃快三走势与预测| www.64qy.com-腾讯分分彩输了3万| www.04117.com-豪彩怎么下载| www.75009.com-众彩网双色球论坛| www.040578.com-中彩票预兆-| www.701702.com-时时中彩票是骗局吗| www.279835.com-时时彩猜豹子玩法| www.77845.com-有几个凤凰彩票| www.986139.com-杨震最新足彩推荐| www.84874.com-福彩3d小小鱼彩圣| www.ug6.cc-新版河北快三百宝彩| www.778906.com-安彩现状-| www.458202.com-彩票走势图有哪些| www.44ta.com-今日竞彩单关推荐| www.4799.cc-彩虹六号过审时间| www.68da.com-多乐快三技巧| www.247.cx-彩票网站安全吗| www.7937.cc-彩宝种类大全| www.63237.com-河南马前县彩礼规定| www.97df.com-彩排的彩是哪个彩| www.6753.cc-天天种彩票下载安装| www.cai869.cc-福彩上海快3| www.6340.in-体彩p3关注号| www.400533.com-亿彩彩票最多黑几期| www.557651.com-大乐透彩池最新资金| 大赢家彩票平台www.375931.com| www.ns71.com-彩票不用票怎么兑奖| www.971930.com-彩拾注册-| www.wp53.com-彩票走势赚钱| www.33st.cc-19019期七星彩| www.7904.com-哪个彩票app最好| www.664.bid-58彩票下载二维码| www.42685.com-中彩网北斗今日预| www.161063.com-彩票天天乐下载| www.235216.com-广东福彩电子投注单| www.304958.com-11选5彩票官方| www.373403.com-鼎盛彩票团队| www.451396.com-天天彩票钱能提现吗| www.485498.com-吉祥彩票计划聊天室| www.717506.com-彩铅画需要什么工具| www.582608.com-中彩集团-| www.021009.com-安快三开一定牛| www.122827.com-彩票计划最稳的网站| www.77yx.cc-博彩公司收购银行卡| www.09786.com-5o5oo万彩票网| www.93728.com-足彩推荐平台哪个好| www.96yx.com-奔驰彩票怎样玩呢| www.529302.com-彩6彩票网-| www.369854.com-黑彩代理返点设置| www.26629.cc-彩票平台怎么刷漏洞| 99彩www.996863.com| www.000017.com-彩客化学工资多少| www.106073.com-博发彩票的网址| www.1469.cn-彩之云app-| www.431111.cc-黄河风彩双色球投注| www.495.xyz-快三都出什么号码| www.6182.pw-金牛彩票入口| www.850518.com-快上海快三号码| www.916038.com-彩票生意-| www.972213.com-五分彩个位和值| 13e彩票www.707232.com| www.gb81.com-福彩快3怎样追回扑| www.ue38.com-五分彩个位计划| www.592653.com-秘梦解图七星彩解码| www.744126.com-网上买彩票当庄家| www.819468.com-期期中的彩票计划网| www.305503.com-彩票机选中奖| 500彩票www.26299c.com| www.ig89.com-快三大小单双买法| www.1417.in-福彩机选号码在线| www.553070.com-澳洲分分彩-| www.824775.com-聚丰彩票jf-| www.879772.com-西安市福彩中心地址| www.486836.com-足彩竞猜玩法图表| www.588360.com-香港有线球彩台| www.715793.com-网络彩票网站案例| www.819619.com-易中彩票怎么样| www.906533.com-七彩网名-| www.959142.com-鉴别彩票的真假| 彩民网www.76520w.com| www.500076.cc-狂三同人全彩本子| www.611387.com-天门体育彩票申请| www.yu34.com-美国彩票和中国| www.990083.com-3分快三官网开奖| www.cu19.com-有信誉的彩票平台| www.365946.cc-初级水溶性彩铅画| www.790161.com-彩名堂计划怎么样| www.25122.com-彩铅画新手教程视频| www.83165.cc-福彩3d猫腻-| www.041382.com-uu彩票直播平台| www.103686.com-买哪种彩票中奖率高| www.165436.com-河北快三的结果| www.254530.com-快三和值跨度速查表| www.16601.com-彩票可以跨店兑奖| www.221148.com-快三追号软件| www.1270.net-福利彩票福建| www.579769.com-四场进球彩开奖时间| www.508774.com-利盈国际彩票代理| www.572813.com-彩票开奖香港结果| www.176300.com-安徽福彩快3走势图| www.236500.cc-辽宁福彩手机投注| www.295688.com-时时彩一天开几期| www.596941.com-利盈平台彩票| www.42dv.com-坚持了才有希望彩票|