表单验证后无法提交、错误提示未实时消失及日期验证需求

问题1：验证通过后无法提交表单 #

原因：提交事件中始终调用e.preventDefault()阻止了表单默认提交行为，未在验证通过时恢复提交逻辑。

修复：

1. 修改checkInputs()函数，添加isValid变量跟踪所有字段的验证状态，最终返回该变量。
2. 在提交事件监听中，仅当验证不通过时阻止默认行为，验证通过则允许表单提交至signup.php。

问题2：错误提示无法实时消失 #

原因：仅在点击提交按钮时触发验证，输入框内容修改时未实时触发对应字段的验证逻辑。

修复：
给所有输入框添加input事件监听，实时触发单个字段的验证，避免仅依赖提交按钮触发全表单验证。

问题3：出生日期验证（有效性+年龄≥16岁） #

原因：缺少日期有效性和年龄判断的实现函数，且原有验证代码被注释。

修复：

1. 实现isValidDate函数，验证输入的YYYY/MM/DD格式是否合法且为真实存在的日期。
2. 实现isAgeLessThan16函数，计算输入日期对应的年龄是否小于16岁。
3. 启用checkInputs()中关于dob字段的注释代码，加入上述两个验证逻辑。

修改后的完整代码 #

JavaScript部分 #

const form = document.getElementById('form');
const firstname = document.getElementById('firstname');
const lastname = document.getElementById('lastname');
const email = document.getElementById('email');
const dob = document.getElementById('dob');
const phone = document.getElementById('phone');
const username = document.getElementById('username');
const password = document.getElementById('password');
const confpassword = document.getElementById('confpassword');

// 提交事件处理
form.addEventListener('submit', (e) => {
    if (!checkInputs()) {
        e.preventDefault(); // 验证不通过才阻止提交
    }
});

// 给所有输入框添加实时验证事件
[firstname, lastname, email, dob, phone, username, password, confpassword].forEach(input => {
    input.addEventListener('input', () => validateSingleField(input));
});

// 验证单个字段的函数
function validateSingleField(input) {
    const value = input.value.trim();
    switch(input.id) {
        case 'firstname':
            value === '' ? setErrorFor(input, 'Please enter your name') : setSuccessFor(input);
            break;
        case 'lastname':
            value === '' ? setErrorFor(input, 'Please enter your name') : setSuccessFor(input);
            break;
        case 'email':
            if (value === '') {
                setErrorFor(input, 'Please fill in your Email address');
            } else if (!isEmail(value)) {
                setErrorFor(input, 'Please enter a valid Email address');
            } else {
                setSuccessFor(input);
            }
            break;
        case 'dob':
            if (value === '') {
                setErrorFor(input, 'Please enter your date of birth');
            } else if (!isValidDate(value)) {
                setErrorFor(input, 'Please enter a valid date in the format YYYY/MM/DD');
            } else if (isAgeLessThan16(value)) {
                setErrorFor(input, 'You must be 16 years or older');
            } else {
                setSuccessFor(input);
            }
            break;
        case 'phone':
            if (value === '') {
                setErrorFor(input, 'Please enter your phone number');
            } else if (value.length < 11) {
                setErrorFor(input, 'Please enter your 11 digits number');
            } else {
                setSuccessFor(input);
            }
            break;
        case 'username':
            value === '' ? setErrorFor(input, 'Please choose a username') : setSuccessFor(input);
            break;
        case 'password':
            if (value === '') {
                setErrorFor(input, 'Please enter a strong password');
            } else if (value.length < 8) {
                setErrorFor(input, 'Your Password must be at least 8 characters');
            } else {
                setSuccessFor(input);
            }
            break;
        case 'confpassword':
            const passwordValue = password.value.trim();
            if (value === '') {
                setErrorFor(input, 'Please enter your password');
            } else if (value !== passwordValue) {
                setErrorFor(input, 'Password not match!');
            } else {
                setSuccessFor(input);
            }
            break;
    }
}

// 全表单验证函数，返回是否所有字段有效
function checkInputs(){
    let isValid = true;

    const firstnameValue = firstname.value.trim();
    const lastnameValue = lastname.value.trim();
    const emailValue = email.value.trim();
    const dobValue = dob.value.trim();
    const phoneValue = phone.value.trim();
    const usernameValue = username.value.trim();
    const passwordValue = password.value.trim();
    const confpasswordValue = confpassword.value.trim();

    if(firstnameValue === '') {
        setErrorFor(firstname, 'Please enter your name');
        isValid = false;
    } else {
        setSuccessFor(firstname);
    }

    if(lastnameValue === '') {
        setErrorFor(lastname, 'Please enter your name');
        isValid = false;
    } else {
        setSuccessFor(lastname);
    }

    if (dobValue === '') {
        setErrorFor(dob, 'Please enter your date of birth');
        isValid = false;
    } else if (!isValidDate(dobValue)) {
        setErrorFor(dob, 'Please enter a valid date in the format YYYY/MM/DD');
        isValid = false;
    } else if (isAgeLessThan16(dobValue)) {
        setErrorFor(dob, 'You must be 16 years or older');
        isValid = false;
    } else {
        setSuccessFor(dob);
    }

    if(phoneValue === '') {
        setErrorFor(phone, 'Please enter your phone number');
        isValid = false;
    } else if(phoneValue.length < 11) {
        setErrorFor(phone, 'Please enter your 11 digits number');
        isValid = false;
    }else {
        setSuccessFor(phone);
    }

    if(usernameValue === '') {
        setErrorFor(username, 'Please choose a username');
        isValid = false;
    } else {
        setSuccessFor(username);
    }

    if(passwordValue === '') {
        setErrorFor(password, 'Please enter a strong password');
        isValid = false;
    } else if(passwordValue.length < 8) {
        setErrorFor(password, 'Your Password must be at least 8 characters');
        isValid = false;
    } else {
        setSuccessFor(password);
    }

    if (confpasswordValue === '') {
        setErrorFor(confpassword, 'Please enter your password');
        isValid = false;
    } else if(confpasswordValue !== passwordValue){
        setErrorFor(confpassword, 'Password not match!');
        isValid = false;
    } else {
        setSuccessFor(confpassword);
    }

    if(emailValue === '') {
        setErrorFor(email, 'Please fill in your Email address');
        isValid = false;
    } else if(!isEmail(emailValue)) {
        setErrorFor(email, 'Please enter a valid Email address');
        isValid = false;
    } else{
        setSuccessFor(email);
    }

    return isValid;
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    small.innerText = message;
    formControl.className = 'input-part error';
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'input-part success';
}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

// 验证日期有效性（YYYY/MM/DD格式）
function isValidDate(dateString) {
    const regex = /^\d{4}\/\d{2}\/\d{2}$/;
    if (!regex.test(dateString)) return false;
    
    const parts = dateString.split('/');
    const year = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10) - 1; // 月份是0-11
    const day = parseInt(parts[2], 10);
    
    const date = new Date(year, month, day);
    return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day;
}

// 判断年龄是否小于16岁
function isAgeLessThan16(dateString) {
    const birthDate = new Date(dateString.replace(/\//g, '-')); // 转成Date可识别的格式
    const today = new Date();
    const age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();
    
    // 如果月份差小于0，或者月份相等但日期还没到，年龄减1
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        return age - 1 < 16;
    }
    return age < 16;
}

HTML优化建议（可选） #

将dob输入框的type="text"改为type="date"，浏览器会提供原生日期选择器，减少手动输入格式错误：

<input type="date" id="dob" name="dob" placeholder="Enter your Birthday">

CSS部分 #

原CSS代码无需修改，保持原样即可。

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