表单校验 js

function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
    return re.test(String(email).toLowerCase());
}

// 使用示例
const emailInput = document.querySelector('#email');
emailInput.addEventListener('blur', () => {
    if (!validateEmail(emailInput.value)) {
        emailInput.setCustomValidity('请输入有效的邮箱地址');
    } else {
        emailInput.setCustomValidity('');
    }
});

document.querySelector('form').addEventListener('submit', function(event) {
    let isValid = true;
    // 假设有多个输入字段需要校验
    const inputs = this.querySelectorAll('input[required]');
    inputs.forEach(input => {
        if (!input.value.trim()) {
            isValid = false;
            input.setCustomValidity('此字段为必填项');
        } else {
            input.setCustomValidity('');
        }
    });
    if (!isValid) {
        event.preventDefault(); // 阻止表单提交
    }
});