839a0898cdd05acc34de7c4d7bf7ebc317bb3e2e.svn-base 4.28 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;}
		#queryPage{
			max-width:768px;
			padding:0 3%;
		}
		.queryTitle h2{
			line-height:60px;
			font-size:20px;
		}
		#queryPage #inputForm{margin:0 0;}
		.control-groupMain{
			margin-top:15%;
			padding:10% 5%;
			border-radius:3px;
			box-shadow:1px 1px 2px 2px #317eac;
		}
		.form-horizontal{
			padding:3%;
		}
		.form-horizontal .control-group{
			border-bottom:none;
			padding-bottom:10px;
			margin-bottom:10px;
		}
		.form-horizontal .control-label{
			width:24%;
			line-height:30px;
			text-align:left;
			padding-top:0; 
			float:left;
			font-weight:900;
			font-size:15px;
		}
		.form-horizontal .controls{margin-left:30%;font-size:14px;}
		.input-xlarge,.input-medium{width:85%;}
		.select-xlarge{width:90%;}
		.control-button .btnQuery{
			width:100%;
			padding:10px 14px;
			color:#ffffff;
			background:#317eac;
			color:#ffffff;
			margin-top:30%;
		}
		.controls p{
			color:#ff0000;
			display:none;
		}
		
	</style>
	<script type="text/javascript">
		$(function(){
			//姓名验证
			$(".input-name").blur(function(){
				var name = $(this).val();
				if (name == ''){
					$(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();
				}
			})
			//提交验证
			$(".btnQuery").on("click",function(){
				var name = $("#yyrmc").val();
				var zjzl = document.getElementById("yyrzjzl").value;
				var zjh = $("#zjh").val();
				var url = "";
				if(name!=""&&(/^[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))){
					url = "${ctx}/reg/wechatInterface/querylist?name="+name+"&zjzl="+zjzl+"&zjh="+zjh;
					document.inputForms.action = url;
			 		document.inputForms.submit();
				}else if(name ==''){
					$(this).closest(".form-horizontal").find(".input-name").next().show();
				}else if(zjh ==''){
					$(this).closest(".form-horizontal").find(".input-idNumber").next().show();
				}
			})
		})
	</script>
</head>
<body>
	<div id="queryPage">
		<div class="queryTitle">
			<h2>预约查询</h2>
		</div>
		<form:form id="inputForm" name="inputForms" modelAttribute="regBaseYy" action="#" method="post" class="form-horizontal">
			<sys:message content="${message}"/>
			<div class="control-groupMain">
				<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">证件类型</label>
					<div class="controls">
						<form:select 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>
			</div>
			<div class="control-button">
				<input id="btnQuery" class="btn btnQuery" type="button" value="查询"/>
			</div>
		</form:form>
	</div>
</body>
</html>