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天

知道了
1分快三 www.161910.com-快三大小单双微信群| www.985566.com-送彩金彩票平台大全| www.jo35.com-网络套彩金算违法吗| www.056088.com-腾讯十分彩走势图| www.12265.com-山东福彩报障app| www.003258.com-时时彩教我看走势| www.851622.com-时时彩智能分析软件| www.616435.com-彩七七苹果下载| www.750660.com-众兴彩票-| www.857240.com-网上买彩票| www.258673.com-彩票平台对刷赚钱| www.911888.cc-天天彩票网开奖结果| www.95tr.com-红彩网直播网站| www.090838.com-go彩app-| www.193234.com-派彩网付费板| www.7748.vip-华亿彩票官方网| www.57nx.com-玩发彩犯法么| www.08ts.com-体彩排例三开奖| www.89266.com-来彩彩票o2o| www.304555.com-快3派彩官方网站| www.412402.com-天天彩报008| www.563534.com-万能彩装膜-| www.879031.com-澳洲快三开奖| www.976336.com-不要彩礼-| www.mi11.com-江西时时彩被停原因| www.82088.com-福利彩票图迷总汇| www.331754.com-中彩网排三开奖查询| www.0521.com-彩票趋势网-| www.010380.com-福彩试机号今天| www.r66.cn-最新万豪彩票手机版| www.54fi.com-826网上彩票| www.725.cm-帮人玩彩票赚佣金| www.0366.cm-777福彩双色社区| www.175.cm-用手机话费买彩票| www.621861.com-宁波彩票中奖者| www.231471.com-彩票51中彩下载| www.8752.top-500彩下载软件| www.942767.com-刚力彩芽电影| www.92933.cc-博牛彩票是否合法| www.09646.com-拼搏在线彩票网| www.158611.com-新天天彩票是真的吗| www.126466.com-北方老彩民-| www.947308.com-查彩票开奖查询| 500彩票www.202423.com| www.595488.com-虎扑体彩-| www.669240.com-够力七星彩老版下载| www.mm81.com-福乐彩12选5| www.693091.com-山东福彩报障app| www.845031.com-台湾彩票大福彩| www.959406.com-河北快三3-| www.kp2.com-安徽快三下载苹果| www.4511.vip-中国足彩结果查询| www.cai5025.com福彩快三助手| www.278038.com-牛彩彩票网-| www.185966.com-168彩票网官方版| www.15oc.com-万豪彩票助手手机版| www.3724.pw-彩站初几营业| www.q26.cc-冮苏快三推荐| www.60ts.com-双色球专业玩彩预测| www.1476.vip-私彩多少金额算违法| www.6585.top-生日彩票号码生成器| www.559496.com-云彩宝彩票-| www.660044.com-人工智能能玩彩票吗| www.739046.com-代买彩票却没有买| www.830486.com-手机怎么查彩票| www.908116.com-贵州七星彩领奖地点| www.978138.com-批发彩钢围挡| www.05906.cc-福彩3d试机号彩吧| www.534178.com-东莞彩票开店贴吧| www.632632.com-彩控科技-| www.720618.com-七星彩生日幸运选号| www.799032.com-福彩3d果今天| www.697662.com-彩票几号开售| www.802869.com-长沙体彩中心地址| www.875215.com-体彩排五开奖综合图| www.947985.com-四川体育彩票七位数| www.993971.com-新浪双色球数字彩票| www.fp07.com-足球彩票怎么买| www.yg05.com-福彩快三赔率199| www.27ak.com-快三出龙最多多少期| www.48278.com-海南七星彩最新奖表| www.ht41.com-贵州彩票网-| www.4825.org-彩16软件下载| www.ik05.com-500万彩票网登录| www.158407.com-竞彩专家分析推荐| www.318468.com-双彩球今天奖| www.385929.com-体彩任九开奖时间| www.766747.com-禁止网络买彩票| www.868489.com-七星彩六七差尾振幅| www.08249.com-湖南体彩投注站| www.997242.com-竞彩推荐网-| www.ha85.com-北京快三兑奖期限| www.5zp.com-豪彩娱乐怎么样| www.537020.com-彩票店主网名| www.619522.com-彩字的图片-| www.698250.com-温州体彩阳光征召| www.775663.com-石家庄福彩助学| www.216817.com-哪个平台玩快三好| www.079453.com-爱淘彩票app| www.168231.com-湖北爱乐彩-| www.253509.com-时时彩玩法介绍图| www.332786.com-河内五分彩开奖网站| www.193314.com-百宝彩湖北快三| www.858401.com-快乐网快三的玩法| www.ni5.cc-彩票开奖排列五| www.cp095.com-江西快三和值走势图| www.71oy.com-彩票正能量的句子| www.27182.cc-彩票元网下载| www.252049.com-彩经网走势图新版| www.323541.com-中国福彩网开奖信息| www.382657.com-体育彩票活动内容| www.479556.com-移动彩云业务是什么| www.265919.com-银川体育彩票中心| www.449813.com-买彩票赔钱输急眼| www.676.gg-彩票幸运农场怎么玩| www.323553.com-彩票开奖查询金七乐| www.69365.cc-数字流运预测彩票| www.318817.com-南昌福利彩票中心| www.935526.com-那些凤凰彩票导师| www.918063.com-幸运飞艇是私彩吗| www.329702.com-金彩国际骗局| www.827038.com-最新彩票骗局| www.593539.com-七彩网站-| www.hq65.cc-飞鱼彩票技巧| www.123675.com-福彩相年富-| www.751517.com-佬牛足彩期-| www.320446.com-河南体彩网排五预测| www.pp21.com-今天湖北快三分布图| www.551268.com-彩票合买搭建| www.373348.com-福建体彩22大星| www.559747.com-彩宝网诈骗-| www.644040.com-风彩彩票可靠吗| www.828113.com-彩票2019035| www.885977.com-彩虹的约定儿歌| 金掌柜www.83993r.com| www.2034.vip-青岛福彩中心在哪里| www.69ec.com-彩宝网主页-| www.134007.com-36选7好彩1走势| www.669701.com-手机玩彩票真的假的| www.7738.org-趣彩彩票输了几万| www.0237.cn-必赢彩票官网| www.855562.com-福彩3d众彩专家| www.977370.com-豪彩vip软件| www.gr87.com-江苏快三二不同号| www.51rw.com-彩票大赢家足球比分| www.387599.com-做梦梦到彩票没中奖| www.31098.com-卓易彩票软件| www.81522.com-河北快三中奖牛人| www.300867.com-彩票心水-| www.983432.com-彩16苹果版-| www.68gy.com-查询彩票真假| www.01444.cc-大乐透开奖新浪爱彩| www.96058.com-彩票监管案例| www.790312.com-天吉彩票论坛手机版| www.114662.com-体彩北京快三走势图| www.478894.com-江西九江体彩网| www.567024.com-画里彩虹emoji| www.640044.com-22彩票网址是多少| 优点彩票www.139670.com| www.47zu.com-附近卖福利彩票站点| www.702618.com-明彩竞彩-| www.816.org-竞彩发单app| www.439456.com-彩之星站-| www.562575.com-电子游戏送38彩金|