- 表单提交到后台 Servlet:当用户填写完表单并点击注册按钮时,表单数据应该通过
POST
方式提交给后台。 - 后台 Servlet 处理表单数据:Servlet 会处理从表单接收到的用户数据,进行验证和注册操作。
- 正确显示中文用户名:在后台需要保证中文数据能够正确接收和显示。
1. 更新前端 HTML 页面,修改表单提交方式
首先,将表单的 action
属性设置为后台 Servlet 的 URL,并且设置 method="POST"
使其采用 POST 方式提交。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title><style>body {font-family: Arial, sans-serif;margin: 50px;}.form-container {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 10px;}.form-item {margin: 15px 0;}.form-item label {display: block;margin-bottom: 5px;}.form-item input {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 5px;}.form-item .error {color: red;font-size: 12px;}.form-item .valid {color: green;font-size: 12px;}.form-item .submit-btn {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;}</style>
</head>
<body><div class="form-container"><h2>用户注册</h2><!-- 修改了 action 属性为后台 servlet 地址 --><form id="registrationForm" action="/registerServlet" method="POST" onsubmit="return validateForm()"><div class="form-item"><label for="name">姓名</label><input type="text" id="name" name="name" placeholder="请输入姓名" onblur="checkName()" required><div id="nameError" class="error"></div></div><div class="form-item"><label for="email">邮箱</label><input type="email" id="email" name="email" placeholder="请输入邮箱" onblur="checkEmail()" required><div id="emailError" class="error"></div></div><div class="form-item"><label for="password">密码</label><input type="password" id="password" name="password" placeholder="请输入密码" onblur="checkPassword()" required><div id="passwordError" class="error"></div></div><div class="form-item"><label for="confirmPassword">确认密码</label><input type="password" id="confirmPassword" name="confirmPassword" placeholder="请确认密码" onblur="checkConfirmPassword()" required><div id="confirmPasswordError" class="error"></div></div><div class="form-item"><button type="submit" class="submit-btn">注册</button></div></form></div><script>// 校验函数(与之前一样)function checkName() {var name = document.getElementById('name').value;var nameError = document.getElementById('nameError');var nameRegex = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/; if (!nameRegex.test(name)) {nameError.textContent = "姓名不合法,需为2-20个字母或汉字";nameError.classList.add("valid");nameError.classList.remove("error");} else {nameError.textContent = "姓名合法";nameError.classList.add("valid");nameError.classList.remove("error");}}// 其他校验函数同样照旧function validateForm() {checkName();checkEmail();checkPassword();checkConfirmPassword();if (document.querySelectorAll('.error').length > 0) {return false;}return true;}</script></body>
</html>
2. 后台 Servlet 处理用户注册
现在,我们来编写一个后台的 Servlet
来处理用户提交的表单数据。
2.1 创建 RegisterServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.nio.charset.StandardCharsets;public class RegisterServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 设置请求和响应的字符编码为 UTF-8,保证中文显示正确request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");// 获取表单提交的数据String name = request.getParameter("name");String email = request.getParameter("email");String password = request.getParameter("password");String confirmPassword = request.getParameter("confirmPassword");PrintWriter out = response.getWriter();// 验证用户名是否有效if (name == null || name.trim().isEmpty()) {out.println("<h3>用户名不能为空</h3>");return;}// 验证邮箱格式if (email == null || !email.matches("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$")) {out.println("<h3>邮箱格式不正确</h3>");return;}// 验证密码是否匹配if (!password.equals(confirmPassword)) {out.println("<h3>两次输入的密码不一致</h3>");return;}// 这里可以将用户信息保存到数据库,模拟注册成功// 由于没有数据库,这里就直接输出用户信息out.println("<h3>注册成功!</h3>");out.println("<p>用户名: " + name + "</p>");out.println("<p>邮箱: " + email + "</p>");out.println("<p>密码: " + password + "</p>");}
}
2.2 配置 web.xml
为了让 Servlet 正常工作,我们需要在 web.xml
文件中配置该 Servlet 的 URL 映射。
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"><servlet><servlet-name>RegisterServlet</servlet-name><servlet-class>RegisterServlet</servlet-class></servlet><servlet-mapping><servlet-name>RegisterServlet</servlet-name><url-pattern>/registerServlet</url-pattern></servlet-mapping></web-app>
3. 总结
- 前端部分:
- 用户填写表单并点击提交按钮,表单数据通过
POST
方式提交给后台。 - 表单的
action
属性指定了后台 Servlet 的 URL,method="POST"
指定了提交方式。
- 用户填写表单并点击提交按钮,表单数据通过
- 后台部分:
RegisterServlet
接收表单数据,进行基本的验证(例如检查用户名、邮箱格式、密码是否一致等)。- 使用
request.setCharacterEncoding("UTF-8")
来确保能够正确处理中文字符。 - 如果验证通过,显示注册成功信息,并模拟输出用户的注册信息。
通过这种方式,用户可以在前端提交表单,并通过后台 Servlet 完成注册验证和信息的显示。同时,中文用户名也能正确显示。