<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2020/2/18
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--
设置该JSP页面的相关属性。
contentType属性指定了页面响应的内容类型为"text/html"（即HTML格式），同时将字符编码设置为UTF-8，这样能保证页面中的中文等特殊字符可以正确显示，避免出现乱码情况。
language属性表明该页面使用Java语言来编写服务器端的代码逻辑（例如使用Java代码片段或者基于Java的标签库等）。
-->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--
引入JSTL（JavaServer Pages Standard Tag Library）的核心标签库，设置前缀为“c”。通过这个标签库，我们可以在JSP页面中方便地使用如条件判断、循环遍历等功能，实现更灵活的页面逻辑控制。
    -->
    <html>
    <head>
    <!--
    设置页面的字符编码为UTF-8，确保浏览器能正确解析并显示页面中的各种字符，防止出现乱码现象，虽然在上面的page指令中已经设置了字符编码，但这里再次明确一下也是一种良好的习惯，保证兼容性。
    -->
    <meta charset="UTF-8" />
    <!--
    设置页面渲染所使用的引擎为webkit，让页面在支持webkit的浏览器中按照该引擎的规则进行渲染，有助于呈现出期望的页面样式和交互效果，针对移动端页面，webkit引擎能提供较好的兼容性和性能表现。
    -->
    <meta name="renderer" content="webkit" />
    <!--
    设置页面的视口（viewport）属性，用于控制页面在移动端设备上的显示效果。
    width=device-width表示页面宽度跟随设备宽度自适应，initial-scale=1.0设置初始缩放比例为1.0，maximum-scale=1.0限制最大缩放比例为1.0，user-scalable=0表示禁止用户手动缩放页面，uc-fitscreen=yes用于适配UC浏览器的屏幕显示（特定浏览器相关设置），这些设置可以让页面在移动端有合适的展示效果，适配不同屏幕尺寸的设备。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
    <!--
    设置页面在iOS系统下的Web应用相关属性，content="yes"表示该网页可以作为一个独立的Web应用在iOS设备的主屏幕上以全屏模式运行，提供类似原生应用的体验。
    -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--
    设置iOS系统下Web应用状态栏的样式为黑色，用于统一页面在iOS设备上的显示风格，使其更加美观和符合视觉习惯。
    -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!--
    设置禁止页面自动识别电话号码，避免页面中的数字被误识别为电话号码并添加点击拨号的链接等情况，保持页面内容的原始展示意图。
    -->
    <meta name="format-detection" content="telephone=no" />
    <!--
    设置页面的标题，这个标题通常会显示在浏览器的标签页上，用于标识当前页面的主题内容，此处标题设置为“来访登记”，清晰地表明了该页面的主要功能是进行来访登记操作。
    -->
    <title>来访登记</title>
    <!--
    引入miniMObile框架的CSS样式文件，通过EL表达式 "${pageContext.request.contextPath}/css/miniMobile.css" 来指定样式文件的路径。
    "${pageContext.request.contextPath}" 会获取当前Web应用的上下文路径（即项目部署后的根路径部分），然后拼接上相对路径 "/css/miniMobile.css"，这样就能准确地找到并应用miniMObile框架提供的样式，使页面具有相应的布局和外观效果。
    -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/miniMobile.css"/>
    <!--
    引入jQuery库的JavaScript文件，路径同样通过EL表达式 "${pageContext.request.contextPath}/js/jquery-3.1.1.js" 来确定，将其引入到页面中使得可以使用jQuery提供的各种强大的DOM操作、事件处理、AJAX等功能，方便开发页面交互效果。
    -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
    <!--
    引入layer弹出层插件的JavaScript文件，其路径为 "${pageContext.request.contextPath}/layer/layer.js"，layer插件常用于在页面中创建各种美观且交互友好的弹出层效果，比如提示框、确认框、加载层等，增强页面的用户交互体验，这里主要用于显示一些提示信息给用户。
    -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <!--
    引入zepto.min.js文件，zepto是一个轻量级的JavaScript库，与jQuery类似，提供了简洁易用的DOM操作、事件处理等功能，常用于移动端页面开发，它在文件大小上相对更轻量，适合移动端对性能和资源占用有要求的场景，这里引入可能是为了在页面中使用它的一些特性来实现交互功能。
    -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/zepto.min.js"></script>
    <!--
    引入miniMobile.js文件，这应该是与前面引入的miniMobile.css配套的JavaScript文件，可能包含了miniMObile框架中各种组件或功能所依赖的交互逻辑，用于实现页面中基于该框架的一些特定交互效果或业务逻辑。
    -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/miniMobile.js"></script>
    <!--
    引入mobileSelect组件的CSS样式文件，用于为页面中的下拉选择组件（可能是自定义的具有更丰富功能的选择器）提供样式，使其在页面上呈现出特定的外观风格，通过指定路径 "${pageContext.request.contextPath}/css/mobileSelect.css" 来准确引入该样式文件。
    -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mobileSelect.css">
    <!--
    引入mobileSelect组件的JavaScript文件，该文件包含了mobileSelect组件实现下拉选择等交互功能的具体逻辑代码，路径为 "${pageContext.request.contextPath}/js/mobileSelect.js"，引入后可在页面中使用该组件来实现更友好的选择操作界面。
    -->
    <script src="${pageContext.request.contextPath}/js/mobileSelect.js" type="text/javascript"></script>
    <!--
    引入noUiSlider组件的CSS样式文件，noUiSlider通常用于在页面中创建滑块组件，用于选择数值范围等交互操作，这里引入其样式文件 "${pageContext.request.contextPath}/css/nouislider.css" 是为了给该组件应用相应的样式，使其在页面上正确显示外观。
    -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/nouislider.css" />
    <!--
    引入switchery组件的CSS样式文件，switchery一般用于创建开关样式的交互组件，通过引入 "${pageContext.request.contextPath}/css/switchery.css" 样式文件，能让该组件在页面上呈现出对应的样式效果，方便用户进行开关操作等交互。
    -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/switchery.css"/>
    <!--
    引入iconfont.css文件，这通常是用于引入自定义的图标字体文件，通过字体文件来展示各种图标，相比于传统的图片图标，字体图标在缩放、修改颜色等方面更方便灵活，且能减少页面加载的图片资源数量，提高性能，这里通过指定路径 "${pageContext.request.contextPath}/css/iconfont.css" 来引入对应的图标字体样式文件。
    -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/iconfont.css" />
    <!--
    引入animate.css文件，这是一个非常流行的CSS动画库，通过链接 "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" 从CDN（内容分发网络）引入该文件，它提供了大量预定义的CSS动画类，可以方便地应用到页面元素上，实现各种酷炫的动画效果，增强页面的视觉吸引力。
    -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
    </head>
    <body class="pb12 fadeIn animated">
    <!--
    创建一个页面头部（header）元素，应用了多个样式类，如 "formheader" 应该是自定义的用于头部样式的类，"w75" 可能表示宽度占父容器的75%（具体取决于样式定义），"h8" 可能表示高度相关的设置（同样依赖具体样式定义），"f30" 大概率是设置字体大小为30（单位可能是像素等，由样式决定），"color6" 和 "bg-color-info" 分别用于设置文本颜色和背景颜色（这些颜色类的具体颜色值由对应的CSS文件定义），同时通过内联样式 "text-align: center;" 设置文本在头部元素内水平居中显示，该头部元素用于展示页面的主要标题“学生来访登记”。
    -->
    <header class="formheader w75 h8 f30 color6 bg-color-info" style="text-align: center;">
    学生来访登记
    </header>
    <style>
    .formheader {
    line-height: 0.7rem;
    /*
    设置头部元素（.formheader类）的行高为0.7rem，行高用于控制文本行之间的垂直间距，合理设置行高可以让文本在元素内看起来更加整齐、美观，这里使用相对单位rem，能更好地根据页面根元素的字体大小进行自适应调整。
    */
    }

    .formheader span {
    display: inline-block;
    /*
    设置头部元素内的<span>子元素以行内块级元素（inline-block）方式显示，这样既可以像行内元素一样在一行内排列，又能像块级元素一样设置宽度、高度等样式属性，方便对头部内的特定元素进行布局和样式调整。
    */
    }

    .formheader input {
    border: none;
    /*
    设置头部元素内的<input>输入框元素去除边框样式，使其外观更加简洁，可能是为了符合页面整体的设计风格，避免输入框的边框影响视觉效果。
    */
    }
    </style>
    <!--
    创建一个包含内容的容器（div）元素，应用了多个样式类，"p3" 可能表示该元素具有一定的内边距（padding）设置（具体数值由样式定义），"f30" 大概率是设置字体大小为30，"w75" 可能表示宽度占父容器的75%，用于在页面中划分出一块用于放置来访登记表单内容的区域，使其在页面上有合适的布局位置和大小。
    -->
    <div class="p3 f30 f30 w75">
    <!--
    创建一个HTML的表单（form）元素，用于收集用户输入的来访登记相关信息，并将这些信息提交到服务器端进行处理。
    action属性通过EL表达式 "${pageContext.request.contextPath}/visitor/addLogin" 指定了表单提交的目标URL，即当用户点击提交按钮后，表单数据将被发送到该路径对应的服务器端接口进行处理（这里应该是处理来访登记的业务逻辑接口）。
    method属性设置为"post"，表示使用POST方法提交表单数据，相对GET方法，POST更适合用于提交包含敏感信息或者大量数据的表单，因为数据会放在请求体中而不是URL上，更加安全且数据量限制相对较小。
    name属性设置为"myform"，用于在JavaScript等代码中可以通过这个名称来引用该表单元素，方便进行一些表单相关的操作（如提交表单等）。
    -->
    <form action="${pageContext.request.contextPath}/visitor/addLogin" method="post" name="myform">
    <!--
    创建一个包含内容的容器（div）元素，应用了 "pt2 pb2" 样式类（可能表示有顶部和底部的内边距设置，具体由样式定义），用于在表单内划分出一个区域来放置姓名相关的输入框和提示文本，使页面布局更加清晰、有条理。
    -->
    <div class="pt2 pb2">
    姓名：
    <!--
    创建一个文本输入框（input）元素，类型（type）设置为"text"，表示这是一个普通的文本输入框，用户可以在里面输入文字信息。
    class属性应用了 "w59  form-control" 样式类，"w59" 可能用于设置输入框的宽度（具体由样式定义），"form-control" 通常是一些框架（如Bootstrap等类似框架风格）中用于统一输入框样式的类，使其具有一定的外观风格，如边框、圆角等效果。
    name属性设置为"name"，这个名称会作为表单数据提交到服务器端时的参数名，服务器端可以通过这个参数名获取用户输入的姓名信息。
    id属性设置为"name"，用于在JavaScript代码中通过该ID来唯一标识这个输入框元素，方便获取其输入的值或者进行其他操作（如验证输入内容等）。
    placeholder属性设置为"输入姓名"，用于在输入框内显示一个提示性的文本，当输入框为空时，提示用户应该输入什么内容，提高用户体验。
    maxlength属性设置为"10"，用于限制用户输入的字符长度最多为10个字符，避免用户输入过长的姓名导致数据不符合要求或者页面显示异常等情况。
    -->
    <input type="text" class="w59  form-control" name="name" id="name" placeholder="输入姓名"  maxlength="10" />
    </div>
    <!--
    创建一个包含内容的容器（div）元素，用于在表单内划分出一个区域来放置学号相关的输入框和提示文本，使页面布局清晰，方便用户区分不同的输入项。
    -->
    <div>
    学号：
    <!--
    创建一个文本输入框（input）元素，类型为"text"，表示用于输入文本内容。
    应用 "w59  form-control" 样式类来设置输入框的外观样式和宽度等属性，使其与页面整体风格统一。
    name属性设置为"sno"，作为提交到服务器端的参数名，方便服务器获取用户输入的学号信息。
    id属性设置为"sno"，用于在JavaScript代码中通过该ID来操作这个输入框元素，比如获取输入的值进行验证等操作。
    min和max属性分别设置为"5"和"20"，这里可能是用于限制学号的长度范围（不过在HTML5中，对于普通文本输入框，这种限制的实际效果可能有限，更多的是一种提示作用，真正的验证通常还需要在JavaScript或者服务器端进一步处理），表示学号的长度应该在5到20个字符之间。
    placeholder属性设置为"输入学号"，在输入框为空时显示提示文本，引导用户输入正确的内容。
    -->
    <input type="text" class="w59  form-control" name="sno" id="sno" min="5" max="20" placeholder="输入学号" />
    </div>
    <!--
    创建一个包含内容的容器（div）元素，应用 "pt2 pb2" 样式类，在表单内划分出一个区域来放置手机号码相关的输入框和提示文本，使页面布局更加合理，便于用户操作和查看。
    -->
    <div class="pt2 pb2">
    手机：
    <!--
    创建一个文本输入框（input）元素，类型为"text"，用于输入手机号码信息。
    应用 "w59  form-control" 样式类来设置输入框的样式和宽度等，使其符合页面整体的视觉风格。
    name属性设置为"phone"，作为提交到服务器端的参数名，以便服务器获取用户输入的手机号码内容。
    id属性设置为"phone"，方便在JavaScript代码中通过该ID对这个输入框进行操作，比如获取输入的值进行合法性验证等操作。
    placeholder属性设置为"输入联系方式"，在输入框为空时显示提示文本，引导用户输入手机号码信息。
    -->
    <input type="text" class="w59  form-control" name="phone" id="phone" placeholder="输入联系方式" />
    </div>
    <!--
    创建一个包含内容的容器（div）元素，应用 "pt2 pb2" 样式类，在表单内划分出一个区域来放置楼宇相关的下拉选择框（select）和提示文本，使用下拉选择框可以提供预定义的选项供用户选择，方便用户操作且能保证输入数据的规范性。
    -->
    <div class="pt2 pb2">
    楼宇：
            <!-- 显示“楼宇”字样作为提示文本，告知用户接下来的选择框对应的内容含义 -->
            <select class="w59  form-control" id="place" name="place">
                <!-- 创建一个下拉选择框（select）元素，应用 "w59  form-control" 样式类来控制其宽度及样式外观，使其符合页面整体风格，id 设置为 "place" 用于在 JavaScript 中通过该 ID 来获取其选中的值，name 同样为 "place"，以便表单提交时以此作为参数名向服务器端传递用户选择的楼宇信息 -->
                <option value="西六一楼">西六一楼</option>
                <!-- 创建一个下拉选项（option）元素，其 value 属性值为 "西六一楼"，表示当用户选择该项时，实际传递给服务器端的值就是 "西六一楼"，显示的文本内容为 "西六一楼"，供用户直观看到可选择的具体楼宇名称 -->
                <option value="西六二楼">西六二楼</option>
                <option value="西六三楼">西六三楼</option>
                <option value="西七一楼">西七一楼</option>
                <option value="西七二楼" selected="selected">西七二楼</option>
                <!-- 此选项设置了 "selected" 属性，表示该选项在页面加载时默认被选中，即初始状态下用户看到的已选中的楼宇是 "西七二楼" -->
                <option value="西七三楼">西七三楼</option>
                <option value="西十二一楼">西十二一楼</option>
                <option value="西十二二楼">西十二二楼</option>
                <option value="西十二三楼">西十二三楼</option>
                <option value="西十三一楼">西十三一楼</option>
                <option value="西十三二楼">西十三二楼</option>
                <option value="西十三三楼">西十三三楼</option>
            </select>
        </div>
        <div class="mt4 mb4">
            <!-- 创建一个带有类名 "mt4 mb4" 的 div 容器，推测可能是设置了顶部（mt4）和底部（mb4）的外边距，用于在页面中进一步划分布局区域，此处用于放置“备注”相关的输入框 -->
            备注：
            <!-- 显示“备注”字样作为提示文本，提示用户接下来的输入框用于填写访问原因等备注信息 -->
            <input class="w59 h20 form-control" value="公事" id="visit_result" name="visit_result" placeholder="访问原因" />
            <!-- 创建一个文本输入框（input）元素，应用 "w59 h20 form-control" 样式类来控制其宽度、高度及样式外观，使其与页面整体风格统一，初始值（value）设置为 "公事"，id 设置为 "visit_result" 用于在 JavaScript 中通过该 ID 操作该输入框，name 为 "visit_result" 以便表单提交时以此作为参数名向服务器端传递用户输入的备注信息，placeholder 属性设置为 "访问原因"，当输入框为空时显示此提示文本引导用户输入内容 -->
        </div>
        <div class="t-c mt5">
            <!-- 创建一个带有类名 "t-c mt5" 的 div 容器，推测 "t-c" 可能表示文本居中（text-align: center）样式相关设置，"mt5" 可能是设置了顶部外边距，用于在页面中定位放置提交按钮的位置，使其在页面上有合适的布局呈现 -->
            <input type="button" onclick="toCheck()" id="sub-btn" class="btn f30 btn-primary radius10 p2 w50" value="提交登记" />
            <!-- 创建一个按钮类型（type 为 "button"）的输入框元素，点击时会触发名为 "toCheck" 的 JavaScript 函数（通过 onclick 属性指定），设置了 id 为 "sub-btn" 方便在 JavaScript 或 CSS 中对该按钮进行样式控制或操作，应用 "btn f30 btn-primary radius10 p2 w50" 样式类来赋予其按钮外观样式（比如颜色、圆角、内边距、宽度等样式效果），按钮显示的文本内容为 "提交登记"，告知用户点击该按钮的作用 -->
        </div>
    </form>
    </div>
    <script>
        function toCheck() {
            // 定义一个名为 toCheck 的 JavaScript 函数，用于在点击提交按钮时进行表单数据的验证以及提交操作
            var name = $("#name").val().trim();
            // 通过 jQuery 选择器（$）选取 id 为 "name" 的元素（即前面的姓名输入框），获取其输入的值（val 方法），并使用 trim 方法去除输入值前后可能存在的空白字符，将处理后的结果存储在变量 name 中
            var sno = $("#sno").val().trim();
            // 同理，获取 id 为 "sno" 的学号输入框的值，去除空白字符后存储在变量 sno 中
            var phone = $("#phone").val().trim();
            // 获取 id 为 "phone" 的手机号码输入框的值，去除空白字符后存储在变量 phone 中
            var place = $("#place").val().trim();
            // 获取 id 为 "place" 的楼宇选择框选中项的值（即用户选择的楼宇名称），去除空白字符后存储在变量 place 中
            var visit_result = $("#visit_result").val().trim();
            // 获取 id 为 "visit_result" 的备注输入框的值，去除空白字符后存储在变量 visit_result 中
            if (name == null || sno == null || phone == null || place == null || visit_result == null
                || name.length == 0 || sno.length == 0 || phone.length == 0 || place.length == 0 || visit_result.length == 0) {
                // 进行条件判断，如果获取到的任何一个输入框的值为 null（可能是未获取到元素等情况）或者长度为 0（即用户未输入任何内容），则执行以下代码块
                layer.msg('不能为空，请输入信息...');
                // 使用 layer 插件弹出一个提示框，显示提示信息 "不能为空，请输入信息..."，告知用户需要填写完整表单信息
                return false;
                // 返回 false，阻止表单的提交操作，因为此时表单数据不完整，不符合提交要求
            }
            document.myform.submit();
            // 如果所有输入框都有值（通过前面的条件判断），则通过 JavaScript 的原生方式获取名为 "myform" 的表单元素（前面在 form 标签中设置了 name 属性为 "myform"），并调用其 submit 方法来提交表单数据到服务器端，触发服务器端对应的处理逻辑（由 form 表单的 action 属性指定的 URL 对应的接口来处理）
        }
        if (${logout_msg!= null &&!(logout_msg.trim().equals(""))}) {
            // 使用 JSP 表达式语言（EL）进行条件判断，判断名为 logout_msg 的变量是否不为 null 并且去除两端空白字符后不为空字符串，如果满足该条件，则执行以下代码块，此处可能是用于处理注销相关的提示信息显示逻辑
            layer.msg(${logout_msg});
            // 使用 layer 插件弹出提示框，显示 logout_msg 变量对应的消息内容，向用户展示相关提示信息（例如注销成功或失败等提示）
        }
        if (${error_msg!= null &&!("".trim().equals(error_msg))}) {
            // 同样使用 EL 表达式进行条件判断，判断名为 error_msg 的变量是否不为 null 并且去除两端空白字符后不为空字符串，如果满足条件，则执行以下代码块，此处可能是用于处理其他错误相关的提示信息显示逻辑
            layer.msg(${error_msg});
            // 使用 layer 插件弹出提示框，显示 error_msg 变量对应的消息内容，向用户展示相应的错误提示信息（例如表单提交失败等错误提示）
        }
    </script>
    </body>
    </html>
