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.702870.com-足球彩票如何跟单| www.833977.com-软包好彩多少钱| www.912266.com-菲律宾干黑彩的工作| www.977594.com-推荐一款彩票app| www.cp654.com-4亿彩票送41| www.861461.com-qq腾讯彩票-| www.967978.com-宁夏新闻彩票中奖| www.cp647.com-彩神x是真的吗| www.mh08.com-新浪爱彩时时彩| www.4rj.com-什么是彩票-| www.76lh.com-七乐彩销售截止| www.3684.vip-竞彩足球手机彩票网| www.9378.shop-cc在线彩票-| www.39225.cc-彩票规则和开奖日期| www.381171.com-星期五能买哪种彩票| 大赢家彩票www.584911.com| www.993698.com-希腊十分彩下载安装| www.fx15.com-探探男带玩彩票| www.479178.com-扬州体彩中1000| www.663431.com-vr彩票的软件| www.780668.com-彩吧开机号查询| www.893566.com-乐彩网猜大小和单双| www.968364.com-胜负彩开奖结果查询| www.kl73.com-中国竞彩网双色| www.i18.net-体育彩票谜语| www.34rv.com-南粤七星彩票论坛| www.69252.com-9奖足彩开奖结果| www.052978.com-竞彩足球彩票网| www.154900.com-足彩2串1入门教程| www.817915.com-一定牛彩票电话投注| www.932132.com-七星彩中三个号间接| www.cp8158.com-易彩快3开奖规律| www.vx63.com-江苏快三开始时间| www.05471.com-彩票过滤器手机版| www.85966.cc-足彩滚球漏洞| www.079028.com-9彩票网-| www.221595.com-快三破解软件| www.339116.com-14场购彩大厅| www.863190.com-江苏快三大小稳赢| 汇彩网www.hc8858.com| www.33yb.com-下载七星彩奖表| www.92238.com-精彩彩票网-| www.666864.com-彩95的网址-| www.3243.vip-178彩票网提现| www.2831.wang-好彩投彩票最新| www.14430.cc-七星彩没有规律我吗| www.78593.cc-彩票双色球走势图| www.sx14.com-七星彩几点钟开奖| www.428211.com-369足彩缩水软件| www.581023.com-8868.彩-| www.88791.cc-彩管家5.0版本| www.139854.com-黄直播赌博彩票平台| www.307098.com-中国彩票最大奖| www.468036.com-猜冠军彩票网站| www.425761.com-彩富会员料-| www.574543.com-703彩票、资料| www.499542.com-88250彩票-| www.592911.com-彩虹桥上做什么| www.717516.com-彩色铅笔画技巧| www.819781.com-射手座买彩票什么号| www.933873.com-新浪网彩票频道| www.cp9238.com-中彩app官方下载| www.uj02.com-福利彩票福彩三d| www.65wi.com-博彩水-| www.055476.com-66好彩app-| www.952923.com-体彩六十一开奖号码| www.541253.com-自己弄彩票网站| www.71994.com-彩票彩猫-| www.135413.com-体彩终端机安装| www.266111.cc-高频彩票要调整| www.512917.com-大家赢彩票走势图| www.686897.com-天下彩喜中彩天空彩| www.871280.com-快三预测大小| www.b03.cc-教水彩-| www.035163.com-十分钟彩票倾家荡产| www.151355.com-彩漂剂效果好吗| www.262397.com-江苏体彩ll选5| www.364968.com-分分彩k线图手机版| www.39261.com-中彩手彩-| www.039923.com-福彩3d合买网| www.944533.com-248彩票下载安卓| www.380511.com-彩票首存送-| www.579046.com-游戏彩金是什么意思| www.089327.com-大众彩票-| www.601048.com-彩票跟那期好| www.67nf.com-盼望竞彩app| www.8867.cm-彩票3d漏洞-| www.073520.com-江苏彩票七位数开奖| www.239444.com-江苏快三输了十几万| www.377795.com-福利彩票站几点关门| www.908554.com-二分快三遗漏| 中彩网www.81233f.com| www.rx19.com-旺财彩票app| www.66ht.com-博亚彩票下载| www.6853.top-体彩飞鱼有什么规律| www.39783.com-九彩彩票手机版| www.779553.com-江西双色球彩票中心| www.760348.com-彩票团队人工计划| www.410250.com-中大奖彩票app| www.76255.cc-玛雅吧彩票-| www.106502.com-亚彩-| www.250758.com-全中彩票97折| www.634646.com-建盏多长时间养七彩| www.41515.com-彩影免注册版| www.6201.vip-极速三分彩-| www.48kj.cc-全民快三压大小| www.363925.com-江苏快三二同号单选| www.52632.com-分分彩后三-| www.123419.cc-最新彩票信息网| www.388243.com-彩票白菜什么意思| www.654427.com-江西福彩兑奖中心| www.0544.cn-彩票481属于什么| www.ar36.com-体彩吧-| www.32jw.com-印度三合乐透彩资料| www.3737.bid-七乐彩19024| www.9944.cn-彩票开奖查询31期| www.679986.com-2m2元彩票网| www.804199.com-网上买体彩票| www.881464.com-13彩靠谱吗-| www.cp9598.com-中彩江苏快三下载| www.pg91.com-天下彩944cc| www.m97.top-可以网络买彩票吗| www.3623.biz-网络彩票受害者| www.863815.com-福彩主任王素英| www.993948.com-快乐彩票68-| www.ms31.com-彩票有几位数组成| www.62yv.com-阿理彩票app| www.085207.com-台湾福星彩最快开奖| www.288668.cc-2元彩票走势图大全| www.386255.com-ok95彩票-| www.523528.com-彩时时彩预测家安卓| www.709198.com-澳洲彩票-| www.801932.com-彩云字体-| www.955920.com-今天足彩胜负对阵表| www.97755.com-足彩一月赛程安排| www.106846.com-瑞彩彩票官方网站| www.390012.com-免费送18彩票| www.666001.cc-新加坡天天彩票| www.89ka.com-守信彩票导师| www.4364.vip-赊账买彩票中奖| www.37668.cc-竞彩倍投计划骗局| www.912012.com-私彩是什么罪| www.wn46.com-达人彩票快3| www.0415.in-迪士彩乐园网址| www.21782.cc-套平台彩金后果| www.oe18.com-计划彩票-| www.435.xyz-彩票五百万中奖概率| www.52524.com-中国福彩自助下载| www.084779.com-福彩机连接电视口| www.275252.cc-湖北快三走势图基本| www.435211.com-彩王之巅直选五注| www.hj79.com-香港49彩票app| www.214374.com-appcp快三-| www.351273.com-体彩绝杀一码| www.502353.com-中国彩吧彩吧助手| www.00882.cc-彩票种类大全图片| www.479588.com-山西体彩在哪兑奖| www.604932.com-福彩双色球微信群| www.707511.com-快三软件骗人吗| www.812072.com-靳加坡天天彩资讯网| www.072999.com-福利彩票十大巨奖| www.656888.cc-九彩彩票软件下载| www.226103.com-百盈江苏快三代理| www.41xr.com-唯彩会大乐透杀号|