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.qp62.com-福彩文化的理念| www.989946.com-彩漂液对身体有害吗| www.jv93.com-七星彩复式胆拖| www.216156.com-快三豹子软件| www.069339.com-北京体彩官方网站| www.358918.com-四川福彩手机报下载| www.586565.com-彩票分析数据手机版| www.1721.cn-掌上彩首页-| www.676831.com-福彩3d矩阵图怎看| www.475313.com-彩客网足彩开奖| www.213773.com-彩神4-| www.11362.cc-竞彩天天手环| www.3796.cn-七星彩论坛特区规律| www.309758.com-湖北体彩五d走势图| www.92ib.com-去哪里找彩票工资车| www.48hn.com-中国星彩3d下载| www.51495.com-双色球中彩网首页| www.0750.xyz-体彩七位数随机选号| www.39586.cc-九哥彩票官方网站| www.ic5.cc-内蒙体彩11选五| www.249442.com-人人中彩网官网| www.687038.com-彩票中奖率-| www.68747.com-乐彩网官方网站| www.254823.com-网上时时彩彩票骗局| www.v99.wang-彩票自动提醒功能| www.400439.com-拉人进彩票群话术| www.095217.com-彩票领奖拒绝采访| www.221771.com-彩票改单技术截图| www.355022.com-福彩去哪里买| www.596510.com-数彩博士3d-| www.105333.cc-还有买彩票的软件吗| www.647536.com-中发彩票官方网站| www.731339.com-体彩实体店app| www.693540.com-头奖彩票系统恢复| www.347474.com-排列三南方双彩| www.656764.com-时时彩怎样包码赢钱| www.765204.com-七星彩海口彩票论坛| www.rg98.cc-8亿彩网骗局揭秘| www.23561.cc-网上买彩票几百人| www.664289.com-七彩乐开奖时间| www.751994.com-彩拾彩票网页版| www.833932.com-好彩36选3计算| www.927580.com-破解福彩3d断组法| www.18169.cc-合乐彩票多少人被骗| www.760872.com-雍正乾隆珐琅彩| www.601.tv-体彩排三开奖号码| www.16865.cc-v98彩票下载| www.050001.com-找黑彩坐庄的老板| www.46qx.com-分分快三预测豹子号| www.1444.vip-彩铅手抄报大全| www.9011.org-乐彩33官网-| www.4794.vip-腾讯代理彩虹六号| www.17132.cc-京彩e账户下载| www.897776.com-多彩贵州风门票| www.971947.com-湖北万彩票网| www.eg88.cc-吉林快三开奖纟结果| www.733127.com-苹果彩铅画-| www.814421.com-体彩今晚上开奖结果| www.887930.com-cc彩球网国际平台| www.954212.com-709彩票网下载| www.999555.com-彩票推广犯法吗| www.xk3.com-大发快三彩票注册| www.ov26.com-福彩五分钟一期的| www.n88.pw-彩票开奖网站源码| www.35dw.com-彩票引流进来的话术| www.9636.space-大乐透经彩网走势图| www.73hu.com-凤凰彩票规律| www.1413.cm-福彩双色球杀红号| www.6938.cn-七彩云南是哪七彩| www.15144.com-杭州福彩中心地址| www.68864.com-彩票双色球对比器| www.609457.com-柬埔寨5分彩| www.338555.cc-高频十分彩开奖| www.485567.com-买彩票为什么难中奖| www.578813.com-彩票店室内布置| www.670278.com-体育彩票几等奖| www.753172.com-3d真福彩早早报| www.xt14.com-彩虹六号玩家后遗症| www.456038.com-4s彩票现场直播| www.69964.com-盛世彩票app| www.087042.com-10彩票app-| www.yl57.com-澳门彩票网上投注| www.329165.com-福彩安卓-| www.541771.com-体彩网上购买系统| www.332236.com-举报彩票网站| www.7998.top-能玩彩票的app| www.179068.com-微信群里玩快三幕后| 华彩www.71399m.com| www.575151.com-怎么买欧洲彩票| www.709490.com-湖北福彩短信投注集| www.800388.com-河南省福彩在哪兑奖| www.884284.com-杏彩网页登陆入口| www.954718.com-瑞彩祥云首页| 68彩票www.68689l.com| www.bm53.com-大发彩票下载地址| www.yt59.com-杜新会奇门测彩票| www.83380.com-易中彩票怎么样| www.071782.com-快三宝典app下载| www.22599.cc-七乐彩现场摇奖结果| www.587871.com-正版彩票官方认证| www.1133.date-晨兴彩票计划| www.110233.com-爱彩乐注册要收费吗| www.033617.com-app彩-| www.126607.com-q彩票网是真的吗| www.836562.com-中原彩票快3骗局| www.942422.com-go彩票官网-| 888彩票www.16001.com| www.74163.com-金彩彩票网代单老师| www.329903.com-乐博现金网彩票游戏| www.kx67.com-红快3彩票-| www.261308.com-北京3分彩开奖规律| www.6386.pw-财富彩票的网址| www.748106.com-福彩3d专家号| www.871328.com-福彩排三三d开奖| www.997771.cc-体育竞彩胜平负| www.nx36.com-中福快三网站| www.71xg.com-240彩票-| www.500534.com-北京高频彩有哪几种| www.600078.cc-买彩票真的能赚钱吗| www.340735.com-盘口足彩-| www.502971.com-678彩票靠谱吗| www.618690.com-人人赢彩票下载安装| www.761250.com-好彩妹好彩自然来| www.859957.com-彩票平台软件出租| www.484409.com-红旗彩票平台网| www.568942.com-新运种福彩-| www.660350.com-章鱼彩票官网页版| www.806157.com-福彩3d预测资料| www.758258.com-想找个彩票代理上级| www.825828.com-彩神vlllapp| www.679439.com-至尊彩-app官网| www.gi6.com-福利彩票所有彩种| www.a37.top-福利彩票提前开奖| www.698480.com-分分时时彩前三预测| www.855983.com-新加坡快三走势图| www.x77.wang-彩8娱乐重庆时时彩| www.8673.in-彩票开奖31期查询| 乐彩网www.160951.com| www.175328.com-彩票开挂神器| www.39871.cc-彩票巴士怎么提现| www.735336.com-廣東彩票-| www.804576.com-海南彩票源码| www.883183.com-鸿彩网下载-| www.968595.com-中乐彩网站-| www.wq.com-手机快三倍投计算器| www.m47.com-体彩排列三试机今天| www.2188.xyz-迅盈彩票是骗局揭秘| www.79kq.com-时时彩人工计划彩友| www.55628.com-彩票日亏损返利| www.029760.com-腾讯分分彩开奖源| www.4643.com-彩票买全号-| www.065175.com-彩铅画教程视频| www.258715.com-中国足彩网官方网址| www.338241.com-梦到彩票中了二等奖| www.040021.com-广东快彩-| www.158920.com-机选七乐彩-| www.144540.com-彩票充100送30| www.237218.com-vip彩票下载安装| www.319854.com-排三彩宝贝十位杀号| www.408249.com-中国体育足彩网| www.508017.com-唐龙说彩排三| www.ra02.com-淘宝如何买彩票| www.318944.com-海南快三彩票| www.564498.com-河内五分彩全天计划|