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.8628.net-87彩票店官网| www.2685.me-网购彩票何时恢复| www.jt06.com-怎样买体育彩票中奖| www.3pz.cc-能用京彩挂机的平台| www.80tv.com-外围和国彩的区别| www.25914.cc-彩虹是什么比喻什么| www.131884.com-中国彩礼最高的省| www.940313.com-福彩七星彩开奖结果| www.653906.com-彩票ps-| www.091031.com-七星规律彩票| www.670251.com-彩票排位五-| www.83rc.com-幸运彩票网址手机版| www.20517.cc-91时时彩人工计划| www.672210.com-足彩彩票预测下载| www.245674.com-易彩堂彩下载| www.610468.com-排五最大中奖彩票| www.129492.com-易众彩店怎么样| www.791555.com-2016101彩票| www.953167.com-排列五彩票网| www.aa29.com-体彩排列三开奖| www.ib03.com-68彩票骗局-| www.287623.com-华夏彩票官网查询| www.131564.com-长春市福利彩票领奖| www.282202.com-江苏快三开奖计划网| www.169172.com-快三口诀对应号| www.14bq.com-海南七星彩头尾2位| www.50tc.com-中国彩票史大奖排名| www.3516.xyz-彩票二等奖怎么看| www.09465.com-彩39网-| www.154117.com-360福利彩票| www.225707.com-中乐彩官网-| www.937396.com-深圳彩福大厦恶劣| 大赢家彩票www.341011.com| www.ps92.com-哈尔滨快三开奖结果| www.09ki.com-118彩票下载中心| www.087288.com-彩福大厦地址| www.76651.cc-连云港彩票获奖查询| www.103024.com-彩票中奖的概率| www.190780.com-快三怎么玩稳赢| www.020542.com-贵州快三玩法和开奖| www.105977.com-彩神pk10app| www.177226.com-江苏快三开奖号| www.426920.com-毕节附近彩票站| www.400486.com-足球竞彩推荐网站| www.463351.com-体育彩票微信群公告| www.946393.com-腾讯5分彩开奖结果| 中原彩票www.314213.com| www.57828.com-乐透啦彩票版本| www.ag63.cc-快三开奖结果河南的| www.p04.space-彩票双色球游戏规则| www.l30.cn-彩票免费网址大传| www.863366.com-体彩样票是什么意思| www.263566.com-快三走势图电脑版| www.370206.com-重庆时时彩玩法介绍| www.777012.com-免费下载彩六| www.871391.com-彩票扫一扫查中奖| www.940077.com-重庆市彩票-| 彩82www.c1663.com| www.10683.com-…中国足彩网| www.399554.com-七星彩老鼠精版最新| www.206709.com-大乐透红杀号彩宝贝| www.282888.com-彩票单双与九宫图| www.044320.com-篮球彩票软件排行榜| www.hp11.com-玩彩票算赌博吗| www.17tf.com-彩娃彩票打不开| www.9770.biz-昨天彩票开什么码| www.2661.top-彩票app没了| www.7373.tv-体彩公益金使用公告| www.153094.com-雪园园足彩比分直播| www.230252.com-快三区间线-| www.327640.com-福彩体彩开奖公告| www.451008.com-彩票欠账打官司| www.057863.com-河北快三号码大全| www.401830.com-七星彩大结局| www.553196.com-张家口彩票站分布| www.846429.com-福彩中心窝案金额| www.936034.com-福彩乐彩首页| www.993816.com-玩彩票大平台ios| www.uh1.cc-百宝彩河北快3| www.03033.com-澳门彩票官方投注| www.91825.cc-三d牛彩预测| www.857072.com-恒大彩票71158| www.923123.com-上彩票3cp-| www.972669.com-gv彩虹世界论坛| 汇彩网www.www.hcw266.com| www.mr09.cc-彩票七星彩开奖结果| www.9749.xyz-瑞彩祥云app安卓| www.057484.com-宝马彩票下载安装| www.165556.com-彩六季票怎么买| www.896883.com-分分彩手机能挂机吗| 购彩票www.c5908.com| www.g67.club-新万彩吧资料| www.633.la-香港大公报一码彩经| www.023178.com-中国球彩票网| www.158413.com-足彩源码-| www.289435.com-快乐彩怎么玩| www.418234.com-正规的nba博彩| www.832301.com-七彩视界ios| www.ma11.com-彩票平台哪个反水高| www.007959.com-辽宁有快三吗| www.095295.com-彩票投注方式| www.222462.com-全天湖北快三计划| www.305765.com-彩票一般买哪个好| www.036020.com-有哪些中彩网| 凤凰彩票www.5091b.com| www.86457.com-彩票大神吧-| www.040358.com-七星彩开奖公告查询| www.111693.com-赠彩金的app| www.356900.com-中山体彩中心| www.090595.com-彩票代玩兼职怎么找| www.65965.cc-广州举报黑彩方法| www.8376.xyz-福彩晚秋和值谜| www.608069.com-韩国快三在哪里买| www.714432.com-福彩山地字谜| www.831072.com-577彩票安全吗| www.912969.com-好彩客网站合法吗| www.lp83.com-财经彩票下载安装| www.21vi.com-体彩考试题库| www.66512.cc-南洋乐和彩几点开奖| www.077033.com-app彩票合法吗| www.502722.com-微信快乐彩有托吗| www.571725.cc-时时彩绝密技巧| www.104949.com-欧盟好彩柠檬| www.293136.com-体彩481对子技巧| www.396862.com-多彩宝小助手下载| www.998345.cc-快三单双大小计划网| www.jo37.com-体彩排列三杀和值尾| www.b29.net-高频彩为什么调整| www.30mb.com-四季型的色彩特征是| www.86xc.com-易彩代理注册网址| www.1062.wang-彩名堂做假-| 多媒体信息发布系统_56i大乐透彩票字谜q数字标牌软件官网| www.5222.bid-温州体彩招聘| www.594700.com-500好彩堂跑狗图| www.651972.com-幸运彩票赚钱| www.712862.com-网赌分分彩先赢后输| www.817608.com-快三自动计划软件| www.222562.com-云顶彩票送45| www.135000.cc-新亚安欣经营彩票吗| www.206061.com-彩票中奖是骗局| www.410999.com-足彩竞彩开奖时间表| www.527699.com-时时彩三星怎么做号| www.9486.cc-新浪竞技足彩彩票网| www.43534.com-彩世界苹果怎么下载| www.86787.com-竞彩猫官网登录| www.055096.com-红色彩色沥青| www.344187.cc-手机时时彩票模拟器| www.366920.com-山东体彩领奖地点| www.684033.com-p五跨度南方双彩| www.147833.com-163彩票网靠谱吗| www.532498.com-临沂市体彩中心| www.ks91.cc-彩票分析师怎么赚钱| www.426178.com-聚氨酯彩钢板板型| www.052569.com-91彩神快三代玩| www.62388.cc-全民福彩是什么意思| 乐发彩票www.64040.com| www.42ce.com-七彩球视频-| www.34040.com-彩吧网彩报图库| www.518974.com-a5国际高频彩票| www.810343.com-彩票谜语什么意思| www.65ab.com-重庆时时彩基本走势| www.2828.space-uu彩票ios链接| www.0671.com-彩票销售点怎么申请| www.9546.xyz-海南2020年彩票|