实验五 JSP编程II

最新推荐文章于 2024-11-11 21:19:25 发布

m0_69670999

最新推荐文章于 2024-11-11 21:19:25 发布

阅读量106

点赞数

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/m0_69670999/article/details/133849723

版权

regUser源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <style>
        label {
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: left;
            width: 150px;
            vertical-align: top;
            margin-left: 500px;
        }
    </style>
</head>

<body>


<h1 style="color: deeppink;margin-top: 170px;margin-left: 705px">新用户注册</h1>

<form action="UserInfo.jsp" method="post" onsubmit="return validateForm();">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" size="25px" required>
    <span style="color: red"> *必填</span><br>

    <label for="password">用户密码：</label>
    <input type="text" id="password" name="password" size="25px" required>
    <span style="color: red"> *必填</span><br>

    <label for="confirm">确认密码：</label>
    <input type="text" id="confirm" name="confirm" size="25px" onblur="judeConfirm()" required>
    <span style="color: red"> *必填</span>
    <span id="confirmError" style="color: red"></span><br>

    <label for="name">真实姓名：</label>
    <input type="text" id="name" name="name" size="25px" required>
    <span style="color: red"> *必填</span><br>

    <div style="margin-top: 13px;margin-bottom: 13px">
        <label> 性别：</label>
        <input type="radio" id="man" name="sex" value="男"> 男
        <input type="radio" id="woman" name="sex" value="女"> 女<br>
    </div>

    <label>出生日期：</label>
    <input type="text" id="year" name="year" size="3px"> 年
    <select style="width: 70px;text-align: center" name="month">
        <option value="">请选择</option>
        <% for (int i = 1; i <= 12; i++) {%>
        <option value="<%=i%>"><%=i%>
        </option>
        <%}%>
    </select> 月
    <input type="text" id="day" name="day" size="3px"> 日


    <label for="mail"> 电子邮件：</label>
    <input type="text" id="mail" name="mail" size="45px" onblur="judeMail()">
    <span id="mailError" style="color: red"></span><br>

    <label for="phone"> 联系电话：</label>
    <input type="text" id="phone" name="phone" size="45px" onblur="judePhone()">
    <span id="phoneError" style="color: red"></span><br>


    <label>联系地址：</label>
    <textarea name="introduce" cols="45" rows="7"></textarea><br>

    <input type="submit" value="提交" style="margin-left: 570px;margin-top: 5px">
    <input type="reset" value="重置" style="margin-left: 200px;margin-top: 5px">
</form>

<script>
    let confirmlok;
    let phonelok;
    let maillok;

    function judeConfirm() {
        let passwordInput = document.getElementById("password");
        let confirmInput = document.getElementById("confirm");
        let confirmError = document.getElementById("confirmError");

        if (passwordInput.value !== confirmInput.value) {
            confirmError.textContent = "两次密码不一致。";
        } else {
            confirmError.textContent = "";
            confirmlok = true;
        }
    }

    function judeMail() {
        let mailInput = document.getElementById("mail");
        let mailError = document.getElementById("mailError");
        let mailPattern = /^\w+@[a-zA-Z_]+\.[a-zA-Z]{2,3}$/;
        if (!mailPattern.test(mailInput.value)) {
            mailError.textContent = "请提供有效的电子邮件地址。";
            maillok = false;
        } else {
            mailError.textContent = "";
            maillok = true;
        }
    }

    function judePhone() {
        let phoneInput = document.getElementById("phone");
        let phoneError = document.getElementById("phoneError");
        let phonePattern = /^\d{11}$/; // 假设11位数字
        if (!phonePattern.test(phoneInput.value)) {
            phoneError.textContent = "请提供有效的电话号码。";
            phonelok = false;
        } else {
            phoneError.textContent = "";
            phonelok = true;
        }
    }

    function validateForm() {
        if (confirmlok && phonelok && maillok) {
            alert("登录成功");
            return true; // 允许表单提交
        } else {
            alert("登录失败");
            return false; // 阻止表单提交
        }
    }
</script>
</body>
</html>

UserInfo源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    // 从请求中获取表单提交的数据
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    String name = request.getParameter("name");
    String sex = request.getParameter("sex");
    String year = request.getParameter("year");
    String month = request.getParameter("month");
    String day = request.getParameter("day");
    String mail = request.getParameter("mail");
    String phone = request.getParameter("phone");
    String introduce = request.getParameter("introduce");
%>
<html>
<head>
    <title>注册信息</title>
    <style>
        label {
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            width: 150px;
            vertical-align: top;
        }
    </style>
</head>
<body style="text-align: center">
<h1 style="margin-top: 200px">注册信息</h1>

<fieldset>
    <legend>PERSONAL INFORMATION</legend>
    <label>用户名：</label>
    <input type="text" value="<%=username%>"><br>

    <label>用户密码：</label>
    <input type="number" value="<%=password%>"><br>

    <label>真实姓名：</label>
    <input type="text" value="<%=name%>"><br>

    <label>性别：</label>
    <input type="text" value="<%=sex%>"><br>

    <label>出生日期：</label>
    <input type="text" value="<%=year%>年<%=month%>月<%=day%>日"><br>
</fieldset>

<fieldset>
    <legend>CONTACT DETAILS</legend>
    <label>电子邮件：</label>
    <input type="text" value="<%=mail%>"><br>

    <label>联系电话：</label>
    <input type="number" value="<%=phone%>"><br>

    <label>联系地址：</label>
    <input type="text" value="<%=introduce%>"><br>
</fieldset>

<a href="regUser.jsp">返回</a>
</body>
</html>

效果图(验证格式是否正确)：

如果格式正确后：

跳转到下一页：

m0_69670999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