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.977487.com-彩妆超市加盟| www.071320.com-彩票店开业促销礼品| www.35411.com-微信彩票群怎么拉人| www.019470.com-贵州省体彩兑奖地址| www.345416.com-vr彩票是黑平台吗| www.001594.com-七乐彩胆拖奖金| www.073510.com-彩6安卓版下载| www.7037.biz-香港49彩票-| www.231620.com-豪彩app下载安装| www.768958.com-英超足彩网-| www.937583.com-6c彩票-| www.650301.com-水彩画花朵-| www.484020.com-刘雪龙时时彩诈骗| www.591048.com-西甲最大的博彩公司| www.732581.com-福彩彩开奖视直播| www.822345.com-爱博彩票下载| www.976797.com-淄博彩礼钱的价格表| www.nx86.com-凤凰v彩票免费计划| www.377390.com-彩票咋买-| www.596654.com-福彩3d预测软件吧| www.693132.com-福彩六加一怎么买| www.771647.com-上海体彩申请投注站| www.847237.com-古建牌楼彩绘图片| www.912345.com-买时时彩私彩犯法吗| www.974159.com-福运彩为什么要账号| www.cp3738.com-百盈彩票-| www.bj31.com-彩票app平台下载| www.2715.org-台州福彩兑奖中心| www.60dl.com-五洲彩票登录| www.il15.com-新浪爱彩德甲| www.9cp.com-中国4d彩票-| www.011.loan-中国七星彩开奖| www.231683.com-中福彩票app下载| www.881337.com-利记是哪里博彩| www.74bs.com-彩银制品价格骗人| www.pb39.com-天津11体彩-| www.46pk.com-乐透彩票开奖历史| www.07ms.com-筒井彩芽照片| 博乐彩票www.35918k.com| www.757569.com-福建体彩36+选7| www.950021.com-8炫彩福利彩票玩法| 彩票5www.550194.com| www.lm72.com-中彩网3d论坛新帖| www.03.me-体彩微信兑奖| www.147765.com-购彩堂彩票是真的吗| www.752188.com-中国彩票有几种| www.905691.com-9780彩票-| www.cv0.com-江苏快三走势势图| www.wt29.com-甘肃快三图表| www.20sx.com-黄家彩世界下载| www.38aw.com-河南福利彩票跑号码| www.740202.com-牛彩网开机号对应码| www.74ec.com-彩宝11选5-| www.984774.com-快乐彩票骗人吗| www.13qr.com-网易彩票网下载| www.062.hk-彩16正规吗-| www.917300.com-108彩票-| www.990077.com-釉中彩和釉下彩安全| www.dj14.com-彩票开奖查詢| www.079088.com-七乐彩托胆计算| www.862190.com-怎么黑彩票主机| www.1064.xyz-1588彩票-| www.231005.com-河南体育彩票| www.324476.com-七乐彩独胆码必出| www.420605.com-陕西竞彩加盟| www.496733.com-国际彩票是什么| www.577951.com-江苏快三如何中奖| www.641722.com-七星彩本期开奖结果| www.717941.com-体育彩票世界杯赔率| www.872.red-中国竟彩比分直播| www.7788.date-竞彩高手心得| www.706438.com-极速时时彩是否有假| www.799590.com-彩票快2中奖多少| www.883901.com-名人彩票测速登录| www.987562.com-爱乐透彩票门户电脑| www.bx89.com-广西福彩下载| www.f33.cn-彩库宝典苹果版| www.4672.com-最好的买彩网| www.600515.com-有没有一块钱的彩票| www.73872.com-体彩网怎么买世界杯| www.7785.xyz-新彩结课心得| www.320234.com-3d乐彩开奖号| www.cp6262.com-彩乐乐网址-| www.841062.com-福彩主管判刑| www.981732.com-567彩票靠谱吗| www.44204.com-福建体彩中心招聘| www.pe42.com-燕赵风采福利彩票网| www.2if.com-卖福彩和体彩哪个好| www.52jz.cc-牛彩网3d手机版| www.564895.com-亚彩彩票-| www.665567.com-福彩3d精准杀码村| www.770061.com-七彩视界真的假的| 美的彩票www.89338c.com| www.pl87.com-大发时时彩人工计划| www.21te.com-中国福利彩票口号| www.251448.com-开奖快的彩票网站| www.69213.com-彩票平台输钱怎么办| www.076443.com-体育彩票手机版| www.017636.com-易旺彩票骗局| www.119772.com-双数开彩是什么数字| www.728074.com-彩票销售截止时间| www.835015.com-焕彩来电秀-| www.951207.com-金豆彩票下载| www.fa84.com-爱彩乐彩票靠谱吗| www.427263.com-玩时彩把赢的钱输了| www.722755.com-省份快三彩票| www.865610.com-彩票预测七乐彩| www.if85.com-彩票中奖故事| www.2jy.com-彩皇网时时彩| www.114937.com-97彩票官方-| www.199407.com-河南福彩3d-| www.973879.com-彩票361官方注册| www.bi72.com-怎么做快三彩票网站| www.77239.cc-怎么让彩票中奖率高| www.819456.com-91联盟彩票-| www.880835.com-快开彩票漏洞的软件| www.65ro.com-豪彩彩票主管| www.0579.pro-古彩图片-| www.357336.com-彩票中20万-| www.67716.com-彩票棋牌游戏官网| www.4564.cc-福彩3d34期开奖| www.94331.com-微信pc彩票是什么| www.762469.com-贵州体彩网迟丽颖| www.874171.com-老谢说彩专栏| www.971484.com-彩票最新开奖号| 成功彩票www.le33.cc| www.jt87.com-河北保定快三查询| www.08lt.cc-中彩网怎么购彩| www.87ps.com-冠彩直播间-| www.038448.com-彩经网旧版本走势图| www.kx03.com-大发快三有假吗| www.68tx.cc-乐8彩快3下邀请码| www.1767.me-万彩动画激活码| www.52879.cc-澳门好彩香烟| www.358729.com-第一次买体彩怎么买| www.400116.com-南国彩票论坛精选| www.445953.com-易彩可以提现吗| www.707772.com-签到领彩金的彩票| www.789507.com-腾讯一分彩稳赚技巧| www.876666.com-体彩p5开奖结果| www.947766.com-众彩网千里马| www.997347.com-百彩网香港综合料| www.kw22.com-天天快三靠谱吗| www.t39.com-中山彩票店转让| www.39nf.com-嘉兴福彩快三| www.071.date-体彩七星彩中奖故事| www.2469.cm-不思议迷宫兔子彩蛋| www.439827.com-体彩大乐透中奖人数| www.653865.com-奔腾彩票登陆| www.ph11.com-彩票筛选工具| www.02qu.com-pk10聚彩彩票| www.65su.com-移动手机彩票投注| www.7027.cm-在哪里买nba彩票| www.45261.com-头条彩票软件可靠吗| www.062593.com-优信大发时彩主页| www.78gk.cc-怎样买国外足彩| www.1518.xyz-中国福到彩票双色球| www.8224.com-澳门彩票可以买吗| www.67112.cc-福彩3d表格-| www.365960.com-体彩排列三七码遗漏| www.9rh.com-玩彩票需要银行卡吗| www.78cj.com-买国外的足球彩票| www.1481.xyz-精彩中国说程家家| www.6985.shop-七星彩的中奖方法|