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.1402.net-福利彩票有假的| www.50814.com-开心网七星彩论坛| www.010670.com-昨天开奖的体彩| www.085408.com-大发快三连中| www.383739.com-怎么验证彩票真伪| www.791011.com-找上海快三走势图| www.869568.com-七星彩进入网站| www.936110.com-97彩票赚钱平台| www.997267.com-大乐透众彩网首页| www.be16.com-福彩双色球预测号码| www.710912.com-网络刷彩违法吗| www.827563.com-竞彩结果查询| www.pn65.com-500彩票开奖| www.12xf.com-重庆时时彩官方登录| www.058793.com-一点通彩吧图| www.006156.com-成功彩票登录| www.405647.com-神彩争霸是骗人的吗| www.0129.cc-彩色算不算颜色| www.911257.com-k彩娱-| www.75rr.com-做5d彩超-| www.327601.com-彩界大将军-| www.582253.com-双色球彩票凤彩网谜| www.387226.com-尼彩官网首页| www.hv34.com-快三如何杀号| www.761420.com-淄博中彩票被杀| www.3135.org-体彩排三预测千里马| www.766791.com-福彩6选3玩法| www.932968.com-118彩票可信吗| www.xu94.com-陕西快三开奖结果| www.22398.cc-唯彩看球预测| www.372767.com-富彩彩票是合法的吗| www.560560.cc-3d福彩2元走势图| www.703661.com-四川福利彩票机选| www.840080.com-今天的电脑彩| www.961318.com-网上大众彩票| www.gy21.com-彩八彩票害人不浅| www.14sv.com-手机彩票评测网| www.1062.cm-彩名堂和助赢哪个好| www.08099.com-106+彩票-| www.020523.com-公益彩票开机号| www.106041.com-234彩票网-| www.128017.com-彩虹宝宝新版| www.82097.com-1994彩票-| www.329772.com-足彩分析新浪310| www.095023.com-彩吧论坛论坛首页一| GO彩www.fo64.com| www.53334.cc-丰大彩票网-| www.106846.com-瑞彩彩票官方网站| www.218411.com-网上买的快三怎么查| www.347645.com-七乐彩是地方彩票吗| www.521477.com-分分彩输了-| www.zc41.cc-北京快三计算公式| www.785598.com-牛蛙彩票图库| www.62621.cc-雪园缘足彩比分直播| www.113843.com-福彩3d算胆工具| www.284044.com-彩票中了40万| www.520374.com-合乐彩票手机版| www.620151.com-美国加州彩-| www.718115.com-彩乐乐杀号定胆| www.830998.com-黄鹤楼迷彩-| www.22hx.com-倍率彩票app| www.9307.vip-3b福彩实战擂台| www.502903.com-叮叮彩票合法吗| www.sy4.cc-168彩票官方网站| www.vw75.com-彩票攻略技巧知识书| www.57ky.com-福彩3d栋栋团今天| www.fd30.com-快三智能分析软件| www.33187.com-正规的时时彩有哪些| www.657614.com-新盈彩app下载| www.46933.com-时时彩每天盈利计划| www.633300.com-网上如何注册买竞彩| www.736308.com-彩票输了怎么回血| www.816607.com-吉林快三怎么能赢钱| www.886740.com-高频彩幕后-| www.993071.com-彩票号码选一个数字| www.ng95.com-快三怎么买才准不输| www.5sn.com-昆明牛牛彩票网| www.367723.com-彩铅画仕女图| www.160950.com-七星彩彩版统计| www.987986.com-主流彩票-| www.984865.com-彩票模拟摇奖器下截| www.012011.com-58期体育彩票奖号| www.673627.com-古建彩绘价格| www.779623.com-彩票中奖开奖结果| www.856466.com-苏州彩票店-| www.943407.com-老彩民app下载| www.993744.com-足彩38期赛果| www.mq6.com-快三走势怎么看| 博友彩www.918361.com| www.qd49.com-有哪些老彩票app| www.50115.com-彩软科技是真的么| www.306277.com-体育彩票中奖查询| www.471875.com-十亿彩票交易平台| www.hu23.com-快三豹子1最高遗漏| www.739746.com-盛源彩票手机版| www.191661.com-怎样看彩票的走势图| www.521851.com-喝彩中华的评委| www.590628.com-福彩3d高级走势图| www.656156.com-买什么彩票稳赚不赔| www.729117.com-高手网天下彩| www.797345.com-京彩挂机支持平台| www.875061.com-3d彩吧图厍第5版| www.931903.com-中彩票图片恶搞图| www.984510.com-8彩是否合法| www.cp662.cc-福建省福彩-| www.na76.com-江苏福彩快三玩法| www.o17.org-彩票技巧论坛| www.42hi.com-重庆时时彩的玩法| 彩票宝www.3cpb.com| www.280318.com-上海快三专家预测| www.42oq.com-篮彩分析软件下载| www.8438.top-玲丽彩妆培训学校| www.74580.com-重庆时时彩有门店吗| www.595549.com-鑫彩科技-| www.820630.com-七星彩解梦-| www.gz91.cc-北京快三最晚几点| www.303.cx-网上彩票公司合法吗| www.348880.com-新浪七星彩专家预测| www.8822.cc-陕西省体彩十一选五| www.249027.com-234彩票网站| www.33oo.com-七星彩精品局奖表| www.018831.com-汇彩网挣钱靠谱吗| www.465922.com-苹果精彩片段时间| www.355456.cc-彩票指南报纸16版| www.444353.com-每天福利彩票试机号| 尊彩www.472717.com| www.16595.com-重庆时时彩票打法| www.274386.com-天天分分彩开奖号码| www.419118.com-彩票春节休市几天| www.520962.com-福利彩票百度百科| 博友彩www.876295.com| www.262127.com-天天福彩-| www.b88.cc-三分彩时时彩网址| www.211186.com-大发快三怎么可以赢| www.831885.com-中源福彩-| www.827058.com-南方彩票安装| www.905170.com-滨州体彩转让| www.965574.com-u9彩票注册登录| 500彩票www.648377.com| www.10iz.com-彩色混凝土压模地坪| www.5556.cn-3d开机号今天彩吧| www.13910.com-怎样破解彩票程序| www.3039.org-逸彩公司-| 三星娱乐www.sxyl0.com| www.05822.com-附近竞彩网点| www.gm58.com-河南帝彩快三是什么| www.876862.com-彩票4十1是几等奖| www.711288.com-彩票平台提现被锁| www.808661.com-竞彩任选九玩法| www.886800.com-钻石彩票-| www.958870.com-今日彩票开奖详情| www.997463.com-快三官方邀请码| www.au49.com-湖北福彩5d怎么玩| www.pu89.com-98娱乐彩票入口| www.h02.club-香港6合彩开奖结果| www.3238.cm-彩879彩票下载| www.339754.com-55125福利彩票| www.30708.com-体彩大乐透开奖信息| www.78778.com-竞彩足球实体店返点| www.025361.com-网易人人中彩票真伪| www.220558.com-优信彩票真能提现吗| www.324321.com-国乐彩平台-| www.411763.com-五分彩长龙-| www.07463.com-澳门足球彩票公司|