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.04zp.com-福彩专家三天计划| www.78925.com-快三多少倍能封顶| www.066336.com-uc彩票网-| www.7418.xyz-安庆体彩竞彩网点图| www.39381.com-爱中彩票ios| www.805273.com-福彩类-| www.216971.com-118官方彩票| www.327700.com-排列五开奖七星彩票| www.425366.com-动画彩虹冰激凌机| www.560428.com-红彩会彩票app| www.645848.com-体育彩票能机选吗| www.737444.com-随时赚彩票合法吗| www.824461.com-福建丹青快三| www.926606.com-彩票软件暂停销售| www.996786.com-无锡福彩网-| www.ey58.com-双色球彩票谜语| www.u71.cc-网上快三平台靠谱不| www.90ln.com-利记博彩公司网址| www.5688.wang-3a彩票手机客户端| www.36451.com-体彩开奖现场| www.5ba.cc-玩快三输了三万块钱| www.99980.com-大优彩票平台注册| www.96872.cc-大乐透贴吧体彩吧| www.077880.com-福彩网可靠吗| www.29io.com-体彩机器人投注软件| www.087663.com-彩票app哪种最快| www.9406.cc-福彩三d开奖直播| www.932750.com-致富彩票是不是真的| www.324005.com-航天彩虹股票| www.315550.com-博彩众什么-| 公益福彩www.gyfc0.com| www.cp9859.com-彩票app送彩金| www.243796.com-马会彩票网站| www.357387.com-中彩票离婚怎么处理| www.447655.com-竞彩实体店兑奖时间| www.555392.com-555彩票手机购彩| www.623961.com-快彩app手机网| www.532958.com-六星彩网站-| www.607078.com-牛彩一句定三码彩图| www.695678.com-彩客网混合-| www.923456.com-彩票投注站私自吃票| 99福彩www.319989.com| www.l22.cn-103彩票站-| www.364.in-爱彩人怎么样| www.7659.com-体彩玻璃柜台| www.ro14.com-赢盈彩网-| www.52dq.com-儿童水彩画颜料套装| www.1504.pw-彩虹屁夸女生| www.8095.vip-永利彩票违法吗| www.182184.com-极速快三预测| www.302441.com-河北福彩排列七玩法| www.434116.com-福利彩票销售管理员| www.051155.com-真实的彩票投注网站| www.292090.com-高频彩安全可靠吗| www.65rb.com-湖北体彩大乐透大奖| www.69zi.com-彩虹六号黑镜小技巧| www.026827.com-彩票工资车怎么玩| www.152693.com-4s彩票论坛-| www.cm77.cc-北京福彩快3助手| www.v10.in-搞笑彩票中奖信息| www.50do.com-今日体彩p3藏机图| www.63781.cc-足彩竞彩必发指数| www.172491.com-韩国快三开奖结果| www.377126.com-49i彩票网-| www.714400.com-双色球五百彩票网| www.844594.com-八千亿贪彩票| www.923066.com-今日彩票运占卜百度| www.998485.com-福彩快三手机平台| www.gx06.com-江苏福利彩票| www.4bh.com-足彩身价对比| www.82hx.com-江苏快三三二同单选| www.3393.net-中国最大的彩票软件| www.155245.com-彩票足球竞彩怎么玩| www.93dd.com-今天都那个彩票开奖| www.2706.vip-牛蛙彩票软件| www.8068.net-专业玩彩3d网| www.339123.com-分分彩时时彩的网址| www.525104.com-乐乐彩票计划| www.wf25.com-中国福彩河南体彩网| www.155727.com-福彩3地字谜图总汇| www.234135.com-网络彩票平台排行榜| www.417929.com-彩票双机店转让| www.028006.com-全国彩礼排行| www.111615.com-凤凰彩票大全| www.95808.com-体育彩票资金用途| www.09680.com-彩神通手机软件下载| www.610036.com-体彩足彩几点截止| www.206104.com-易彩票-| www.332238.com-体彩福彩哪个挣钱| www.201462.com-星彩三d论坛| www.305283.com-怎样选彩票容易中奖| www.378772.com-七星彩彩版互换区| www.632689.com-海南七星彩图纸区| www.795448.com-料狗足彩分析| www.883197.com-京东快彩是真的假的| www.958035.com-江苏快三走势图链接| 68彩票www.68689f.com| www.698128.com-极速时时彩技巧稳赚| www.583725.com-中彩网喜点-| www.660285.com-新浪彩票小炮| www.752976.com-彩神彩票网专业版| www.820273.com-七星彩第五位走势图| www.888010.com-周公解梦七星彩号码| www.951440.com-彩票lv-| www.996403.com-哈尔滨福利彩票中心| www.bb78.com-喜乐彩-| www.7973.me-彩博88-| www.656334.com-天天中彩网是真的吗| www.761738.com-时时彩斗牛玩法介绍| www.867418.com-一定牛彩票可靠吗| www.598518.com-彩77官方网-| www.jk2.cc-人人彩票平台| www.tj37.com-159足彩-| www.20kb.com-胜负彩19006| www.2958.pw-体彩装修效果图| www.22092.com-100块的彩票| www.755656.com-6s彩膜-| www.036080.com-彩票梦想站合法吗| www.24399.cc-海南七星彩赔率| www.259640.cc-广西福彩开奖助手| www.444677.com-竞彩二串一推单| www.555743.com-那些彩票软件靠谱吗| www.610339.com-体育彩票开奖条件| www.667654.com-如何看香港球彩台| www.736234.com-一定牛内蒙古快三| www.5708.cc-三彩女装官网| www.385055.com-今天竞彩对阵表| www.520990.com-彩票漏洞刷钱| www.590323.com-法律规定结婚彩礼钱| www.cai9133.com河北快三最多一次| www.899224.com-上海快三快彩app| www.976697.com-四川资阳结婚彩礼| www.lb00.com-730彩票app-| www.ky58.com-中信彩票快三| 500彩票www.50088c.com| www.21ae.com-海南体彩官方网站| www.839036.com-山东福彩中心二维码| www.897748.com-多彩贵州网考试| www.952713.com-丰彩深圳有人中奖吗| www.990519.com-爱彩通app下载| www.ng29.com-吉林快三三同号遗漏| www.052205.com-合买彩票网站| www.00lv.com-彩虹秒赞美化| www.653.date-圣地彩app-| www.5918.pro-体育彩票张驰| www.9762.top-惟默彩宝-| www.43338.cc-云南福彩网-| www.89063.com-汇众彩票平台下载| www.4589.com-多次错过彩票一等奖| www.965026.com-刮彩票容易中吗| www.cai8686.com七乐彩大发快三| www.ka95.com-彩票三个红号有奖不| www.d90.net-彩票研究方法| www.083545.com-网上博彩套利违法吗| www.163013.com-好彩运大发快3| www.160160.com-时时彩源码论坛| www.235316.com-陕西体彩-| www.60yh.com-亚博彩票充值| www.nl90.com-返点高的彩票平台| www.13jm.com-好彩铁盒10盒装| www.499409.com-中国褔利分分彩| www.718199.com-彩店宝彩票电脑下载| www.791768.com-体彩即开种类| www.856978.com-怎么开彩票店|