实现点击注册按钮弹出注册表单的技术求助

直接基于你现有代码，用Bootstrap自带的模态框组件实现弹窗注册表单，不用额外引入jQuery（Bootstrap5已不再强制依赖jQuery），以下是修改后的完整代码：

HTML 代码 #

<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="sitestyle.css" rel="stylesheet" type="text/css">
    <title>Chartcell</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="sidenav">
    <div class="login-main-text">
        <h2>Chartcel <br> Login Page </h2>
        <p>Login or register from here to upload your desired spreadsheet.</p>
    </div>
    <div class="main">
        <div class="col-md-6 col-sm-12">
            <div class="login-form">
                <form id="loginForm">
                    <div class="form-group">
                        <label>Username </label>
                        <input type="text" class="form-control" id="loginUsername" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" id="loginPassword" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-black">Login</button>
                    <!-- 修改为触发模态框的按钮，取消submit类型 -->
                    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registerModal"> Register</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 注册表单模态框 -->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="registerModalLabel">用户注册</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="registerForm">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" id="registerUsername" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" id="registerPassword" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label>确认密码</label>
                <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码">
            </div>
            <div id="registerError" class="text-danger mt-2"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="submit" form="registerForm" class="btn btn-black">完成注册</button>
      </div>
    </div>
  </div>
</div>

<!-- 引入Bootstrap交互依赖 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="sitescript.js"></script>
</body>
</html>

CSS 代码（新增模态框适配样式） #

.main {
  padding: 0px 10px;
  width: 100%; /* Add this here */
}
body {
    font-family: "Lato", sans-serif;
}

.main-head {
    height: 150px;
    background: #FFF;
}

.sidenav {
    height: 100%;
    background-color: #000;
    overflow-x: hidden;
    padding-top: 20px;
    width: 100%;
}

.main {
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
}

@media screen and (max-width: 450px) {
    .login-form {
        margin-top: 10%;
    }

    .register-form {
        margin-top: 10%;
    }
}

@media screen and (min-width: 768px) {
    .sidenav {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    }

    .login-form {
        margin-top: 80%;
    }

    .register-form {
        margin-top: 20%;
    }
}

.login-main-text {
    margin-top: 20%;
    padding: 60px;
    color: #fff;
}

.login-main-text h2 {
    font-weight: 300;
}

.btn-black {
    background-color: #000 !important;
    color: #fff;
}

.login-form {
  margin-top: 20%;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.btn {
  margin-top: 20px;
}

/* 模态框表单间距适配 */
.modal-body .form-group {
    margin-bottom: 1rem;
}

JS 代码（完善表单验证逻辑） #

// 登录表单验证
const loginUsername = document.getElementById('loginUsername')
const loginPassword = document.getElementById('loginPassword')
const loginForm = document.getElementById('loginForm')

loginForm.addEventListener('submit', (e) => {
    let messages = []
    if(loginUsername.value === '' || loginUsername.value == null){
        messages.push('用户名不能为空')
    }
    if (loginPassword.value.length <= 6){
        messages.push('密码长度必须大于6位')
    }
    if (loginPassword.value.length >= 20){
        messages.push('密码长度不能超过20位')
    }
    if(loginPassword.value === 'password'){
        messages.push('密码不能为"password"')
    }
    if (messages.length > 0){
        e.preventDefault()
        alert(messages.join('，'))
    }
})

// 注册表单验证
const registerUsername = document.getElementById('registerUsername')
const registerPassword = document.getElementById('registerPassword')
const confirmPassword = document.getElementById('confirmPassword')
const registerForm = document.getElementById('registerForm')
const registerError = document.getElementById('registerError')

registerForm.addEventListener('submit', (e) => {
    let messages = []
    if(registerUsername.value === '' || registerUsername.value == null){
        messages.push('用户名不能为空')
    }
    if (registerPassword.value.length <= 6){
        messages.push('密码长度必须大于6位')
    }
    if (registerPassword.value.length >= 20){
        messages.push('密码长度不能超过20位')
    }
    if(registerPassword.value === 'password'){
        messages.push('密码不能为"password"')
    }
    if(registerPassword.value !== confirmPassword.value){
        messages.push('两次输入的密码不一致')
    }
    if (messages.length > 0){
        e.preventDefault()
        registerError.innerText = messages.join('，')
    } else {
        alert('注册成功')
        // 验证通过后关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('registerModal'))
        modal.hide()
    }
})

关键改动说明： #

1. 调整注册按钮：把原注册按钮的type="submit"改为type="button"，通过Bootstrap的data-bs属性触发模态框，避免误触登录表单提交。
2. 添加注册模态框：用Bootstrap原生modal组件构建弹窗，包含完整的注册字段及错误提示区域。
3. 拆分验证逻辑：分别为登录、注册表单编写独立的验证规则，修复原代码中innterText的拼写错误。
4. 补充依赖文件：引入Bootstrap JS和Popper.js，保证模态框的交互功能正常运行。

内容的提问来源于stack exchange，提问作者Slats_