|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- JSP页面指令，设置页面的内容类型为HTML格式，字符编码采用UTF-8，同时表明该页面使用Java语言编写 -->
|
|
|
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<!-- 声明页面的字符编码为UTF-8，确保页面中的文本内容能正确显示 -->
|
|
|
<meta name="renderer" content="webkit">
|
|
|
<!-- 指定页面使用WebKit内核进行渲染，用于在一些特定浏览器环境下控制页面的渲染方式 -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<!-- 指示浏览器以IE的最新版本或者Chrome Frame（如果已安装）来渲染页面，以解决不同浏览器版本兼容性问题 -->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
<!-- 设置视口相关属性，让页面在移动设备上能自适应屏幕宽度，初始缩放比例和最大缩放比例都设置为1 -->
|
|
|
<title>注册页</title>
|
|
|
<!-- 页面的标题，会显示在浏览器的标签栏上 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的基础样式文件，用于构建页面的整体样式布局，提供各种组件的默认样式 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的通用样式文件，可能包含整个项目中通用的一些样式规则，用于补充或覆盖框架样式 -->
|
|
|
<link rel="stylesheet" href="./css/login.css">
|
|
|
<!-- 引入与登录相关的样式文件，也许注册页复用了部分登录页的样式或者有相似的样式需求 -->
|
|
|
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
|
|
|
<!-- 设置页面的图标，显示在浏览器标签栏等位置，指定了图标文件的路径和类型 -->
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="frame-main">
|
|
|
<div class="login-main">
|
|
|
<header class="layui-elip">学生信息管理系统</header>
|
|
|
<!-- 使用layui相关的类定义了一个标题元素，展示系统名称，可能应用了特定的样式效果（如文本截断等） -->
|
|
|
|
|
|
<!-- 表单选项 -->
|
|
|
<form class="layui-form" id="registerForm" action="${pageContext.request.contextPath}/registerServlet" method="post">
|
|
|
<!-- 定义一个表单，使用layui的表单类进行样式修饰，设置了表单的id为"registerForm"，指定提交的目标Servlet路径以及提交方式为POST -->
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 用户名 -->
|
|
|
<div class="layui-inline" style="width: 100%">
|
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
|
|
|
<input type="text" id="user" value="${studentid}" name="studentid" required lay-verify="required" placeholder="请输入学号" autocomplete="off" class="layui-input">
|
|
|
</div>
|
|
|
<!-- 创建一个内联的输入框容器，里面包含一个图标标签（用于显示用户名图标）和一个文本输入框，输入框用于输入学号（这里名为studentid），
|
|
|
设置了相关属性如required表示必填，lay-verify用于layui框架的表单验证，placeholder是提示文本，autocomplete关闭自动完成功能，
|
|
|
并且通过value属性可能绑定了从后台传来的默认学号值（如果有） -->
|
|
|
</div>
|
|
|
<!-- 密码 -->
|
|
|
<div class="layui-input-inline">
|
|
|
<div class="layui-inline" style="width: 100%">
|
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
|
|
|
<input type="password" id="pwd" value="${password}" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
|
|
</div>
|
|
|
<!-- 类似上述输入框容器，用于输入密码，同样有相关的样式类、属性设置，并且通过value属性可能绑定了从后台传来的默认密码值（如果有） -->
|
|
|
</div>
|
|
|
<!-- 确认密码 -->
|
|
|
<div class="layui-input-inline">
|
|
|
<div class="layui-inline" style="width: 100%">
|
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
|
|
|
<input type="password" id="rpwd" value="${repassword}" name="repassword" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
|
|
|
</div>
|
|
|
<!-- 用于再次输入密码进行确认的输入框容器，同样设置了必要的样式、属性以及可能绑定的默认值 -->
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-input-inline" style="width: 56%;">
|
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
|
|
|
<input type="password" id="verifycode" name="verifycode" required lay-verify="required" placeholder="验证码" autocomplete="off"
|
|
|
class="layui-input">
|
|
|
</div>
|
|
|
<!-- 用于输入验证码的输入框容器，设置了相应的样式、属性以及提示文本等 -->
|
|
|
<a href="javascript:refreshCode()">
|
|
|
<img style="padding-left: 14px; margin-top: -15px;" src="${pageContext.request.contextPath}/checkCodeServlet" title="刷新验证码" id="vcode" draggable="false">
|
|
|
</a>
|
|
|
<!-- 一个链接元素，绑定了JavaScript函数refreshCode()，用于点击时刷新验证码图片，图片的src属性指向一个Servlet来获取验证码图片资源 -->
|
|
|
|
|
|
|
|
|
<div class="layui-input-inline login-btn" style="width: 100%">
|
|
|
<button type="submit" lay-submit lay-filter="sub" class="layui-btn">注册</button>
|
|
|
</div>
|
|
|
<!-- 创建一个内联的按钮容器，里面包含一个注册按钮，按钮类型为submit用于提交表单，同时使用了layui的相关属性用于表单提交验证等 -->
|
|
|
<hr style="width: 100%" />
|
|
|
<!-- 水平分割线 -->
|
|
|
<p style="width: 100%">
|
|
|
<a href="login.jsp" class="fl">立即登录</a>
|
|
|
<div class="tooltip">
|
|
|
<span class="tooltiptext">${msg}</span>
|
|
|
</div>
|
|
|
<a href="forget.jsp" class="fr">忘记密码？</a>
|
|
|
</p>
|
|
|
<!-- 包含了两个链接，一个指向登录页面（login.jsp），另一个指向忘记密码页面（forget.jsp），中间有一个用于显示提示信息（可能是后台传来的相关消息）的元素 -->
|
|
|
<i class="layui-icon" id="ri" style="color: green;font-weight: bolder; position: relative; left: 200px; top: -265px;" hidden></i>
|
|
|
<i class="layui-icon" id="wr" style="color: red; font-weight: bolder; position: relative; left: 200px; top: -265px;" hidden>ဆ</i>
|
|
|
<i class="layui-icon" id="pri" style="color: green;font-weight: bolder; position: relative; left: 180px; top: -213px;" hidden></i>
|
|
|
<i class="layui-icon" id="pwr" style="color: red; font-weight: bolder; position: relative; left: 180px; top: -213px;" hidden>ဆ</i>
|
|
|
<i class="layui-icon" id="rpri" style="color: green;font-weight: bolder; position: relative; left: 160px; top: -160px;" hidden></i>
|
|
|
<i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder; position: relative; left: 160px; top: -160px;" hidden>ဆ</i>
|
|
|
<!-- 定义了一组layui图标元素，初始时设置为隐藏（hidden属性），通过JavaScript代码根据不同的验证情况来显示或隐藏这些图标，用于直观地提示用户输入是否正确，
|
|
|
例如绿色图标表示输入正确，红色图标表示输入有误 -->
|
|
|
</form>
|
|
|
</div>
|
|
|
<span id="s_id"></span>
|
|
|
<!-- 一个空的span元素，可能后续会通过JavaScript动态添加内容或者用于其他DOM操作相关用途 -->
|
|
|
</div>
|
|
|
<footer style="position:absolute;bottom:0;width:100%;height:30px; text-align: center;">© 2018-2019.YOYLING.COM</footer>
|
|
|
<!-- 页面底部的版权声明元素，绝对定位在页面底部，宽度占满整个页面，高度为30px，文本居中显示 -->
|
|
|
|
|
|
<script src="layui.js"></script>
|
|
|
<!-- 引入layui框架的主脚本文件，用于实现页面交互逻辑以及使用layui框架提供的各种组件和功能 -->
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
function refreshCode() {
|
|
|
var vcode = document.getElementById("vcode");
|
|
|
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
|
|
|
}
|
|
|
// 定义refreshCode函数，用于刷新验证码图片的src属性，通过在URL后添加时间戳来避免浏览器缓存，确保每次获取到最新的验证码图片
|
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
layui.use(['form','jquery','layer'], function () {
|
|
|
var form = layui.form;
|
|
|
var $ = layui.jquery;
|
|
|
var layer = layui.layer;
|
|
|
// 使用layui的use方法加载form、jquery、layer这几个模块，并在回调函数中获取对应的实例，方便后续操作
|
|
|
|
|
|
// 添加表单失焦事件，验证表单
|
|
|
$('#user').blur(function() {
|
|
|
var studentid = $(this).val();
|
|
|
$.get("findStudentServlet",{studentid:studentid},function (data) {
|
|
|
if (data.studentExsit) {
|
|
|
$('#wr').removeAttr('hidden');
|
|
|
$('#ri').attr('hidden','hidden');
|
|
|
layer.open({
|
|
|
title: '错误',content: data.msg,icon: 2
|
|
|
});
|
|
|
$('#user').val("");
|
|
|
} else {
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
// 为学号输入框（id为user）绑定blur事件（即失去焦点事件），当输入框失去焦点时，发送一个GET请求到"findStudentServlet"，传递当前输入的学号作为参数，
|
|
|
// 根据返回的数据（假设是一个JSON格式数据，包含studentExsit等属性）来判断学号是否已存在，如果已存在则显示错误图标（wr），隐藏正确图标（ri），
|
|
|
// 弹出一个layui的弹出层提示错误信息，并清空输入框内容
|
|
|
|
|
|
// 为密码添加正则验证
|
|
|
$('#pwd').blur(function() {
|
|
|
var reg = /^[\w]{3,12}$/;
|
|
|
if(!($('#pwd').val().match(reg))){
|
|
|
//layer.msg('请输入合法密码');
|
|
|
$('#pwr').removeAttr('hidden');
|
|
|
$('#pri').attr('hidden','hidden');
|
|
|
layer.msg('请输入3-6位合法密码');
|
|
|
$('#pwd').val("");
|
|
|
}else {
|
|
|
$('#pri').removeAttr('hidden');
|
|
|
$('#pwr').attr('hidden','hidden');
|
|
|
}
|
|
|
});
|
|
|
// 为密码输入框（id为pwd）绑定blur事件，当失去焦点时，使用正则表达式验证输入的密码是否符合要求（这里要求是3-6位的字母数字下划线组成的字符），
|
|
|
// 如果不符合则显示错误图标（pwr），隐藏正确图标（pri），弹出提示信息告知用户输入合法密码，并清空输入框内容，符合要求则反之显示正确图标，隐藏错误图标
|
|
|
|
|
|
$('#user').blur(function() {
|
|
|
var reg = /^[0-9]{10}$/;
|
|
|
if(!($('#user').val().match(reg))){
|
|
|
//layer.msg('请输入合法密码');
|
|
|
$('#wr').removeAttr('hidden');
|
|
|
$('#ri').attr('hidden','hidden');
|
|
|
layer.msg('请输入10位数字学号');
|
|
|
$('#user').val("");
|
|
|
}else {
|
|
|
$('#ri').removeAttr('hidden');
|
|
|
$('#wr').attr('hidden','hidden');
|
|
|
}
|
|
|
});
|
|
|
// 再次为学号输入框（id为user）绑定blur事件，使用另一个正则表达式验证学号是否是10位数字，如果不符合要求则显示错误图标（wr），隐藏正确图标（ri），
|
|
|
// 弹出提示信息告知用户输入10位数字学号，并清空输入框内容，符合要求则反之显示正确图标，隐藏错误图标
|
|
|
|
|
|
//验证两次密码是否一致
|
|
|
$('#rpwd').blur(function() {
|
|
|
if($('#pwd').val()!= $('#rpwd').val() || $('#rpwd').val()=='' || $('#pwd').val()==''){
|
|
|
$('#rpwr').removeAttr('hidden');
|
|
|
$('#rpri').attr('hidden','hidden');
|
|
|
// layer.msg('两次输入密码不一致!');
|
|
|
$('#rpwd').val("");
|
|
|
}else{
|
|
|
$('#rpri').removeAttr('hidden');
|
|
|
$('#rpwr').attr('hidden','hidden');
|
|
|
};
|
|
|
});
|
|
|
// 为确认密码输入框（id为rpwd）绑定blur事件，当失去焦点时，检查两次输入的密码是否一致以及是否为空，如果不一致或为空则显示错误图标（rpwr），隐藏正确图标（rpri），
|
|
|
// 并清空确认密码输入框内容，一致且不为空则显示正确图标，隐藏错误图标
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
