JQ提交验证

最新推荐文章于 2022-03-20 17:11:04 发布

Wendy=͟͟͞͞ʕ•̫͡•ʔ

最新推荐文章于 2022-03-20 17:11:04 发布

阅读量140

点赞数

分类专栏： jq 文章标签： jq

本文链接：https://blog.csdn.net/qq_44599041/article/details/103413317

版权

jq 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="./js/iscroll-js/iscroll.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="./css/car.css">
	<title>申请</title>
</head>
<body>
	<div id="box">
		<img src="./images/banne.jpg" alt="">
		<!-- <img src="/static/index/js/grid.jpg" alt=""> -->
		<div class="cnt1">
			<div>
				<p>您将收到</p>
				<div >
					<div class="l">
						<img src="./images/sum.png" alt="" class="image">
					 <span>挪车贴+说明书(套)</span>  
					</div>
					<div class="num">
						<span id="num_aa">-</span>
						<b id="num_d">1</b>
						<span id="num_bb">+</span>
					</div>
				</div>
			</div>
			<div>
				<p>收货人</p>
				<div><img src="./images/user.png" alt="" class="image"><input type="text" placeholder="收货人信息" id="user"></div>
			
			</div>
			<div >
				<p>联系电话</p>
				<div><img src="./images/phone.png" alt="" class="image"><input type="text" placeholder="请输入手机号码" id="phone"></div>
				<span id="divMobile"></span>
			</div>
			<div>
				<p>详细地址</p>
				<div><input type="text" placeholder="请输入详细地址" id="address"></div>
			</div>

		</div>
		<iframe src="./index.html" frameborder="0" style="width: 200px;border: 1px solid red;">你好</iframe>
		<div class="cnt2">注:收到挪车码后请您先扫码进行绑定车辆和手机信息，绑定后方可使用。如有疑问请查看<a id="help" href="images/readme.png">使用帮助</a></div>
		
		<footer>
			<div>
				<span>服务费:￥1.00 <s>10.00</s> </span>
				<span>邮费:￥3.00 <s>13.00</s> </span>
			</div>
			<p class="apply">立即申请</p>
		</footer>		
	</div>
</body>
<script src="./js/jquery-1.11.0.js"></script>
<script>
	window.onload = function (){
		function rem(){
			document.documentElement.fontSize=document.documentElement.clientWidth*20/375+"px"
		}
		rem();
		window.onresize=rem;

		// var iscroll=new IScroll("#box",{
		// 	scrollX:true,
		// 	scrollY:true,
		// 	keyBindings:true,
		// 	mouseWheel:true,
		// 	tap:true
		// });	
			$("#num_bb:contains('+')").click(function(){
				var num = $(this).prev().html();
				console.log(num)
				num++;
				$(this).prev().html(num);
			})
			$("#num_aa:contains('-')").click(function(){
				var num = $(this).next().html();
				console.log(num)
				num--;
				if(num<0){
					num=0
				}
				$(this).next().html(num);
			})
		
			$("#phone").blur(function () {//手机号码的输入框失去焦点
        		var mobile = $(this).val();//获取手机号码输入框的输入值
        		var $mobileId = $("#divMobile");//获取id为divMobile的div
        		var regMobile = /^1[3|4|5|8][0-9]\d{4,8}$/;//11位正则
        		if(regMobile.test(mobile) == false){//判断输入的值是否满足正则要求
        			$mobileId.html("手机号码不符合格式要求，请重新输入");
        			return false;
        		}
        		$mobileId.html("");//符合要求
        		return true;
        	})
		$(".apply").click(function () {
			if( $('#user').val() == ''){
				alert("请输入用户名")
			}else if($('#phone').val() == ''){
				alert("请输入手机号码")
			}else if($('#address').val() == ''){
				alert("请输如地址")
			}
			
			$.ajax({
					url:"http://xcx001.869363.com/",
					type:"post",
					dataType: "jsonp",
					data:{
						num : $('#num_d').html(),
						user : $('#user').val(),
						phone : $('#phone').val(),
						address : $('#address').val(),
					},
					success:function(data){
						console.log("over..",data);
						alert('挪车码申请成功!');
						window.reload();
					},
					error:function(e){
						alert('挪车码申请失败，请重新提交申请！');
					}  
			})
		})
	

	}
	

</script>


</html>

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body,html{
	width: 100%;
	height: 100%;
	
}
#box{
	width: 100%;
	margin-bottom:6.3rem; 	
}

#box>img{
	width: 100%;
	
}
.cnt1{
	width: 100%;
	padding: 1rem;
}
.cnt1>div{
	margin-bottom: 1rem;
}
.cnt1>div>div{
	background: #F6FBFE;
	height: 2.8rem;
	display: flex;
	justify-content: space-between;
	font-size: 1rem;
	align-items: center;
	/* border: 1px solid red; */
}
.cnt1>div>div>.l{
	display: flex;
	align-items: center;
	line-height: 3rem;
	box-sizing: border-box;
	width:70%;

}
.cnt1>div>div>.l>span>.image{
	display: inline-block;
}
.cnt1>div>div>.l>span{
	display: inline-block;
	font-size: 0.8rem;
}
.num{
	width: 8rem;
	height: 2.3rem;
	display: inline-block;
	border-radius:30px;
	background: gainsboro;
	display: flex;
	justify-content: space-between;
	align-items: center;	
}
.num>span{width: 2.1rem;height: 2.1rem; border-radius: 50%;background: white;text-align: center;line-height: 2.2rem;margin:2px;}
.cnt1>div>div>input{
	width: 100%;
	font-size:0.8rem;
	line-height: 2rem;
	background: #F6FBFE;
	outline: none;
	border: #F6FBFE;	
}
.cnt1>div>p{
	height: 2rem;
	color: #3B8BC2;
	font-size: 18px;
}
.image{ zoom: 42%; margin: 0.5rem 0.5rem 0.5rem 0.5rem;box-sizing: border-box;}
.cnt2{padding:0 1rem;font-size:0.7rem;color: gray;}
.cnt2>#help{color: blue;text-decoration: none;}
footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}
footer>div{
	width: 100%;
	height: 3rem;
	padding: 0 2rem;
	display: flex;
	justify-content: space-between;
	background: white;
	line-height: 3rem;
	box-sizing: border-box;
	font-size: 0.9rem;
}
footer>div>span>s{color: gainsboro;}
footer>p{
	width: 100%;
	height: 3.3rem;
	border-radius:10px;
	text-align: center;
	line-height: 3.3rem; 
	background: #1A8ACA;
	color: white;
}
#divMobile{
	font-size: 10px;
	height: 20px;
	color: red;
}
.page_pic img{
	width:100%;
}

Wendy=͟͟͞͞ʕ•̫͡•ʔ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ提交验证

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
复制链接

扫一扫

专栏目录