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.j33.biz-免费送试玩彩金| www.29952.cc-彩票风控审核违规| www.057678.com-九宫五行测彩法| www.625176.com-七乐彩专家汇总| www.762957.com-黑彩坐庄怎么判刑| www.897553.com-竞彩足球计算器| 幸运彩票www.73166e.com| www.4052.cm-三弟牛彩-| www.62178.com-彩票大赢家首页| www.375263.com-体彩组选三-| www.781434.com-中原福利彩连连乐| www.832543.com-七彩云盒app| www.920116.com-赢彩王破解免费版| www.998417.com-北京彩票站怎么加盟| www.ed76.com-做彩票代理安全吗| www.964317.com-富人人彩票下载| www.cp218.com-4s彩票藏宝阁| www.966525.com-足彩票比分直播| www.cp7277.com-吉林省快三赌博案例| www.385030.com-梦见彩票-| www.505959.com-财政部彩票司| www.578909.com-pk彩吧手机版本| www.074720.com-彩富网最快-| www.371720.com-大发快三计算技巧| www.490859.com-那些网站可以买彩票| www.576426.com-福彩双色球走试图| www.660776.com-足球胜负彩开奖公告| www.756689.com-全民彩票苹果怎么玩| www.829870.com-申请彩金送58| www.904130.com-四场进球彩-| www.984851.com-高频彩赚钱吗| www.xg3.cc-彩票湖北快三开奖| www.ja21.com-快三群有没有托| www.216639.com-竞彩足球胜平负计算| www.137746.com-大中华彩票下截| www.044969.com-xy313幸运彩| www.427318.com-什么软件能买足彩| www.478283.com-买彩票世界杯| www.334442.com-高频彩助赢计划网| www.350238.com-9万彩票贴吧| www.5629.in-福彩刮刮乐送金条| www.1820.in-体彩大乐透三位数| www.ap42.com-北京快三玩法说明| www.331656.com-彩票技术分析方法| www.201456.com-福彩3d惊人的规律| www.875569.com-今期彩霸王图库| www.061619.com-彩客网五分快三| www.434996.com-彩票代销费怎么拿| www.1100.hk-邯郸市体育彩票地址| www.44603.com-加入购彩团队安全吗| www.067941.com-快三概率分析软件| www.207339.com-那个彩票网站倍率高| www.330072.com-旧版中国彩吧更懂民| www.484234.com-体育彩票刮刮乐7| www.662503.com-彩娱乐代理-| www.798215.com-易彩集团一首页| www.15238.cc-凤凰快三下载| www.885971.com-实时平台彩-| www.954417.com-从彩网-| 凤凰彩票www.3479u.com| www.gt26.com-彩票店赊账打快三| www.yl32.com-长春彩逸-| www.19sw.com-彩票计划在线聊天室| www.618841.com-云南省福彩中心电话| www.29951.com-共赢彩票是合法吗| www.76100.com-彩票废纸-| www.655969.com-下载博友彩票| www.736692.com-今日福彩三地谜语| www.wt52.com-快三安徽形态走势图| www.130061.com-055zcc福彩网| www.up20.com-广西福彩官网app| www.984967.com-今日福彩3地字迷| www.02mr.com-七比一世界杯彩票| www.90kz.com-鑫利博彩怎么样| www.4240.cc-七乐彩五等奖多少钱| www.yk89.com-彩票计划手机版| www.39rn.com-风雨彩虹-| www.719692.com-七星彩16148期| www.801592.com-彩票开奖终端机| www.872610.com-湖南体彩大乐透| www.933105.com-彩票群炒群常用话语| www.980962.com-彩票账号登录异常| www.cp028.com-江西福彩快3推荐| www.21298.com-买彩票怎么打不开了| www.07914.com-中彩那天课后生字| www.198981.com-彩票赠与-| www.301202.com-快三快三和值表| www.036007.com-福彩最牛广告语| www.129912.com-体彩大乐透在线购买| www.804303.com-易彩2.1下载安装| www.73058.com-捷豹彩票网-| www.673396.com-ww1750乐彩网| www.456934.com-恒彩app是干嘛的| www.297571.com-下载v8彩-| www.900614.com-注册就送彩金的网站| www.983224.com-彩31官网-| www.dq56.com-北京快三结束时间| www.99228.com-网上的极速时时彩| www.198543.com-湖北体彩网-| www.288230.com-江苏快3爱乐彩走势| www.411188.com-双色球唯彩会| www.568418.com-体彩蓝齐儿断组| www.706606.com-安徽省福利彩票开奖| www.626161.com-盛兴金祥彩票网| www.691675.com-新浪胜负彩开奖| www.801045.com-彩票天天彩选四开奖| www.868956.com-现在买彩票挣钱吗| www.952064.com-500彩票一分快三| www.999696.cc-长沙彩票店-| www.bp60.com-时时彩过滤工具手机| www.py06.com-福彩快三速查表图| www.119776.com-双数开彩什么动物| www.34it.com-go6h彩图-| www.25gz.com-华彩注册-| www.141.biz-彩虹天堂和风的顺序| www.1288.top-上海彩票中奖名单| www.504639.com-彩排的彩是哪个彩| www.85845.com-彩哥计划下载地址| www.jd74.com-明彩彩票app| www.08cf.com-彩票与生活图片大全| www.cai9255.com下载河北快三走势图| www.04nc.com-主题画动物园彩铅| www.1160.vip-3d彩票术语-| www.365551.cc-用彩色铅笔花的桃花| www.063108.com-彩票投注站投资多少| www.197277.com-乐彩网的骗局| www.042922.com-今晚六会彩开奖结果| www.6696.vip-千福彩票网址| www.22986.cc-傲赢彩票正规吗| www.74707.com-体育彩票推荐号| www.879276.com-大发快三邀请码| www.773812.com-国外搞时时彩犯法吗| www.65ds.com-老杨彩店-| www.520487.com-体彩和福彩的玩法| www.503895.com-易博彩票下载安装| www.593512.com-体彩七位数随机中奖| www.675409.com-七乐彩好中奖吗| www.860607.com-699彩票-| www.916034.com-彩票店的经营方案| www.977351.com-彩票哪个软件靠谱| www.cai22.cc-快三在线投注平台| 天朝彩票www.15237.cc| www.029.net-传奇彩票手机版| www.328005.com-福彩三天计划必出来| www.864662.com-老时彩开奖号码| www.334476.com-有没有玩滴滴彩票的| www.697903.com-彩票站网站大全| www.3238.vip-彩588开奖-| www.979316.com-福彩票开奖号码| www.54ew.com-怎样下载彩民周刊| www.441524.com-928彩票安全吗| www.558084.com-大家赢彩票骗局| www.640057.com-22彩票网站怎么样| www.563706.com-今日彩是骗人的吗| www.528352.com-分分快三怎样能稳赚| www.5506.top-汇佰彩票-| www.7855.in-买足彩顺口溜| www.58459.com-彩霸王精准论坛| www.833631.com-彩票开奖15选5| www.911843.com-时时彩大神交流贴吧| www.984415.com-彩票大师官网| www.bb49.cc-数字新浪彩票| www.yk41.com-福彩兑奖查询| www.348950.com-合肥阜南竞彩店|