5bd0b3555f283d2f96adf39cc9682183e76579bd.svn-base 8.91 KB
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>预约排号保存管理</title>
	<meta name="decorator" content="default"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<style>
		html,body,ul,li,ol,p,h1,h2,h3,h4,img {margin: 0;padding: 0;}
		img {border: none;display: block;}
		ul,ol {list-style: none;}
		a {text-decoration: none;}
		html{font-size:15px;}
		body {font-family: "黑体", Helvetica;overflow-x:hidden;}
		input,select {outline: none;}
		#appointmentPage{
			max-width:768px;
			padding:0 3%;
		}
		.appointmentTitle h2{
			line-height:56px;
			font-size:18px;
		}
		#appointmentPage #inputForm{margin:0 0;}
		.form-horizontal .control-group{
			border-bottom:none;
			padding-bottom:10px;
			margin-bottom:10px;
		}
		.form-horizontal .control-label{
			width:20%;
			line-height:30px;
			text-align:left;
			padding-top:0; 
			float:left;
			font-weight:900;
			font-size:15px;
		}
		.control-labelType{
			width:20%;
			height:30px;
			text-align:left;
			padding-top:0; 
			float:left;
			font-weight:900;
			font-size:15px;
		}
		.form-horizontal .controls{margin-left:24%;font-size:14px;}
		.input-xlarge,.input-medium{width:85%;}
		.select-xlarge{width:90%;}
		.control-button  .btnConfirm{
			width:100%;
			padding:11px 14px;
			color:#ffffff;
			background:#317eac;
			color:#ffffff;
			margin-top:30px;
		}
		.controls p{
			color:#ff0000;
			display:none;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			if('${bj}' == 1){
				$("#yyrmc").attr("readOnly","true");
				$("#yyrmc").val('${yyrmc}');
				$("#phone").attr("readOnly","true");
				$("#phone").val('${phone}');
				$("#zjh").attr("readOnly","true");
				$("#zjh").val('${zjh}');
				$("#date").attr("readOnly","true");
				$("#date").val('${date}');
				$("#time").attr("readOnly","true");
				$("#time").val('${time}');
				$("#yyh").attr("readOnly","true");
				$("#yyh").val('${yyh}');
				$("#djdltext").attr("readOnly","true");
				$("#djdltext").val('${djdl}');
				$("#yyrzjzltext").attr("readOnly","true");
				$("#yyrzjzltext").val('${zjzl}');
				document.getElementById("divsub").style.display="none";
			}else{
				document.getElementById("divyyh").style.display="none";
			}
			//姓名验证
			$(".input-name").blur(function(){
				var name = $(this).val();
				if (name == ''){
					$(this).parent().find("p").show();
				}else{
					$(this).parent().find("p").hide();
				}
			})
			//手机号验证
			$(".input-phone").blur(function(){
				var phone = $(this).val();
				if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))){ 
					$(this).parent().find("p").show();
	            }else{
					$(this).parent().find("p").hide();
				}
			})
			//身份证验证
			$(".input-idNumber").blur(function(){
				var zjh = $(this).val();
				if(!(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(zjh))){ 
					$(this).parent().find("p").show();
	            }else{
					$(this).parent().find("p").hide();
				}
			})
			//时间验证
			$(".input-date").blur(function(){
				var date = $(this).val();
				if(date == ''){ 
					$(this).parent().find("p").show();
	            }else{
					$(this).parent().find("p").hide();
				}
			})
			$(".input-time").blur(function(){
				var time = $(this).val();
				if(time == ''){ 
					$(this).parent().find("p").show();
	            }else{
					$(this).parent().find("p").hide();
				}
			})
			//提交验证
			$(".btnConfirm").on("click",function(){
				var djdl = document.getElementById("djdltext").value;
				var zjzl = document.getElementById("yyrzjzltext").value;
				var name = $("#yyrmc").val();
				var phone = $("#phone").val();
				var zjh = $("#zjh").val();
				var date = $("#date").val();
				var time = $("#time").val();
				var url = "";
				if(name!=""&&(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))
						&&(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(zjh))
						&&time!=""){
					url = "${ctx}/reg/wechatInterface/save?djdl="+
									djdl+"&name="+name+"&phone="+phone+"&zjzl="+zjzl+"&zjh="+zjh+"&date="+date+"&time="+time;
					document.inputForms.action = url;
			 		document.inputForms.submit();
				}else if(name ==''){
					$(this).closest(".form-horizontal").find(".input-name").next().show();
				}else if(phone ==''){
					$(this).closest(".form-horizontal").find(".input-phone").next().show();
				}else if(zjh ==''){
					$(this).closest(".form-horizontal").find(".input-idNumber").next().show();
				}else if(date ==''){
					$(this).closest(".form-horizontal").find(".input-date").next().show();
				}else if(time ==''){
					$(this).closest(".form-horizontal").find(".input-time").next().show();
				}
			})
		})
	</script>
