向站长求助 - 维修互助平台 - 常规

<p>&lt;%@ page language=&quot;java&quot; import=&quot;com.hdfix.action.CaptchaServlet&quot; pageEncoding=&quot;UTF-8&quot;%&gt;
&lt;%@ taglib prefix=&quot;c&quot; uri=&quot;http://java.sun.com/jsp/jstl/core&quot; %&gt;
&lt;%@ taglib prefix=&quot;fn&quot; uri=&quot;http://java.sun.com/jsp/jstl/functions&quot; %&gt;
&lt;%@ taglib uri=&quot;http://java.sun.com/jsp/jstl/fmt&quot; prefix=&quot;fmt&quot; %&gt;
&lt;%
String path = request.getContextPath();
String basePath = request.getScheme()+&quot;://&quot; + request.getServerName()+&quot;:&quot;+request.getServerPort()+path+&quot;/&quot;;
%&gt;</p>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="description" content="维修互助">
	<meta name="keywords" content="维修互助">
	<meta charset="UTF-8">
	<title>向站长求助</title>
	<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
	<!--font-awesome 核心CSS文件-->
	<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
	<!-- 在bootstrap.min.js 之前引入 jquery -->
	<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
	<!-- Bootstrap 核心js文件 -->
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	<style type="text/css">
		.qr-code {
			width: 200px;
			height: 200px;
			margin: 20px;
		}
		.txt {
			text-align: center;
		}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.1/localization/messages_zh.js"></script>
</head>
<body>
<jsp:include page="header.jsp" flush="true"/>
<div class="container">
	<div class="row">
		<div class="col-md-6">
			<form action="help!writesave" method="post" id="helpForm">
				<form>
					<div class="form-group">
						<label for="title">问题简述</label>
						<input type="text" class="form-control" id="title" name="title">
					</div>
					<div class="form-group">
						<label for="phone">联系方式</label>
						<input type="phone" class="form-control" id="phone" name="phone">
					</div>
					<div class="form-group">
						<label for="message">遇到的问题:</label>
						<textarea class="form-control" id="message"  name="info" rows="5"></textarea>
					</div>
					<label for="captcha">验证码：</label>
					<div id="captchaContainer"></div>
					<input type="hidden" id="captcha" name="captcha">
					<button type="submit" class="btn btn-primary" onclick="return checkForm()">提交</button>
<pre><code>			&lt;/form&gt;
		&lt;/form&gt;
	&lt;/div&gt;

	&lt;%--右侧的三张图片--%&gt;
	&lt;div class=&quot;col-md-6&quot;&gt;
		&lt;div class=&quot;row&quot;&gt;
			&lt;div class=&quot;col-md-12&quot;&gt;
				&lt;img src=&quot;common/pic/gzhcode.jpg&quot; alt=&quot;QR Code&quot; class=&quot;qr-code&quot;&gt;
				&lt;a style=&quot;font-size: 20px&quot;&gt;扫描左侧二维码关注我们&lt;/a&gt;
				&lt;p class=txt&gt;扫描二维码,关注我们。&lt;/p&gt;
			&lt;/div&gt;
			&lt;div class=&quot;col-md-6&quot;&gt;
				&lt;img src=&quot;common/pic/code2.png&quot; alt=&quot;Mini Program Code&quot; class=&quot;qr-code&quot;&gt;
				&lt;p class=txt&gt;简二维码生成器&lt;/p&gt;
			&lt;/div&gt;
			&lt;div class=&quot;col-md-6&quot;&gt;
				&lt;img src=&quot;https://via.placeholder.com/200x200&quot; alt=&quot;Mini Program Code&quot; class=&quot;qr-code&quot;&gt;
				&lt;p class=txt&gt;扫描小程序码，进入小程序。&lt;/p&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
<script>
	function checkForm() {
		var captcha = document.getElementById("captcha").value;
		if (captcha == "") {
			alert("请输入验证码！");
			return false;
		}
		return true;
	}
	
	$(document).ready(function() {
		$("#helpForm").validate({
			rules: {
				title: {
					required: true
				},
				phone: {
					required: true,
					phone: true
				},
				message: {
					required: true
				},
				captcha: {
					required: true
				}
			},
			messages: {
				title: {
					required: "请输入问题简述"
				},
				phone: {
					required: "请输入联系方式",
					phone: "请输入有效的联系方式"
				},
				message: {
					required: "请输入遇到的问题"
				},
				captcha: {
					required: "请输入验证码"
				}
			},
			errorPlacement: function(error, element) {
				error.appendTo(element.parent());
			}
		});
		
		$("#captchaContainer").sliderCaptcha({
			width: 280,
			height: 150,
			sliderL: 42,
			sliderR: 9,
			successLabelTip: "验证通过",
			failLabelTip: "请按住滑块，拖动到最右边",
			maxWidthOffset: 5,
			callback: function(result) {
				if (result) {
					$("#captcha").val("success");
				} else {
					$("#captcha").val("");
				}
			}
		});
	});
</script>
<pre><code>	&lt;jsp:include page=&quot;footer.jsp&quot; flush=&quot;true&quot;/&gt;
</code></pre>
</body>
</html>