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.6433.pw-乐彩彩票下载苹果| www.915939.com-彩拾彩票下载安装| www.989918.com-彩之乐彩票-| www.et79.com-老版彩神8-| www.88979.com-连中彩票王-| www.379232.com-体彩排列五最新开奖| www.662020.com-足球竞彩最大中奖| www.dp75.com-玩快三会不会有影响| www.48tf.com-三国星彩是谁啊| www.1461.vip-福乐彩玩这个安全吗| www.382632.com-宝彩票-| www.571671.com-菲律宾快三开奖结果| www.708193.com-探探上的彩票托| www.935526.com-那些凤凰彩票导师| www.cp1086.com-快三计划网址| www.i81.biz-福彩杀码太湖搜| www.0088.love-福彩3d唐龙点评| www.61799.cc-南国体彩41论坛| www.011181.com-河南体彩481任2| www.494458.com-重庆时时彩会下架吗| www.158599.com-乐佳商城彩票网站| www.320455.com-87彩票官网-| www.37138.cc-彩票五哥三天计划| www.457100.com-中彩公司总经理贺文| www.567550.com-全民乐彩票网站| www.656225.com-2012年七星彩| www.750087.com-彩手机版-| www.868331.com-湖北快三分析| www.332630.com-不能网上买彩票| www.485666.com-体彩世界杯胜负玩法| www.qp45.com-北京单场彩票| www.50ew.com-彩票藏机图正式版| www.1155.live-肇庆市福彩网| www.987603.com-时时彩倍投计算在线| www.cy39.com-仿造彩票打印软件| www.089712.com-老时时采彩开奖记录| www.199221.com-江苏快三二同号推荐| www.285717.com-k彩福地线路登录| www.373581.com-快三三同号通选奖金| www.667755.com-福彩高管-| www.760611.com-青娃彩票生肖对照表| www.909226.com-宝马彩票网-| www.977733.cc-世界杯足彩买比分| www.cp7466.com-湖北快三开奖及走势| www.p34.net-网上怎么买体育彩票| www.85at.com-福彩247丹东图谜| www.47747.com-韩国足球彩票玩法| www.036825.com-全民彩平台-| www.168854.com-爱彩乐快3-| www.314122.com-足彩258-| www.446055.com-源码彩票平台| www.576407.com-彩霸王资料-| www.657252.com-中国福利彩票消宝石| www.724222.cc-查看彩票开奖| www.800377.com-买彩微信群-| www.870258.com-福彩3d组合胆拖| www.951457.com-500彩票真的吗| www.999923.cc-双色球彩民村彩民网| www.go61.com-郑州彩礼一般多少| www.zs89.com-彩35彩票网站| www.29xb.com-今日彩票天将结果| www.0470.bid-福彩3c开奖结果| www.7430.in-苏州市竞彩网点查询| www.45641.com-福彩缩水工具| www.011009.com-昨日体彩开奖号| www.120426.com-即时开彩免费版最新| www.227009.com-彩铅画图片-| www.332313.com-彩票开奖内蒙快三| www.447392.com-中国体彩竞猜官网| www.807758.com-北京5分彩计划软件| www.d97.club-竞彩足球大奖| www.142566.com-彩8彩票邀请码| www.286916.com-福彩交流群公告| www.451633.com-幸运时时彩正规吗| www.607915.com-天津彩票开将号码| www.772410.com-博彩套利方法大全| www.902902.cc-快三有赚钱的么| www.53066.cc-重庆时时彩走势| www.832903.com-彩77彩票安卓版| www.3314.cc-利用彩票的走势赚钱| www.116196.com-抖音彩虹是什么意思| www.400178.com-星际传奇游戏厅彩票| www.571927.com-怎样申请开彩票站| www.718986.com-彩虹为什么会消失| www.913818.com-燕赵福彩网官网公告| www.ao54.com-安徽快三开将结果| www.9wa.cc-关于彩票微博| www.2564.vip-彩之源彩票真假| www.423400.cc-七乐彩同尾数走势图| www.439886.com-怎么注册时时彩账号| www.78107.com-科学计算器彩票| www.196151.com-快三开奖分析软件| 幸运彩票www.915399.com| www.s60.pw-电脑彩屏解决原因| www.977895.com-开彩票店的风险| www.583970.com-真正的足彩大咖| www.716672.com-彩铅画龙-| www.973124.com-凤彩网彩票官网下载| 彩乐乐www.cll168.com| www.f57.club-福利彩票能买吗| www.811676.com-苏州南站到新昌双彩| www.956116.com-金帝网络彩票| www.uo.cc-快三客app-| www.42nx.com-福彩计划员-| www.3867.cn-广州体彩兑奖中心| www.57205.com-手机彩播直播| www.042114.com-体彩店竞彩提成| www.703663.com-北京快三怎么赌| www.52kj.cc-新加坡三分彩网站| www.8441.pw-3d手机彩票网| www.138896.com-陕西竞彩图片| www.349088.com-彩宝网合法吗| www.578090.com-怎么做网上彩票代理| www.778898.com-旺彩3d开奖-| www.s53.xyz-买彩票软件靠谱吗| www.89767.com-中国福彩七乐彩规则| www.us30.com-今天内蒙古快三走势| www.1095.cm-竞彩高手分享技术| www.qk23.com-福彩和值表-| www.729736.com-愚人节彩票中奖图片| www.750628.com-彩票概率学研究| www.761312.com-广州体彩中心| www.7409.com-足彩竞彩网点| www.153.org-彩虹天堂周杰伦| www.370229.com-大款买彩票倾家荡产| www.930961.com-彩八app下载| www.375817.com-福彩开奖和值| www.cp6662.cc-大发快三是什么彩票| www.977945.com-彩钢瓦围挡安装方法| www.059078.com-彩票聊天室平台计划| www.500115.com-买彩票怎么推算| www.314044.com-3d彩票开奖时间| www.060737.com-怎么抓卖私彩的人| www.310211.com-易旺彩票主页| www.80bn.com-万金集团彩票合法吗| www.391236.com-吉林快彩-| www.000239.com-头条网上的彩票| www.414211.com-三分彩是真的吗| www.132936.com-模拟购彩快三app| www.535284.com-买彩票要写几位数| www.992740.com-福利彩票三第走势图| www.i48.com-免费彩票高手资料| www.798168.com-鼎盛团队五分彩| www.037598.com-彩名堂计划好用吗| www.74vz.com-哪个行买彩票| www.354820.com-买彩票真能中奖吗| www.kg10.com-山东福彩app官网| www.176203.com-快三精确计算公式| www.vk94.com-福彩快三规则调整| www.574230.com-老师买彩票输了| www.765484.com-七星彩彩版湛江加急| www.1913.top-时时彩组六胆拖技巧| www.94yv.com-彩票提现流水| www.3oi.com-七星彩开奖号马| www.881653.com-看彩票走势骗局| www.1794.vip-七星够力彩奖表| www.676064.com-今天彩票图纸| www.371861.com-体育彩票昨晚的号码| www.97ys.com-玩黑彩能赚钱吗| www.cai9595.com查一下福利彩票| www.9029.vip-篮球竞彩网新浪| www.4593.cn-体彩大乐透中奖秘籍| www.wc61.com-今晚七星彩开奖| www.1556.top-热购彩票-|