【注册表单】html+css注册表单，带js验证功能

html代码

        <div class="zhuce">
            <div class="formBox">
                <div class="formbiaodan">
                    <form action="">
                        <div class="item">
                            <input type="text" placeholder="请输入账号，以字母开头的3-5位数">
                        </div>
                        <div class="item">
                            <input type="password" placeholder="请输入密码 6-12位">
                        </div>
                        <div class="item">
                            <input type="password" placeholder="请确认密码">
                        </div>
                        <div class="item">
                            <input type="tel" placeholder="请输入11位手机号">
                        </div>
                        <div class="item yzm">
                            <input type="tel" placeholder="输入验证码">
                            <button id="code" type="button">获取验证码</button>
                        </div>
                        <div class="btn-box">
                            <button type="submit">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

css代码

.zhuce{
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
    flex: 1;
}
.zhuce .formBox{
    width: 400px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px #ccc;
    background: rgba(0, 0, 0, .1);
}
.zhucetitle{
    text-align: center;
    font-weight: bold;
    line-height: 50px;
    font-size:28px;
    color: #000;
}
.formbiaodan{
    margin-top: 50px;
}
.formbiaodan .item{
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    margin-bottom: 20px;
   border-bottom: 1px solid #000;
}
.formbiaodan .yzm{
    display: flex;
    justify-content: space-between;
}
 
.formbiaodan .item input{
    padding-left: 10px;
    width: 100%;
    line-height: 48px;
    border: 0;
    outline: none;
    box-sizing: border-box;
}
.formbiaodan .yzm input{
    width: calc(100% - 80px);
}
#code{
    width: 80px;
    text-align: center;
    background-color: #000;
    cursor: pointer;
    color: #fff;
    border: none;
}
.yzm .disabled{
    background-color: #c6aaaa !important;
}
.formbiaodan .btn-box{
    display:flex;
}
.btn-box button{
    width: 100px;
    background-color: #000;
    color: #fff;
    width: 100px;
    border: 0;
    outline: 0;
    line-height: 40px;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

javascript代码

  
// 获取表单元素  
var form = document.querySelector('form');  
  
// 添加表单提交事件监听器  
form.addEventListener('submit', function(event) {  
    // 阻止表单默认提交行为  
    event.preventDefault();  
    // 验证函数（返回true表示验证通过，false表示验证失败）  
    var isValid = validateForm();  
    // 如果验证通过，则使用JavaScript的submit()方法提交表单  
    // 这里为了演示，我们不真正提交表单，而是显示一个弹窗  
    if (isValid) {  
        alert('表单验证通过，准备提交！');  
    }  
});  
  
// 验证函数  
function validateForm() {  
    var username = document.querySelector('input[type="text"]');  
    var password = document.querySelector('input[type="password"]:nth-of-type(1)');  
    var confirmPassword = document.querySelector('input[type="password"]:nth-of-type(2)');  
    var phone = document.querySelector('input[type="tel"]');  
    var code = document.querySelector('input[type="tel"]'); // 假设验证码输入框与手机号输入框不同（尽管HTML中它们相同）  
  
    // 验证用户名（以字母开头，3-5位）  
    if (!/^[a-zA-Z][a-zA-Z0-9]{2,4}$/.test(username.value)) {  
        alert('账号必须是以字母开头的3-5位数！');  
        return false;  
    }  
  
    // 验证密码（6-12位）  
    if (!/^.{6,12}$/.test(password.value)) {  
        alert('密码必须是6-12位！');  
        return false;  
    }  
  
    // 验证确认密码（这里只是简单地检查是否与密码相同）  
    if (password.value !== confirmPassword.value) {  
        alert('两次输入的密码不一致！');  
        return false;  
    }  
  
    // 验证手机号（11位）  
    if (!/^\d{11}$/.test(phone.value)) {  
        alert('手机号必须是11位数字！');  
        return false;  
    }  
  
    // 验证验证码（这里假设验证码长度是固定的，例如6位）  
    // 注意：在真实应用中，你需要从服务器获取验证码并进行验证  
    if (!/^\d{6}$/.test(code.value)) {  
        alert('验证码必须是6位数字！');  
        return false;  
    }  
  
    // 所有验证都通过了  
    return true;  
}  
  
//给获取验证码按钮添加事件监听器
let countdown = 0;
let codeButton = document.getElementById('code');
document.getElementById('code').addEventListener('click', function() {  
    // 模拟发送验证码到手机号的操作（这里只是显示一个提示）  
     // 验证码倒计时功能  
     if (countdown === 0) {
        alert('验证码已发送到您的手机！');  
        countdown = 60;
        this.innerText = countdown + ' s';
        this.classList.add('disabled');
        const intervalId = setInterval(() => {
            countdown--;
            codeButton.innerText = countdown + ' s';
            if (countdown === 0) {
                clearInterval(intervalId);
                codeButton.innerText = "获取验证码";
                codeButton.classList.remove('disabled');
                countdown = 0; // Reset countdown  
            }
        }, 1000);
    }

   
});