You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
BookStore/web/pages/user/regist.jsp

209 lines
6.8 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<%@include file="/pages/common/header.jsp"%>
<script type="text/javascript">
// 页面加载完成之后
$(function(){
// 当用户名输入框失去焦点时触发事件
$("#username").blur(function () {
// 1、获取用户名
var username = this.value;
// 发送一个GET请求检查用户名是否已经存在
$.getJSON("http://localhost:8080/bookstore1/userServlet", "action=ajaxExistsusername&username=" + username, function (data) {
if(data.exitsUsername) {
// 如果用户名已存在,显示错误信息
$("span.errorMsg").text("用户名已存在!");
} else {
// 如果用户名可用,显示可用信息
$("span.errorMsg").text("用户名可用!");
}
});
});
// 点击验证码图片时更换其源,以更新验证码
$("#code_img").click(function () {
this.src = "${basePath}kaptcha.jpg?d=" + new Date();
});
// 给注册按钮添加点击事件
$("#sub_btn").click(function(){
// 获取用户名的值
var usernameValue = $("#username").val();
// 验证用户名是否合法规则如下必须由字母、数字和下划线组成并且长度为5到15位。
var usernameReg = /^\w{5,15}$/;
// 验证用户信息
if (!usernameReg.test(usernameValue)) {
// 如果验证不通过,提示用户
$("span.errorMsg").text("用户名不合法!");
return false; // 阻止表单提交
}
// 获取密码输入框的值
var passwordValue = $("#password").val();
// 验证密码是否合法规则如下必须由字母、数字和下划线组成并且长度为5到15位。
var passwordReg = /^\w{5,15}$/;
// 验证用户信息
if (!passwordReg.test(passwordValue)) {
// 如果验证不通过,提示用户
$("span.errorMsg").text("密码不合法!");
return false; // 阻止表单提交
}
// 获取确认密码输入框的值
var repwdValue = $("#repwd").val();
// 验证确认密码与密码是否一致
if (passwordValue != repwdValue) {
// 如果不一致,提示用户
$("span.errorMsg").text("确认密码和密码不一致!");
return false; // 阻止表单提交
}
// 获取电子邮件输入框的值
var emailValue = $("#email").val();
// 验证邮件输入是否合法,采用正则表达式
var emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
// 检查电子邮件格式是否符合要求
if (!emailReg.test(emailValue)) {
// 如果验证不通过,提示用户
$("span.errorMsg").text("邮件输入不合法!");
return false; // 阻止表单提交
}
// 获取验证码输入框的值
var codeValue = $("#code").val();
// 验证验证码输入是否为空
if (codeValue == "") {
// 如果为空,提示用户
$("span.errorMsg").text("验证码不能为空!")
return false; // 阻止表单提交
}
// 如果所有验证通过返回true允许表单提交
return true;
});
});
</script>
<style type="text/css">
/* 定义 .login_form 类的样式 */
.login_form {
/* 设置登录表单的高度为420像素 */
height: 420px;
/* 设置登录表单与顶部的外边距为25像素 */
margin-top: 25px;
}
</style>
</head>
<body>
<div id="login_header">
<!-- 显示网站或应用程序的logo使用img标签加载图像 -->
<img class="logo_img" alt="" src="static/img/logo.jpg">
</div>
<div class="login_banner">
<!-- 登录横幅区域 -->
<div id="l_content">
<!-- 登录内容部分 -->
<span class="login_word">欢迎注册</span>
<!-- 提示用户进行注册 -->
</div>
<div id="content">
<!-- 内容区域 -->
<div class="login_form">
<!-- 登录表单容器 -->
<div class="login_box">
<!-- 登录框 -->
<div class="tit">
<!-- 标题部分 -->
<h1>注册会员</h1>
<!-- 主标题,显示“注册会员” -->
<span class="errorMsg">
<!-- 错误信息显示区域 -->
<%--<%=request.getAttribute("msg")==null? "" : request.getAttribute("msg")%>--%>
<!-- 注释掉的JSP代码用于获取请求中的消息属性 -->
${requestScope.msg}
<!-- 使用EL表达式获取请求作用域中的消息并显示 -->
</span>
</div>
<div class="form">
<!-- 表单容器 -->
<form action="userServlet" method="post">
<!-- 表单,提交到 userServlet使用 POST 方法 -->
<input type="hidden" name="action" value="regist">
<!-- 隐藏字段,指定表单操作为注册 -->
<label>用户名称:</label>
<!-- 用户名称标签 -->
<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username"
value="${requestScope.username}"/>
<!-- 输入框,供用户输入用户名 -->
<!-- 使用 EL 表达式填充之前的用户名(如果有的话) -->
<br />
<br />
<label>用户密码:</label>
<!-- 用户密码标签 -->
<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password"
value="${requestScope.password}"/>
<!-- 输入框,供用户输入密码 -->
<!-- 使用 EL 表达式填充之前的密码(如果有的话) -->
<br />
<br />
<label>确认密码:</label>
<!-- 确认密码标签 -->
<input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd"
value="${requestScope.repwd}"/>
<!-- 输入框,供用户确认密码 -->
<!-- 使用 EL 表达式填充之前的确认密码(如果有的话) -->
<br />
<br />
<label>电子邮件:</label>
<!-- 电子邮件标签 -->
<input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email"
value="${requestScope.email}"/>
<!-- 输入框,供用户输入电子邮件地址 -->
<!-- 使用 EL 表达式填充之前的邮箱(如果有的话) -->
<br />
<br />
<label>验证码:</label>
<!-- 验证码标签 -->
<input class="itxt" type="text" name="code" style="width: 80px;" id="code"/>
<!-- 输入框,供用户输入验证码 -->
<img id="code_img" alt="" src="kaptcha.jpg" style="float: right; margin-right: 40px;width: 110px;height: 30px">
<!-- 显示验证码图像 -->
<br />
<br />
<input type="submit" value="注册" id="sub_btn" />
<!-- 提交按钮,用户点击后提交表单进行注册 -->
</form>
</div>
</div>
</div>
</div>
</div>
<%@include file="/pages/common/footer.jsp"%>
</body>
</html>