用户系统｜前端注册页面｜代码

最新推荐文章于 2024-06-12 23:31:21 发布

潮汐如梦

最新推荐文章于 2024-06-12 23:31:21 发布

阅读量1.8w

点赞数 18

分类专栏： javaweb入门学习记录

本文链接：https://blog.csdn.net/qq_38064686/article/details/79968850

版权

javaweb入门学习记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

regist.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ page  import="com.servlet.UserServlet" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
    <link href="css/regist.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 注册页面左图 -->
        <div class="left"></div>
        <!-- 注册栏 -->
        <div class="right">
            <div class="reg-label">
                <label>用 户 注 册</label>
                <hr>
            </div>
            <div class="reg-box">
                <form action="<%=request.getContextPath()%>/servlet/UserServlet" id="formId" class="reg-form" method="POST">
                    <div>
                        <tr>
                            <td><input type="text" name="Username" id="InputUsername" placeholder="用户名" οnblur="InputUsernameBlur()"></td>
                            <td><label id="errorName"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="password" name="Password" id="InputPassword" placeholder="密码" οnblur="InputPasswordBlur()"></td>
                            <td><label id="errorPassword"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="password" name="Repassword" id="InputRepassword" placeholder="确认密码" οnblur="InputRepasswordBlur()"></td>
                            <td><label id="errorRepassword"></label></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td><input type="email" name="E-mail" id="InputEmail" placeholder="电子邮箱" οnblur="InputEmailBlur()"></td>
                            <td><label id="errorEmail"></label></td>
                        </tr>
                    </div>
                    <div class="reg-sub">
                        <input id="submitButton" type="button" οnclick="checkForm()" value="免费注册">
                    </div>
                </form>
            </div>
        </div>
        <div class="bottom">
            <label>© 吉林大学珠海学院 计算机学院 ｜ 软件工程 04161408</label>
        </div>
    </div>
    <!-- regist.js -->
    <script type="text/javascript" charset="UTF-8" src="js/regist.js"></script>
</body>
</html>

regist.css

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 1000px;
    height: 600px;
    margin: 25px auto;
    background: #4c4c4c;
}
.left {
    width: 60%;
    height: 80%;
    display: block;
    float: left;
    margin-top: 60px;
    background-image: url("./../../imgs/regist.jpg"); /*记得路径要这样写*/
}
.right {
    width: 40%;
    height: 80%;
    display: block;
    float: right;
    margin-top: 60px;
    background: #f3f9f1;
}
.reg-label {
    width: 400px;
    height: 50px;
    text-align: center;
}
.reg-label label {
    width: 400px;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    color: #4c4c4c;
}
.reg-box {
    width: 400px;
    height: 430px;
}
.reg-form {
    width: 400px;
    height: 320px;
}
.reg-form input {
    width: 60%;
    margin: 20px;
    padding: 10px;
    float: left;
    background-color: transparent;
    border: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    outline: none;
    color: #4c4c4c;
}
.reg-form div {
    height: 80px;
}
.reg-sub {
    width: 400px;
    height: 70px;
}
.reg-sub input {
    width: 54%;
    margin: 20px 88px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background: transparent;
    color: #4c4c4c;
    border: 1px solid rgba(0, 0, 0, 0.42);
    border-width: thin;
    cursor: pointer;
    outline: none;
    -webkit-transition: 0.5s all;
    text-decoration: none;
}
.bottom {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.bottom label {
    color: rgba(255, 255, 255, 0.56);
    font-size: 13px;
}
.reg-form label {
    font-size: 12px;
    line-height: 78px;
    color: #ff461f;
}

regist.js

/**
 * 表单提交时验证
 * @returns {boolean}
 */
function checkForm() {

    var Form = document.getElementById("formId");
    var bool = true;
    if (!InputUsernameBlur()) bool = false;
    if (!InputPasswordBlur()) bool = false;
    if (!InputRepasswordBlur()) bool = false;
    if (!InputEmailBlur()) bool = false;
    if (bool==true) {
        Form.submit();
    }
    return bool;

}

/**
 * 用户名输入框失去焦点
 */
function InputUsernameBlur() {
    var uname = document.getElementById("InputUsername");
    var ename = document.getElementById("errorName");
    /* 用户名为空/不为空 */
    if (uname.value=="") {
        ename.innerHTML="用户名不能为空。";
        return false;
    }
    else {
        ename.innerHTML="";
    }
    /* 密码长度 */
    if (uname.value.length<4 || uname.value.length>16) {
        ename.innerHTML="长度为4-16。";
        return false;
    }
    else {
        ename.innerHTML="";
    }
    return true;
}

/**
 * 密码输入框失去焦点
 */
function InputPasswordBlur() {
    var pwd = document.getElementById("InputPassword");
    var epwd = document.getElementById("errorPassword");
    /* 密码为空/不为空 */
    if (pwd.value=="") {
        epwd.innerHTML="密码不为空。"
        return false;
    }
    else {
        epwd.innerHTML="";
    }
    /* 密码长度 */
    if (pwd.value.length<6 || pwd.value.length>16) {
        epwd.innerHTML="长度为6-16。"
        return false;
    }
    else {
        epwd.innerHTML="";
    }
    return true;
}

/**
 * 邮箱输入框失去焦点
 */
function InputEmailBlur() {
    var email = document.getElementById("InputEmail");
    var eemail = document.getElementById("errorEmail");
    /* 邮箱不为空 */
    if (email.value=="") {
        eemail.innerHTML="邮箱不为空。"
        return false;
    }
    else {
        eemail.innerHTML="";
    }
    /* 邮箱格式验证 */
    var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
    if (reg.test(email.value)==false) {
        eemail.innerHTML="邮箱格式错误。";
        return false;
    }
    else {
        eemail.innerHTML="";
    }
    return true;
}

/**
 * 确认密码输入框失去焦点
 */
function InputRepasswordBlur() {
    var rpwd = document.getElementById("InputRepassword");
    var erpwd = document.getElementById("errorRepassword");
    /* 确认密码不为空 */
    if (rpwd.value=="") {
        erpwd.innerHTML="确认密码不为空。"
        return false;
    }
    else {
        erpwd.innerHTML="";
    }
    /* 确认密码与密码不一致 */
    var pwd = document.getElementById("InputPassword");
    if (pwd.value != rpwd.value) {
        erpwd.innerHTML="密码不一致。"
        return false;
    }
    else {
        erpwd.innerHTML="";
    }
    return true;
}

实际页面