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天

知道了
彩01彩票 www.062032.com-精准彩票预测网站| www.563106.com-正彩文具怎么样| www.693676.com-还能用的彩票app| www.802289.com-精彩视频免费观看| www.996161.com-中国竞彩网即时比分| www.986162.com-足彩胜负彩专家推荐| www.10091.com-山东福彩中心下载| www.00469.com-众彩平台-| www.295882.com-中国体彩票开奖公告| www.392817.com-快乐彩派奖-| www.552324.com-在线购买大乐透彩票| www.636680.com-彩虹蜡笔画-| www.581123.com-胜负彩推荐预测| www.013332.com-南国体彩论坛4十1| www.167607.com-极速快3彩票| www.755829.com-旺彩双色球安全吗| www.03453.com-如何戒买彩票| www.127988.com-彩虹儿歌歌词| www.pn03.com-彩票选号规则| www.571725.com-福利彩票我要投注| www.523295.com-柬埔寨时时彩| 彩乐乐www.cll168.com| www.664976.com-快三网站排行| www.757714.com-中彩网钱能提出来吗| www.841825.com-本周彩票中奖号码| www.927282.com-福利彩票几个数字| www.982338.com-日本彩票中奖规则| www.ll.cc-大发快三计划官网| www.7574.me-东方竞彩app| www.39321.cc-中彩彩票怎么注册| www.94882.com-足彩概率差之间分析| www.99zt.com-重庆高频彩微信| www.8219.loan-澳门官方三合彩| www.37767.cc-华彩生活下载| www.005452.com-湖北快三跨度和值表| www.122191.com-福彩开奖l-| www.226768.com-湖北快三游戏开奖| www.305741.com-也买彩网站正规吗| www.372579.com-吉林快三和值列表| www.477337.com-中国福彩加盟赚钱吗| www.433431.com-彩票获得者-| www.597269.com-众亿彩票是真的吗| www.820918.com-彩钢板漆膜标准| www.935779.com-福建快三昨天走势图| www.eu0.com-中彩网app正规吗| www.869187.com-巨丰彩票怎么样| www.028657.com-黑彩代购-| www.9109.org-网易福彩直播现场| www.49703.com-皇冠足彩app下载| www.7689.cc-新浪竞技数字彩票| www.359887.com-体育彩票如何代理| www.522709.com-时时彩第一球是万位| www.69955.com-福彩3d果今天| www.113511.com-国家认证的彩票软件| www.080673.com-马来西亚盛兴彩票| www.185930.com-湖北快三一定牛走势| www.274617.com-35彩票网-| www.h02.com-万彩吧下载安装| www.881924.com-yy刷彩金兼职平台| 8号彩票www.60108y.com| www.1890.wang-多彩贵州招聘吧| www.9200.in-彩票app小鹿助手| www.8602.wang-利博彩票app网址| www.64038.com-足彩5808万-| www.68au.com-大星彩票开奖查询| www.966209.com-广西快三群里赌博| www.bp03.com-福彩3d过滤工具| www.k33.cn-福彩中心领奖| www.112262.com-3d彩吧图迷第一版| www.233474.com-福彩快三大家输多少| www.337652.cc-宝发彩票下载网址| www.508776.com-360体彩大乐透| www.242185.com-彩票稳赚方案| www.835272.com-福利彩票藏机图| www.cai77.cc-快三开奖湖北| www.069752.com-南方双彩最新版本| www.187619.com-今日彩票预测| www.321440.com-彩票查看结果| www.451282.com-幸运分分彩是假的吗| www.22ex.com-入侵彩票平台| www.cj04.com-大发快三怎么能赢钱| www.48zj.com-6d彩乐网下载安装| www.026375.com-日彩网平台-| www.121607.com-百合男骗时时彩| www.04re.com-快三跨度中奖| www.461899.com-好彩客苹果下载不了| www.21ec.com-足球竞彩预测分析| www.94kx.com-本期七星彩彩缘之星| www.6795.com-彩票18054-| www.e28.cc-国彩能玩吗-| www.016.bid-福彩又-| www.615586.com-31选7私彩怎么买| www.72209.com-宁波亿彩购物网店| www.447554.com-足彩公众号排名榜| www.596073.com-2004年福彩和值| www.680006.com-福彩3d复试投注| www.785208.com-大胜彩票是真的吗| www.872190.com-贵州省彩票兑奖中心| www.cp8780.com-福彩快三软件下载| www.02ex.com-彩虹色的花完整绘本| www.335908.com-彩票可以随机选号吗| www.329256.com-七乐彩预测专家杀号| www.538917.com-历羸彩票-| www.29628.com-山东群英会彩票软件| www.14434.com-体育彩票过年放假吗| www.3303.top-彩色漫画本子| www.07369.com-139彩票登录| www.55293.com-时时彩大概率| www.294385.com-彩票1516网址| www.362502.com-福彩红五图库永久域| www.82465.com-星梦彩票综合图表| www.558902.com-彩票微信兑奖| www.060200.com-私彩报警-| www.038804.com-新大陆时时彩走势图| www.112101.com-泰安彩票弃奖| www.hq3.com-中国福彩快开彩| www.79544.com-彩票兼职诱骗| www.033835.com-机选彩票会中奖吗| www.904518.com-江苏快三购买网站| www.967943.com-彩票开奖网易彩粟| 网易彩票www.560721.com| www.265096.com-福彩三地振幅走势图| www.219078.com-百姓彩票苹果版| www.203017.com-下载吉林快三| www.927772.com-app彩票主页| www.ad86.com-彩798彩票官网| www.wq88.com-快三走势图带连线| www.5146.cc-贵阳中彩票的| www.295272.com-吉林快三开奖规律| www.364457.com-手机买彩票世界杯| www.444195.com-彩35会员-| www.525255.com-彩店宝彩票手机软件| www.874911.com-注册送彩金-| www.639441.com-彩票站买假刮刮乐| www.44906.com-广东彩票手游彩| www.633202.com-众乐彩大发-| www.7yu.com-南国彩票版杀手之王| www.668806.com-华人彩8800彩票| www.766456.com-福彩3d杀码图今天| www.838491.com-海南的七星彩| www.s85.org-梦见中彩票500万| www.515023.com-7星彩票app-| www.4365.tv-900w彩票网-| www.wz3.cc-内蒙快三合走势| www.124943.com-迷彩兔是哪里的网站| www.218123.com-亿彩app-| www.969779.com-福彩现在还敢买吗| www.11719.cc-网络博彩账号被冻结| www.55361.cc-福利彩票有几种| www.807065.com-温州福利彩票网| www.503355.com-彩之堂app正规吗| www.389418.com-中国体彩投注软件| www.591303.com-ck彩客网跟单| www.657888.com-57彩票下载安装| www.739676.com-彩票网站出款审核中| www.855821.com-福彩3d规则玩法| www.964851.com-浙江体彩网站| www.fx54.com-快三单机游戏安卓| www.68bd.com-唯彩官网-| www.2569.cn-808彩吧坑人吗| www.008581.com-网易彩票双色球预测| www.931150.com-七星彩网站去哪里买| www.983370.com-天音,福彩,基诺| www.jt.com-广西福彩助手|