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.761446.com-腾讯分分彩心得| www.884558.com-三彩彩票官网| www.371996.com-体育彩票有人控制吗| www.509093.com-天刀射利彩签在哪做| www.629031.com-福彩彩神通金码一胆| www.536976.com-福建体彩现场直播室| www.753627.com-网上买彩票可信吗| www.481107.com-澳客竞彩开奖结果| www.009595.com-235彩票平台网址| www.358737.com-网上买彩票领奖流程| www.678239.com-开体育彩票店申请书| www.841934.com-5分快三全天计划| www.338.in-色彩花-| www.31518.com-开福彩店多少钱| www.542108.com-山东七乐彩开奖号码| www.835234.com-炫彩微商激活码| www.h07.net-瑞彩祥云app全民| www.57ta.com-彩票花呗平台| www.9126.biz-七乐彩随机一注| www.79wi.com-分分彩挂机方案制作| www.9015.vip-福利彩票网点有多少| www.697071.com-新彩票站论坛| www.872570.com-山西体彩中奖| www.74gr.com-彩票规则漏洞| www.538244.com-银海布衣彩报图| www.482441.com-彩虹六号名字大全| www.740813.com-香港博彩股票有哪些| www.05tn.com-彩铅牌子-| www.871875.com-彩票行家全年资料| www.974102.com-看彩票是在什么频道| www.yn2.com-什么是快3福利彩票| www.wh26.com-体彩开奖结果是什么| www.21nh.com-福利彩票考题| www.0562.org-中国福彩报电子版| www.36899.cc-福彩88下载-| www.959672.com-彩票一期一计划团队| www.cai4155.com10分快三合法不| www.935998.com-大发福彩官网| www.3068.live-七星彩txt网盘| www.288860.cc-彩票趋势分析理论| www.02144.com-河内五分彩机器人| www.236157.com-14场胜负彩票| www.583210.com-彩色激光打印机价格| www.y83.com-福彩布衣-| www.056342.com-彩票p图软件| www.29492.com-手机567彩票下载| www.2rm.com-彩票879靠谱吗| www.434134.com-福彩三d开奖比率| www.1140.net-聚宝彩票-| www.035109.com-8848魔方彩票| www.298737.com-七星彩小说-| www.456916.com-金巴黎彩票手机注册| www.662061.com-头头博彩-| www.738225.com-百度彩票排列五开奖| www.810921.com-彩票选1到几个号码| www.879583.com-网络彩票能小赚钱吗| www.947587.com-彩票诈骗举报电话| www.995683.com-足彩猜比分技巧| www.br92.com-信彩三分快三计划| www.873827.com-上海福采快三开奖号| www.974416.com-快乐彩55期-| www.da53.com-彩神x赚钱靠谱吗| www.128049.com-彩虹画-| www.52pm.com-宿迁市彩礼标准| www.3364.cc-彩虹社交app| www.473048.com-腾讯分分彩互刷| www.39si.com-7星彩复式怎么投注| www.955.xyz-那种彩票最简单| www.153790.com-新疆喜乐彩怎么玩| www.8861.in-本科彩票专业| www.6622.cm-218彩票app-| www.57530.com-英国5分彩开奖历史| www.603297.com-彩6怎么登陆| www.773543.com-天津时时彩开奖时间| www.855850.cc-3d彩易网-| www.933221.com-宝马博彩登录| 天天中www.88ttz.com| www.15370.com-浙江省福彩管理中心| www.gc71.com-福彩排列7开奖结果| www.312117.com-快三走势河北| www.424755.com-幸运十分彩走势| www.562076.com-时时中彩票软件| www.65882.cc-彩票模拟器安卓版| www.30mi.com-75秒时时彩开奖| www.245168.com-一网彩票开奖结果| www.742501.com-好运来彩票计划软件| www.606587.com-长沙体育彩票管理| www.797272.com-京彩娱乐官网地址| www.930152.com-日本彩票玩法| www.991445.com-海南七星彩图规| www.ta53.com-两元一注彩票几位数| www.6613.top-bb彩平台下载| www.098626.com-福彩在线手机版| www.687072.com-湖南体彩投注站| www.710065.com-帮别人代玩彩票兼职| www.437667.com-彩票挣钱吗-| www.594600.com-网上购买七彩彩票| www.720258.com-七星彩彩票秘籍| www.861310.com-彩报3d图库老虎图| www.970321.com-意大利刮刮彩| www.9440.in-福彩三地字谜开后门| www.150713.com-快赢彩票多少人玩| www.124813.com-迷你彩兔电视剧| www.93911.cc-胜负彩310走势图| www.077789.com-旺彩平台11选5| www.244.in-凤凰彩票漏洞赚钱| www.16395.cc-彩客网论坛-| www.632635.com-七彩视界账号注销| www.697933.com-彩报3d图库三毛| www.138053.com-安徽福彩快3开奖果| www.28591.com-炒股和彩票哪个稳定| www.69695.cc-易彩娱乐平台下载| www.033030.com-c78彩票-| www.591849.com-彩虹六号墨冰多少钱| www.87588.cc-98098彩票导航| www.3sw.com-京彩娱乐平台可靠吗| www.t63.cn-a6118彩票安卓| www.52na.com-江苏结婚不给彩礼| www.883822.com-新瑞博彩票-| www.966256.com-极速快三怎么研究| 成功彩票www.le33.cc| 凤凰彩票www.452816.com| www.122030.com-彩民论坛网-| www.348759.com-2019彩票中奖图| www.7407.xyz-福彩什么时候开售| www.003849.com-彩之源app网址| www.46474.com-怎么下载时时彩宝典| www.365387.cc-福彩双码遗漏| www.155920.com-双色球彩票号码查询| www.830180.com-盈彩彩票邀请码| www.970625.com-导师彩票赚钱骗局| www.yf96.com-派彩网二维码| www.857758.com-二分快三大小计划| www.dg8.cc-分分快三开奖直播| www.52bt.com-利彩正规吗-| www.71000.cc-qq彩票不能买了| www.037178.com-瑞祥彩云-| www.279663.com-分分彩技巧与方法| www.10242.cc-5分彩计划平台| www.963693.com-乐彩三d论坛静态版| www.ss59.com-福彩玩法及中奖规则| www.6222.live-3d福彩社区-| www.027743.com-棒棒彩票是真的吗| www.259995.com-福利彩票领奖流程| www.579487.com-体彩排列三克皇一胆| www.7528.shop-500彩票终端机| www.885389.com-大乐透2元购彩大厅| www.941112.com-福利彩票代理商| www.978195.com-富民彩票属于犯法| 乐彩网www.766898.com| www.dx18.com-易彩快三准确计划| www.ta18.com-必赢彩票为什么没停| www.ha4.com-福彩老头三d| www.053098.com-体育足球彩票怎么买| www.90020.com-788彩票网靠谱吗| www.69849.com-分分彩稳赚不赔计划| www.312367.com-苏宁彩票大发群| www.1393.me-彩票中奖交税过程| www.455530.com-河南福利彩-| www.017744.com-卓易彩票官方| www.387020.com-足彩总进球数怎么说| www.31715.cc-福彩试机号8200| www.012506.com-七星彩廉江高手论坛| www.532.date-分分彩诈骗-|