JSP

Posted 2021-11-27 zzh630

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSP相关的知识，希望对你有一定的参考价值。

JSP全名为Java Server Pages，中文名叫java服务器页面

JSP六大组成部分
1、指令 <%@ %> 指定页面的脚本语言、文本类型、编码格式、导包等
2、html 标签展示页面
3、小脚本 <% %> 辅助作用，解决HTML不能实现的逻辑编程
4、表达式 <%= %> 替代out.print输出，将小脚本中的变量进行输出
5、声明 <%! %> 声明全局变量
6、注释  HTML注释：后台可见
　　　　<%-- --%> 脚本注释:后台不可见

验证表单格式的javascript 　　yanzheng.js

$(function () {
    // 用户名验证
    $("[name=username]").on("input", function () {
        var reg = /^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/;
        var username_val = $(this).val();
        if(username_val==null||username_val===""){
            $(this).next().html("*").css("color", "red")
        }else if (reg.test(username_val) === false) {
            $(this).next().html("×用户名不正确").css("color", "red")
        } else {
            $(this).next().html("?").css("color", "green")
        }
    });
    // 密码验证
    $("[name=password]").on("input", function () {
        var reg =/^([0-9]|[a-zA-Z]){6,16}$/;
        var password_val = $(this).val();
        if(password_val==null||password_val===""){
            $(this).next().html("*").css("color", "red")
        }else if (reg.test(password_val)===false) {
            $(this).next().html("×密码不正确").css("color", "red")
        } else {
            $(this).next().html("?").css("color", "green")
        }
    });
    // 邮箱验证
    $("[name=email]").on("input", function () {
        var reg = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/;
        var email_val = $(this).val();
        if(email_val==null||email_val===""){
            $(this).next().html("*").css("color", "red")
        }else if (reg.test(email_val) === false) {
            $(this).next().html("×邮箱格式不正确").css("color", "red")
        } else {
            $(this).next().html("?").css("color", "green")
        }
    });
    // 提交
    $("#fm").submit(function () {
        var userName=$("[name=username]").next().html();
        var passWord=$("[name=password]").next().html();
        var Email=$("[name=email]").next().html();

        if(userName==="*"||passWord==="*"||Email==="*"){
            $("[name=提交]").next().html("请输入完提交")
        }else if(userName==="×用户名不正确"||passWord==="×密码不正确"||Email==="×邮箱格式不正确"){
            $("[name=提交]").next().html("请正确输入再提交")
        }else if(userName==="?"&&passWord==="?"&&Email==="?"){
            return true;
        }
        return false;
    });
})

登陆页面　　　　　　index.jsp

<%@ page language="java" contentType="text/html;  charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>J站注册页面</title>
<script src="js/jquery-3.3.1.min.js"></script>
<!--导入样式 -->
<link rel="stylesheet" href="css/dl.css">
<!--导入验证-->
<script src="js/yanzheng.js"></script>
</head>
<body>
    <div>
        <form id="fm" action="dlh.jsp" method="post">
            <div>
                <img src="img/chang.gif" height=200px width=800px />
                <div class="表单">
                    <p>
                        <label for="username">账号:</label><input type="text"
                            name="username" id="username" placeholder="请输入账号"><span
                            style="color: red">*</span>
                    </p>
                    <p>
                        密码:<input type="password" name="password" placeholder="请输入密码"><span
                            style="color: red">*</span>
                    </p>
                    <p>
                        邮箱:<input type="text" name="email" placeholder="请输入邮箱"><span
                            style="color: red">*</span>
                    </p>
                    <p>
                        性别 <input type="radio" name="sex" value="男">男 <input
                            type="radio" name="sex" value="女">女
                    </p>
                    <p>
                        爱好 <input type="checkbox" name="hobby" value="篮球">篮球 <input
                            type="checkbox" name="hobby" value="游泳">游泳 <input
                            type="checkbox" name="hobby" value="跑步">跑步 <input
                            type="checkbox" name="hobby" value="高尔夫">高尔夫
                    </p>
                    <p>
                        <input type="submit" name="提交" value="提交" onclick="subm()"><span
                            style="color: red"></span>
                    </p>
                    <input type="reset" id="reset" value="重置">
                </div>
            </div>
        </form>
    </div>
</body>
</html>

登陆成功后的跳转页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div>
    
        <%--获取信息--%>
        <%request.setCharacterEncoding("utf-8"); %>
        <%String username=request.getParameter("username"); %>
        <%String password=request.getParameter("password"); %>
        <%String email=request.getParameter("email"); %>
        <%String sex=request.getParameter("sex"); %>
        <%String[] hobby=request.getParameterValues("hobby"); %>
        <p>
            账号:<%=username%></p>
        <p>
            密码:<%=password%></p>
        <p>
            邮箱:<%=email%></p>
        <p>
            性别:<%=sex%></p>

        <p>爱好:
            <%if(hobby!=null){
                for(int i=0;i<hobby.length;i++){
            %>
            <%=hobby[i]%>
            <%}}%>
        </p>
    </div>

</body>
</html>

以上是关于JSP的主要内容，如果未能解决你的问题，请参考以下文章