1、通过提示语生成用户注册界面
用户注册界面包括。
- 账号:文本框,5-20位大小写英文字符、数字。
- 密码:密码框,必须包括大小写英文字符、数字和特殊字符,5-30位,SHA256散列传输。
- 码确认:与密码一致
- 手机号:符合中国手机号码格式
- Email:符合标准Email格式
- 注册按键
请生成相应的HTML代码以及JavaScript程序。
输出
以下是一个用户注册界面的 HTML 代码和 JavaScript 程序,满足您的要求:
账号:文本框,5-20位大小写英文字符、数字。
密码:密码框,必须包括大小写英文字符、数字和特殊字符,5-30位,使用SHA256散列传输。
密码确认:与密码保持一致。
手机号:符合中国手机号码格式。
Email:符合标准Email格式。
注册按键:提交表单。
HTML 代码与 JavaScript 验证
代码语言:javascript
复制
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册界面</title> <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/core.js"></script> <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/sha256.js"></script> <style> body { font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4; } .container { max-width: 400px; margin: auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } input[type="text"], input[type="password"], input[type="email"], input[type="tel"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; } button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px; } button:hover { background-color: #45a049; } .error { color: red; font-size: 12px; } </style> </head> <body> <div class="container"> <h2>用户注册</h2> <form id="registerForm" onsubmit="return validateForm()"> <label for="username">账号 (5-20位字母或数字):</label> <input type="text" id="username" name="username" required> <div id="usernameError" class="error"></div> <label for="password">密码 (5-30位,包含大小写字母、数字和特殊字符):</label> <input type="password" id="password" name="password" required> <div id="passwordError" class="error"></div> <label for="confirmPassword">密码确认:</label> <input type="password" id="confirmPassword" name="confirmPassword" required> <div id="confirmPasswordError" class="error"></div> <label for="phone">手机号 (中国):</label> <input type="tel" id="phone" name="phone" required> <div id="phoneError" class="error"></div> <label for="email">邮箱:</label <input type="email" id="email" name="email" required> <div id="emailError" class="error"></div> <button type="submit">注册</button> </form> </div> <script> function validateForm() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirmPassword').value; const phone = document.getElementById('phone').value; const email = document.getElementById('email').value; let isValid = true; document.getElementById('usernameError').innerText = ''; document.getElementById('passwordError').innerText = ''; document.getElementById('confirmPasswordError').innerText = ''; document.getElementById('phoneError').innerText = ''; document.getElementById('emailError').innerText = ''; const usernamePattern = /^[a-zA-Z0-9]{5,20}$/; if (!usernamePattern.test(username)) { document.getElementById('usernameError').innerText = '账号必须是5-20位的字母或数字'; isValid = false; } const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{5,30}$/; if (!passwordPattern.test(password)) { document.getElementById('passwordError').innerText = '密码必须包含大小写字母、数字和特殊字符'; isValid = false; } if (password !== confirmPassword) { document.getElementById('confirmPasswordError').innerText = '密码确认不一致'; isValid = false; } const phonePattern = /^1[3-9]\d{9}$/; if (!phonePattern.test(phone)) { document.getElementById('phoneError').innerText = '请输入有效的中国手机号'; isValid = false; } const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!emailPattern.test(email)) { document.getElementById('emailError').innerText = '请输入有效的Email地址'; isValid = false; } if (isValid) { const hashedPassword = CryptoJS.SHA256(password).toString(CryptoJS.enc.Base64); console.log('加密后的密码:', hashedPassword); alert('注册成功!'); } return isValid; } </script> </body> </html>
说明:
l此代码包含了所有必要的输入验证和密码加密处理。
l使用了 CryptoJS 库来进行密码的 SHA256 散列。
l表单提交前会进行所有必要的验证,确保所有数据符合规定的格式。
2、对生成的注册页面进行调整
2.1建立css目录
在css目录下建立index.css。
代码语言:javascript
复制
<style> body { font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4; } .container { max-width: 400px; margin: auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } input[type="text"], input[type="password"], input[type="email"], input[type="tel"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; } button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px; } button:hover { background-color: #45a049; } .error { color: red; font-size: 12px; } </style>
2.2建立js目录
在js目录下建立index. js。
代码语言:javascript
复制
function validateForm() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirmPassword').value; const phone = document.getElementById('phone').value; const email = document.getElementById('email').value; let isValid = true; document.getElementById('usernameError').innerText = ''; document.getElementById('passwordError').innerText = ''; document.getElementById('confirmPasswordError').innerText = ''; document.getElementById('phoneError').innerText = ''; document.getElementById('emailError').innerText = ''; const usernamePattern = /^[a-zA-Z0-9]{5,20}$/; if (!usernamePattern.test(username)) { document.getElementById('usernameError').innerText = '账号必须是5-20位的字母或数字'; isValid = false; } const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{5,30}$/; if (!passwordPattern.test(password)) { document.getElementById('passwordError').innerText = '密码必须包含大小写字母、数字和特殊字符'; isValid = false; } if (password !== confirmPassword) { document.getElementById('confirmPasswordError').innerText = '密码确认不一致'; isValid = false; } const phonePattern = /^1[3-9]\d{9}$/; if (!phonePattern.test(phone)) { document.getElementById('phoneError').innerText = '请输入有效的中国手机号'; isValid = false; } const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!emailPattern.test(email)) { document.getElementById('emailError').innerText = '请输入有效的Email地址'; isValid = false; } if (isValid) { const hashedPassword = CryptoJS.SHA256(password).toString(CryptoJS.enc.Base64); console.log('加密后的密码:', hashedPassword); alert('注册成功!'); } return isValid; }
2.3修改register.html
代码语言:javascript
复制
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册界面</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script src="js/index.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/core.js"></script> <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/sha256.js"></script> </head> <body> <div class="container"> <h2>用户注册</h2> <form name="myForm" method="POST" action="jsp/register.jsp" onsubmit="return validateForm();"> <label for="username">账号 (5-20位字母或数字):</label> <input type="text" id="username" name="username" required> <div id="usernameError" class="error"></div> <label for="password">密码 (5-30位,包含大小写字母、数字和特殊字符):</label> <input type="password" id="password" name="password" required> <div id="passwordError" class="error"></div> <label for="confirmPassword">密码确认:</label> <input type="password" id="confirmPassword" name="confirmPassword" required> <div id="confirmPasswordError" class="error"></div> <label for="phone">手机号:</label> <input type="tel" id="phone" name="phone" required> <div id="phoneError" class="error"></div> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <div id="emailError" class="error"></div> <button type="submit">注册</button> </form> </div> </body> </html>
2.4修改index.js文件
见黄色部分
代码语言:javascript
复制
… if (isValid) { // 获取密码并进行SHA-256哈希 let passwordField = document.forms["myForm"]["password"]; let hashedPassword = CryptoJS.SHA256(password).toString(CryptoJS.enc.Base64); // 将哈希后的密码重新赋值给表单的密码字段 passwordField.value = hashedPassword; console.log('加密后的密码:', hashedPassword); alert('注册成功!'); }
3、生成处理注册的Java代码
输入
注册代码用java bean+jsp实现,处理页面为register.jsp,
数据库结构为
id int 自动加1
uesrname varchar(50)
password varchar(100)
phone varchar(50)
email varchar(50)
数据库名为ebusiness,表为user
请实现java bean+jsp代码以及数据库创建SQL语句
请修改register.html,让其调用java bean+jsp代码
输出
首先,让我们开始创建数据库和表的 SQL 语句,然后再实现 Java Bean、JSP 代码,并最后修改 register.html 以调用这些代码。
1. 创建数据库和用户表的 SQL 语句
2. 修改 Java Bean (User.java)
代码语言:javascript
复制
-- 创建数据库 CREATE DATABASE IF NOT EXISTS ebusiness; -- 使用数据库 USE ebusiness; -- 创建用户表 CREATE TABLE IF NOT EXISTS user ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL, password VARCHAR(100) NOT NULL, phone VARCHAR(50) NOT NULL, email VARCHAR(50) NOT NULL );
User 类需要包括数据库操作,插入注册信息到数据库。
代码语言:javascript
复制
public class User { private int id; private String username; private String password; private String phone; private String email; // Getters and Setters public int getId() { return id; } public void setId(int id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } }
3. 创建 JSP 文件 register.jsp
这个 JSP 文件将处理注册请求,并将用户数据存储到数据库。
代码语言:javascript
复制
<%@ page import="java.sql.*, javax.sql.*" %> <%@ page import="ebusiness.User" %> <% String username = request.getParameter("username"); String password = request.getParameter("password"); // Assuming password is already hashed from client-side String phone = request.getParameter("phone"); String email = request.getParameter("email"); User user = new User(); user.setUsername(username); user.setPassword(password); user.setPhone(phone); user.setEmail(email); try { Class.forName("com.mysql.jdbc.Driver"); Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ebusiness", "root", "123456"); String query = "INSERT INTO user (username, password, phone, email) VALUES (?, ?, ?, ?)"; PreparedStatement ps = con.prepareStatement(query); ps.setString(1, user.getUsername()); ps.setString(2, user.getPassword()); ps.setString(3, user.getPhone()); ps.setString(4, user.getEmail()); ps.executeUpdate(); out.println("注册成功!"); } catch (Exception e) { out.println("数据库连接失败:" + e.getMessage()); } %>
总结:
注意事项
安全性: 在上面的示例中,密码假定已经在客户端用 JavaScript 进行了哈希处理。然而,在实际应用中,应该在服务器端再次进行哈希处理以确保安全。
数据库连接信息: 在 register.jsp 中,数据库用户名和密码被硬编码为 root 和 password。在实际部署时,应该使用更安全的认证方式,并可能需要根据实际环境调整这些值。
错误处理: 应该增加更详细的错误处理逻辑,以便在出现问题时提供更多的上下文信息。
驱动加载: 确保已经将 MySQL JDBC 驱动添加到项目的类路径中。
3.1修改register.jsp
1)<%@ page import="your.package.User" %>
将<%page import=" your.package.User" %>
改为<%@ page import="ebusiness.User" %>
2)由于数据库root的密码为123456,所以修改
代码语言:javascript
复制
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ebusiness", "root", "password");
为
代码语言:javascript
复制
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ebusiness", "root", "123456");
3.2将register.jsp中对数据库的操作封闭在Java bean中
建立DBuser
代码语言:javascript
复制
package ebusiness; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class DBuser { private static final String url = "jdbc:mysql://localhost:3306/ebusiness"; private static final String user = "root"; private static final String password = "123456"; private static Statement stmt = null; private static ResultSet rs; //建立链接 public Connection connect() throws SQLException { try { //新版本改为"com.mysql.cj.jdbc.Driver" Class.forName("com.mysql.cj.jdbc.Driver"); Connection conn = DriverManager.getConnection(url, user, password); stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY); return conn; } catch (ClassNotFoundException e) { System.out.println("JDBC 驱动未找到: " + e.getMessage()); } catch (SQLException e) { System.out.println("数据库连接失败: " + e.getMessage()); } return null; } //断开连接 public void disconnect(Connection conn) { try { if (rs != null) { rs.close(); } stmt.close(); conn.close(); }catch (Exception e) { e.printStackTrace(); } } //插入数据 public boolean insert(Connection conn,User user) throws SQLException { String insertString = "INSERT INTO user (username, password, phone, email) VALUES (?, ?, ?, ?)"; try { PreparedStatement ps= conn.prepareStatement(insertString); // 设置参数 ps.setString(1, user.getUsername()); ps.setString(2, user.getPassword()); ps.setString(3, user.getPhone()); ps.setString(4, user.getEmail()); // 执行插入操作 int affectedRows = ps.executeUpdate(); if (affectedRows == 1) { return true; }else { return false; } } catch (SQLException e) { e.printStackTrace(); } return false; } }
3.2再次修改register.jsp
代码语言:javascript
复制
<%@ page contentType="text/html; charset=utf-8" %> <%@ page import="java.sql.*, javax.sql.*" %> <%@ page import="ebusiness.User" %> <%@ page import="ebusiness.DBuser" %> <% String username = request.getParameter("username"); String password = request.getParameter("password"); String phone = request.getParameter("phone"); String email = request.getParameter("email"); User user = new User(); user.setUsername(username); user.setPassword(password); user.setPhone(phone); user.setEmail(email); try { DBuser mysql = new DBuser(); Connection conn = mysql.connect(); if (mysql.insert(conn,user)) out.println("注册成功!"); mysql.disconnect(conn); } catch (Exception e) { out.println("数据库连接失败:" + e.getMessage()); } %>