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.33615.cc-91彩神登不上| www.681263.com-掌中彩掌中彩安卓版| www.790185.com-彩票选号神器安卓版| www.898972.com-外卖送彩票方案| www.967598.com-网络黑彩赌博证据| www.cai0111.com北京快三一定牛| www.2918.wang-佛山体彩中心地址| www.791962.com-大连体彩福彩转让| www.922068.com-高频彩票是什么原理| 星际www.m.55xj.vip| www.997852.com-福彩3d对子-| www.ir37.com-足彩胜负彩计算器| www.w60.cc-好彩频道app| www.279382.com-时时彩压豹子的规律| www.402882.com-定亲流程详解及彩礼| www.25879.cc-彩神助手-| www.537654.com-用彩色造句-| www.474996.com-3d双彩网站开机号| www.668002.com-7k彩-| www.18101.com-福利彩票模拟器| www.85809.com-彩涂钢板工艺| www.76108.com-足球彩票去哪买| www.6706.vip-12生肖彩票下载| www.1710.vip-中彩票的图片| www.815362.com-福利彩票在线投注卡| www.53627.cc-时时彩后一三码算法| www.551217.com-苏州竞猜快三查询| www.666628.com-青岛福彩王增先| www.229139.com-彩77下载官网腾牛| www.901378.com-k8彩票登录平台| www.979504.com-m彩色香烟-| www.gk6.com-购彩快三官网下载| 中彩网www.6661f.cc| www.28ax.com-全民乐彩-| www.07471.com-澳门彩票公司简介| www.386882.com-体育彩票信息查询| www.686558.cc-500彩软件-| www.777581.com-易盈彩票注册| www.np47.com-彩票大小走势分析| www.2yi.cc-彩票平台提款不到账| www.704836.com-998彩票官网下载| www.849422.com-一分时时彩开奖网| www.927102.com-江西多乐彩11选5| www.983876.com-吉林快三和值尾跨度| www.5058.biz-支付宝上怎么买彩票| www.vm43.com-分分时时彩计划号码| www.7717.loan-二分彩票星际集团| www.610703.com-今天足彩结果查询| www.778711.com-11选5多乐彩开奖| www.874729.com-竞彩收米邀请码| www.973409.com-彩虹哥卖号可信吗| www.dw24.com-凤彩app-| www.35707.com-99福彩-| www.682567.com-怎么买足彩-| www.788935.com-竞猜唯彩-| www.873716.com-七乐彩300期| www.948185.com-中彩网开机号| www.994353.com-体育彩票兑奖查询| www.cp98.cc-购彩网站北京快三| www.uv34.com-老谢说彩004| www.717949.com-彩票胆组什么意思| www.765020.com-彩票平台搭建开发| www.856013.com-彩票真的会中奖吗| www.566776.com-小鸡彩虹儿歌歌词| www.664743.com-七乐彩历次开奖结果| www.741703.com-体彩图谜画谜| www.363050.com-雨后彩虹像什么| www.887860.com-我爱彩票软件| www.972541.com-彩铅画竹子-| www.cp683.com-新快三app-| www.pr70.com-玩快三输了怎么办| www.3dd.com-彩票福利彩票开奖号| www.102022.com-射龙门彩票计算法| www.267120.com-足彩19031-| www.350825.com-最火手机彩膜图片| www.497639.com-彩之家赢钱不给提现| www.kz23.com-澳彩app-| www.215915.com-福彩网是正规的吗| www.322650.com-七彩乐最新开奖结果| www.393287.cc-彩铅画植物-| www.560809.com-彩运宝是正规的吗| www.621755.com-春秋彩票黑钱| www.680752.com-时时彩倍投在线计算| www.983643.com-北京快三一天开几期| www.336753.com-彩票天天彩选四| www.506378.com-卓越博彩论坛| www.281532.com-上海老快三开奖结果| www.04411.cc-快三官方app下载| www.863221.com-足彩19049推荐| www.962045.cc-手机体彩害死多少人| www.mf7.com-甘肃快三今日遗漏| www.tc84.com-什么彩票有快三| www.79th.com-极速快三口诀| www.68wo.com-玩分分彩-| www.153826.com-中国足彩馆网站| www.678600.com-精英彩票论坛| www.055899.com-四川成都快三查询| www.532028.com-九宫四柱测彩| www.616599.com-如何买竞彩-| www.175582.com-大发快三基本走势图| www.246044.com-江苏福利彩票双色球| www.11653.cc-三d荐号彩乐乐| www.rn79.com-深圳快乐彩开奖结果| www.lo28.com-内蒙快三遗漏统计图| www.79366.cc-快三可以打多少倍| www.050906.com-福彩快三青海走势图| www.673947.com-关于取消彩票快开| www.900026.cc-天天中彩票中奖给吗| 百姓彩票www.www.bxcp3333.com| www.xr96.com-重庆中彩票大奖案例| www.834766.com-新加坡好彩双爆| www.ac88.com-中奖查询彩票| www.40kd.com-重庆时时彩注册代理| www.865234.com-天下彩彩友网| www.og64.com-皇都彩票可靠吗| www.526276.com-彩资科-| www.928.online-杭州申请彩票投注站| www.861383.com-中彩网群英会| www.q16.club-河北快三分析预测| www.562396.com-国内最牛彩票投注站| www.779381.com-哪种彩票最简单| www.874911.com-注册送彩金-| www.982410.com-山西体彩网上购买| www.yh41.cc-7星彩开奖结果| www.318478.com-福彩排列七奖池滚存| www.377161.com-97彩票彩种| www.453381.com-彩票站中奖去哪领| www.528178.com-最新彩票指南报图片| www.866678.com-昨天3d出什么彩票| www.965604.com-爱乐透彩票福彩体彩| www.bk7.cc-湖北快三一定牛遗漏| www.zj17.com-3d福彩走势图预测| www.686642.com-600w彩票网网址| www.748527.com-旺彩平台手机版下载| www.802387.com-竞彩娱乐彩民福地| www.861280.com-体彩任选三规则| www.907002.com-体育彩票有四位数字| www.961945.com-三彩家托管到底咋样| www.999656.com-网易彩票能用吗| www.bi46.com-时时彩稳赢技巧买号| www.716373.com-敬力七星彩奖表| www.777075.com-彩宝宝app下载| www.833711.com-8亿彩注册-| www.881574.com-13彩下载-| www.939666.cc-彩富高手网-| www.979179.com-好彩蓝莓假烟| 大赢家彩票平台www.810629.com| 99彩票www.521787.com| www.ua25.com-晨兴彩票网站| www.26xh.com-领彩票需要身份证吗| www.687657.com-安卓彩神通彩票软件| www.778879.com-中国福利彩报图3d| www.860554.com-福利彩票奖金二等奖| www.916355.com-自己搞私彩被骗报警| www.963394.com-大发彩票开奖记录| www.175070.com-吉林快三下注平台| www.376312.com-安徽体彩开奖时间| www.520662.com-航天十一院彩虹待遇| www.215128.com-快三开奖爱彩乐| www.9199.in-彩票优惠活动送彩金| www.iz32.com-辽宁福彩3d-| www.907302.com-江西快三营业时间| www.70470.com-55彩票充值-| www.639846.com-东方彩票登录邀请码|