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.108410.com-体彩足彩竞猜网| www.238303.com-中国福彩网开奖直播| www.316287.com-中国体彩排列三论坛| www.386327.com-竞彩比今-| www.630206.com-彩票186-| www.699238.cc-中国福彩怎么玩| www.781254.com-今日3d彩吧图| www.854480.com-酷彩app靠谱吗| www.907654.com-彩票非法经营罪案例| www.967875.com-长沙彩票私彩诈骗| www.xh83.cc-七彩国际投资| www.22hx.com-倍率彩票app| www.292.mobi-领航计划时时彩| www.4228.vip-福彩选号器下架| www.9756.biz-七星彩上官燕推荐| www.65903.com-买彩票选号技巧| www.026240.com-广西体彩11选5看| www.104093.com-香港在哪里买彩票| www.175765.com-河北快三助手| www.282678.com-七星彩中奖技巧| www.369681.com-七乐彩卖到几点| www.466534.com-宏盛彩票软件官网| www.554767.com-彩票遗漏值规律| www.625004.com-七乐彩组选专家杀号| www.698124.com-浙江体彩兑-| www.775792.com-天天彩票计划网站| www.907023.com-彩票组号技术交流吧| www.972746.com-彩铅画花草-| www.bb.com-福利彩票河北快三| www.og67.com-广西快三开奘结果| www.9me.com-福彩十选五规则| www.69qa.com-微彩站app发单| www.1224.xyz-精英博彩论坛| www.8986.cn-3g彩票app-| www.44059.com-幸运分分彩计划| www.88629.cc-做梦梦到自己中彩票| www.049469.com-福利彩票知识大全| www.150139.com-福彩三d技巧论坛| www.234844.com-福彩3的d-| www.308239.com-中福快三走势| www.377537.com-彩票店内装饰图| www.518587.com-辽宁彩票中心| www.587081.com-87彩店最新版本| www.658178.com-彩票投注站用电视| www.764711.com-七星彩规律彩版| www.852330.com-河内时时彩正规吗| www.916836.com-十分彩平台怎么赚钱| www.977539.com-吉利彩票登录| www.xm9.com-1分快三数字规律| www.ra24.com-智胜彩票-| www.03ps.com-六开彩完整版| www.71sh.com-足彩任选9奖金| www.1155.cm-彩票专业用语| www.8750.org-休彩开奖号码| www.38972.com-中彩官网快3| www.84410.com-彩钢瓦生产厂家地址| www.032023.com-彩票代理推广方式| www.105448.com-7k官方彩票网| www.171926.com-精彩十分玩法奖金表| www.346349.com-新华论彩是什么意思| www.423612.com-用移动积分兑换彩票| www.520020.com-乐彩网是真的假的| www.585866.cc-福彩没人买了| www.655962.com-做博彩程序员犯法嘛| www.778284.com-88彩票网官网| www.863528.com-高频彩票将被取消| www.925257.com-体彩杀号定胆2元| www.978353.com-北京福彩赛车靠谱吗| www.us5.cc-乐彩提现失败| www.qd56.com-福彩七乐彩开奖结果| www.00zn.com-最美的彩虹写人作文| www.65qt.com-合肥彩神专栏| www.0323.loan-玩时时彩心态怎么稳| www.8101.club-千百万彩票平台下载| www.26688.com-七星彩打法技巧| www.66835.com-彩票77手机版| www.038335.com-779彩票平台网址| www.120985.com-手机网上怎么买彩票| www.186692.com-牛蛙彩票-| www.252815.com-一分快三彩票网站| www.318869.com-上饶市彩票中心| www.382470.com-pk10彩票合法吗| www.536112.com-广西快三组合走势图| www.612349.com-彩票内部书籍| www.678261.com-中国体育彩票申请书| www.751617.com-明天晚上开什么彩票| www.813908.com-网络彩票输了几百万| www.882855.com-星际彩票靠谱吗| www.984046.com-关注老猫看彩平台| www.cp9179.com-甘肃快三中奖号| www.lu15.com-好彩自然来-| www.d12.me-中彩网体育彩票排5| www.25ev.com-腾讯分分彩胆码公式| www.772.mobi-彩神1是骗人的吗| www.4222.bid-广州七波彩国际真假| www.8978.com-点击更多精彩内容| www.51573.cc-江苏福彩一定牛| www.89603.com-好彩蓝莓爆-| www.036043.com-彩计划下载安装?| www.133421.com-彩色地坪-| www.200386.com-下彩彩票官网| www.262539.com-彩九下载安装| www.359022.com-福彩三地字谜汇总| www.435383.com-快三号-| www.518801.com-发彩网是合法的吗| www.579326.com-被黑彩平台黑钱了| www.644099.com-中国体彩有时时彩吗| www.762588.com-世界上彩票最高奖金| www.838642.com-福彩3d乐彩网专区| www.899823.com-天天彩票注册送88| www.958747.com-网络彩票赌博报警| PK彩票www.www.23040.com| www.as13.com-安徽快三跨度分析| www.qb62.com-下载新彩网-| www.46.me-博雅彩票手机版下载| www.57ta.com-彩票花呗平台| www.651.in-乐8彩邀请码| www.3800.tv-好彩开门入什么意思| www.8622.wang-彩票机和电视连接图| www.58287.com-彩乐网彩票-| www.006022.com-私人彩票平台搭建| www.062287.com-国彩平台注册| www.139581.com-新盈彩到底是什么| www.206967.com-网购彩票正规平台| www.267078.com-海南福利快三查询| www.360439.com-新罗区彩票-| www.428558.com-正好彩票网址| www.512776.com-中国冀彩宝-| www.569903.com-腾讯分分彩全天计划| www.629393.com-一分赛车彩票官网| www.686800.cc-中彩那天短文阅读| www.753021.com-福彩赢钱秘诀| www.925535.com-体彩店内布置图片| www.974524.com-福彩三d新彩网吧| www.av55.com-买彩票的经典句子| www.pm16.com-体育彩票下载手机版| www.0fp.com-乐福彩票靠谱吗| www.42vg.com-中国彩钢网-| www.99bt.com-彩虹六号黑卡店铺| www.2240.shop-福彩3d怪字图片| www.6782.me-港彩78图库-| www.09734.com-福利彩票怎么买数字| www.44015.com-玩彩票就玩时时彩| www.83232.com-彩票加倍中了怎么算| www.025061.com-智慧彩票准吗| www.089131.com-快三杀号专家最准确| www.138899.com-佰盈彩票是黑网吗| www.201457.com-七星彩中奖规则| www.258300.com-竞彩篮球360| www.315930.com-竞彩一年挣百万| www.370351.com-彩钢板隔墙安装图片| www.446236.com-116彩票网app| www.525165.com-圣地彩杀一码| www.731491.com-什么是彩票刷水| www.789517.com-竞彩足球是个坑| www.848395.com-c38彩票领导者| www.897667.com-彩票店广告语语音| www.952467.com-下载大奖彩票app| www.992280.com-重庆时时彩杀号| www.cai617.com-快三助手破解版下载| www.gh75.com-快三输钱怎么回本| www.tq57.com-福利彩票店申请流程| www.z62.club-大奖彩票网9118| www.31lr.com-昨天3d彩票开奖号|