</head>

<body>
	<div id="appointmentPage">
		<div class="appointmentTitle">
			<h2>不动产手机登记预约</h2>
		</div>
		<form:form id="inputForm" name="inputForms" modelAttribute="regBaseYy" action="#" method="post" class="form-horizontal">
			<form:hidden id="txtId"  path="id"/>
			<sys:message content="${message}"/>
			<div class="control-group">
				<label class="control-label" style="line-height:20px">预约网点</label>
				<div class="controls" style="font-weight:900;">
					汉中市不动产登记交易中心
				</div>
			</div>	
			<div class="control-group">
				<label class="control-labelType">预约业务类别</label>
				<div class="controls" style="height:36px;padding-top:4px;">
					<form:select id="djdltext" path="djdl" class="select-xlarge select-labelType">
						<form:options items="${fns:getDictList('yy_djlx')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group" id="divyyh">
				<label class="control-labelType">预约号</label>
				<div class="controls">
					<input id="yyh" class="input-xlarge input-name" maxlength="50" type="text" required/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
				<div class="controls">
					<input id="yyrmc" class="input-xlarge input-name" maxlength="50" type="text" placeholder="请输入您的姓名" required/>
					<p>*姓名不可以为空</p>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
				<div class="controls">
					<input id="phone" class="input-xlarge input-phone" maxlength="20" type="number" placeholder="请输入手机号码" required/>
					<p>*手机号格式不对</p>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">证件类型</label>
				<div class="controls">
					<form:select id="yyrzjzltext" path="yyrzjzl" class="select-xlarge select-labelType">
						<form:options items="${fns:getDictList('reg_bus_zjlx')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">证件号码</label>
				<div class="controls">
					<input id="zjh" class="input-xlarge input-idNumber" maxlength="50" type="text" placeholder="请输入证件号码" required/>
					<p>*请输入证件号码</p>
				</div>
			</div>
			<c:if test="${bj eq 0}">
				<div class="control-group">
					<label class="control-label">预约日期</label>
					<div class="controls">
						<input id="date" name="djsj" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate input-date"
								value="<fmt:formatDate value="${regBusDyaq.djsj}" pattern="yyyy-MM-dd"/>"
								onclick="WdatePicker({dateFmt:'yyyy-MM-dd' });" required/>
						<p>*请选择预约日期</p>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">预约时间</label>
					<div class="controls">
						<input id="time" name="djsj" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate input-time"
								value="<fmt:formatDate value="${regBusDyaq.djsj}" pattern="HH:mm"/>" 
								onclick="WdatePicker({dateFmt:'HH:mm' });" required/>
						<p>*请选择预约时间</p>
					</div>
				</div>
			</c:if>
			<c:if test="${bj eq 1}">
				<div class="control-group">
					<label class="control-label">预约日期</label>
					<div class="controls">
						<input id="date" name="djsj" type="text" readonly="readonly" maxlength="20" class="input-medium input-date"/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">预约时间</label>
					<div class="controls">
						<input id="time" name="djsj" type="text" readonly="readonly" maxlength="20" class="input-medium input-time"/>
					</div>
				</div>
			</c:if>
			<div class="control-button" id="divsub">
				<input id="btnConfirm" class="btn btnConfirm" type="button" value="我要预约" onclick = "getUrl()" />
			</div>
		</form:form>
	</div>
</body>
</html>