|
|
<%@ page contentType="text/html;charset=UTF-8" %>
|
|
|
<!-- JSP页面指令，设置页面内容类型为text/html（即HTML格式页面），并指定字符编码为UTF-8，
|
|
|
保证页面能正确显示各类字符，避免出现乱码情况 -->
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<!-- 设置HTML页面的字符编码为utf-8，虽然前面JSP指令已经设置了编码，但这里在HTML部分再次声明，
|
|
|
可以增强浏览器对页面字符编码的识别和处理，确保内容正确显示 -->
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 设置页面的标题为“注册账户”，此标题会显示在浏览器的标题栏中，让用户清楚当前页面的功能 -->
|
|
|
<title>注册账户</title>
|
|
|
<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（当前目录下的js/layui/css/layui.css），
|
|
|
media="all"表示该样式适用于所有的媒体类型，也就是在各种设备上都应用此样式 -->
|
|
|
<link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
|
|
|
<!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
|
|
|
是后续使用Layui组件和功能的基础，路径为当前目录下的js/layui/layui.js -->
|
|
|
<script src="./js/layui/layui.js"></script>
|
|
|
<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
|
|
|
方便简化JavaScript编程，这里的路径指向当前目录下的js/jquery.js -->
|
|
|
<script src="./js/jquery.js"></script>
|
|
|
<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了项目中通用的函数、变量或者其他自定义逻辑，
|
|
|
路径为当前目录下的js/global.js -->
|
|
|
<script src="./js/global.js"></script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 创建一个<fieldset>元素，用于对表单等相关元素进行分组显示，添加了Layui的样式类，设置了顶部外边距为10px，
|
|
|
让页面布局更清晰美观 -->
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
|
|
|
<!-- 在<fieldset>内部使用<legend>元素来为分组设置标题，这里标题为“注册用户”，起到说明该分组内容的作用 -->
|
|
|
<legend>注册用户</legend>
|
|
|
</fieldset>
|
|
|
<!-- 创建一个Layui风格的表单，通过class="layui-form"应用Layui的表单样式和相关交互功能，action属性为空，
|
|
|
表示表单提交的地址暂未设置（后续可能通过JavaScript动态指定或者在服务器端进行统一处理等） -->
|
|
|
<form class="layui-form" action="">
|
|
|
<!-- 创建一个Layui表单项目（layui-form-item），用于组织表单内的各个输入元素等内容，使得表单结构更清晰 -->
|
|
|
<div class="layui-form-item">
|
|
|
<!-- 创建一个内联的布局容器（layui-inline），方便在一行内放置多个表单元素，实现更灵活的布局 -->
|
|
|
<div class="layui-inline">
|
|
|
<!-- 创建一个表单标签元素（layui-form-label），用于显示对应输入框的说明文字，这里显示“账户名” -->
|
|
|
<label class="layui-form-label">账户名</label>
|
|
|
<!-- 创建一个内联的输入框容器（layui-input-inline），用于放置具体的输入框元素 -->
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 创建一个文本输入框（input type="text"），设置了输入框的名称（name="loginName"）用于表单提交时传递参数，
|
|
|
lay-verify属性指定了验证规则（这里要求必须输入且符合自定义的inputName规则），autocomplete="off"关闭浏览器的自动完成功能，
|
|
|
placeholder属性设置了输入框的占位提示文字“您登录所需的账户”，同时应用了Layui的输入框样式类（layui-input） -->
|
|
|
<input type="text" name="loginName" lay-verify="required|inputName" autocomplete="off"
|
|
|
placeholder="您登录所需的账户" class="layui-input">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label">密码</label>
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 创建一个密码输入框（input type="password"），设置名称为“loginPwd”，指定了验证规则（required|inputPwd），
|
|
|
关闭自动完成功能，设置占位提示文字“您登录所需的密码”，应用Layui输入框样式，并且给该输入框设置了id为“pwd1”，方便后续在JavaScript中通过id获取其值 -->
|
|
|
<input type="password" name="loginPwd" id="pwd1" lay-verify="required|inputPwd" autocomplete="off"
|
|
|
placeholder="您登录所需的密码" class="layui-input">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label">确认密码</label>
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 创建另一个密码输入框，用于用户再次输入密码进行确认，设置了验证规则，关闭自动完成，设置占位提示文字，
|
|
|
同样应用Layui样式，其id为“pwd2”，方便后续与前面输入的密码进行比较验证 -->
|
|
|
<input type="password" id="pwd2" lay-verify="required|inputPwd" autocomplete="off"
|
|
|
placeholder="重复你所输入的密码" class="layui-input">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label">昵称</label>
|
|
|
<div class="layui-input-inline">
|
|
|
<input type="text" name="loginNickName" lay-verify="required|inputName" autocomplete="off"
|
|
|
placeholder="您的个性昵称" class="layui-input">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 创建一个Layui风格的按钮（layui-btn），设置了lay-submit属性表示该按钮用于触发表单提交操作，
|
|
|
lay-filter属性指定了一个过滤器名称（insertRome），用于在JavaScript中监听该按钮的提交事件，按钮文字为“注册” -->
|
|
|
<button class="layui-btn" lay-submit lay-filter="insertRome">注册</button>
|
|
|
<!-- 创建一个重置按钮（type="reset"），样式为Layui的默认按钮样式（layui-btn layui-btn-primary），
|
|
|
点击该按钮可将表单内的输入框等元素恢复到初始状态 -->
|
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
|
|
|
<script>
|
|
|
// 使用Layui框架的模块加载机制，加载['form', 'layedit', 'laydate']这几个模块，
|
|
|
// 并在加载完成后执行回调函数，在回调函数内可以使用这些模块提供的功能，
|
|
|
// 这里主要是使用form模块来处理表单相关操作，layer模块用于弹出提示框等交互功能
|
|
|
layui.use(['form', 'layedit', 'laydate'], function () {
|
|
|
var form = layui.form,
|
|
|
layer = layui.layer;
|
|
|
|
|
|
// 自定义验证规则，通过form.verify方法来定义，下面分别针对inputName和inputPwd规则进行具体的验证逻辑设置
|
|
|
form.verify({
|
|
|
inputName: function (value) {
|
|
|
// 验证账户名长度，如果输入的字符长度小于4个字符，返回错误提示信息“账户至少4个字符”，
|
|
|
// 阻止表单提交，提示用户输入符合要求长度的账户名
|
|
|
if (value.length < 4) {
|
|
|
return '账户至少4个字符';
|
|
|
}
|
|
|
|
|
|
// 如果输入的字符长度大于10个字符，返回错误提示信息“账户至多10个字符”，同样阻止表单提交，
|
|
|
// 要求用户输入合理长度的账户名
|
|
|
if (value.length > 10) {
|
|
|
return '账户至多10个字符'
|
|
|
}
|
|
|
},
|
|
|
inputPwd: function (value) {
|
|
|
// 验证密码长度，当输入的密码字符长度小于4个字符时，返回“密码至少4个字符”的提示信息，
|
|
|
// 让用户知晓密码长度不符合要求，无法提交表单
|
|
|
if (value.length < 4) {
|
|
|
return '密码至少4个字符';
|
|
|
}
|
|
|
|
|
|
// 如果密码字符长度大于18个字符，返回“密码至多18个字符”的提示信息，提醒用户修改密码长度，
|
|
|
// 只有密码长度符合要求才能进行后续的表单提交操作
|
|
|
if (value.length > 18) {
|
|
|
return '密码至多18个字符'
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 监听表单的提交事件，通过form.on方法监听指定过滤器（lay-filter="insertRome"）对应的提交操作，
|
|
|
// 当点击注册按钮（触发提交且符合验证规则）时，会执行这个回调函数，data参数包含了表单提交的数据等相关信息
|
|
|
form.on('submit(insertRome)', function (data) {
|
|
|
|
|
|
// 通过jQuery选择器（$("#pwd1")）获取id为“pwd1”的密码输入框元素，并获取其输入的值，存储在变量pwd1中，
|
|
|
// 该值为用户第一次输入的密码
|
|
|
var pwd1 = $("#pwd1").val();
|
|
|
// 同样的方式获取id为“pwd2”的密码输入框元素的值，存储在变量pwd2中，用于和pwd1进行比较验证
|
|
|
var pwd2 = $("#pwd2").val();
|
|
|
|
|
|
// 比较两次输入的密码是否一致，如果不一致，通过layer.msg方法弹出提示框，显示“二次密码验证不一致”的提示信息，
|
|
|
// 告知用户需要重新输入密码，确保两次密码相同才能进行注册操作
|
|
|
if (pwd1!= pwd2) {
|
|
|
layer.msg("二次密码验证不一致");
|
|
|
} else {
|
|
|
// 如果两次密码一致，使用jQuery的$.post方法进行异步POST请求，向服务器端发送数据，
|
|
|
// baseUrl + '/InsertLoginServlet'是请求的URL地址（baseUrl可能是在全局变量中定义的基础地址，
|
|
|
// InsertLoginServlet应该是服务器端用于处理注册逻辑的Servlet等程序），
|
|
|
// JSON.stringify(data.field)将表单提交的数据（经过Layui处理后的字段数据）转换为JSON字符串格式发送给服务器，
|
|
|
// 最后在请求成功的回调函数中根据服务器返回的code值进行不同的提示处理
|
|
|
$.post(baseUrl + '/InsertLoginServlet', JSON.stringify(data.field), function (code) {
|
|
|
if (code === 1) {
|
|
|
// 如果服务器返回的code值为1，表示注册成功，通过layer.alert方法弹出一个提示框，
|
|
|
// 设置标题为“成功”，图标为6（表示成功的图标样式），动画效果为5，告知用户注册成功
|
|
|
layer.alert('注册成功！', {
|
|
|
title: '成功',
|
|
|
icon: 6,
|
|
|
anim: 5
|
|
|
});
|
|
|
} else {
|
|
|
// 如果服务器返回的code值不为1，表示注册失败，同样弹出提示框，设置标题为“异常”，图标为5（表示失败的图标样式），
|
|
|
// 动画效果为6，向用户提示注册失败的信息，让用户知晓操作未成功
|
|
|
layer.alert('注册失败！', {
|
|
|
title: '异常',
|
|
|
icon: 5,
|
|
|
anim: 6
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 返回false，表示阻止表单的默认提交行为，因为这里通过异步请求（$.post）已经自行处理了提交相关的数据交互，
|
|
|
// 不需要浏览器再进行默认的表单提交刷新页面等操作
|
|
|
return false;
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
