实现一个函数 validate(form)，对表单进行校验

推荐答案

// www.javascriptcn.com code example
function validate(form) {
    const inputs = form.querySelectorAll('input, textarea, select');
    let isValid = true;

    inputs.forEach(input => {
        if (input.required && !input.value.trim()) {
            isValid = false;
            input.classList.add('error');
        } else {
            input.classList.remove('error');
        }

        if (input.type === 'email' && !validateEmail(input.value)) {
            isValid = false;
            input.classList.add('error');
        }

        if (input.type === 'password' && !validatePassword(input.value)) {
            isValid = false;
            input.classList.add('error');
        }
    });

    return isValid;
}

function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

function validatePassword(password) {
    return password.length >= 8;
}

本题详细解读

1. 函数功能

validate(form) 函数用于对表单进行校验。它会遍历表单中的所有输入元素（包括 input、textarea 和 select），并根据不同的输入类型和规则进行校验。

2. 校验规则

• 必填项校验：如果输入元素设置了 required 属性，并且值为空，则校验失败。
• 邮箱校验：如果输入元素的类型为 email，则使用正则表达式校验邮箱格式。
• 密码校验：如果输入元素的类型为 password，则校验密码长度是否大于等于 8 个字符。

3. 错误处理

• 如果校验失败，函数会为对应的输入元素添加 error 类，以便在页面上进行样式提示。
• 如果所有输入都通过校验，函数返回 true，否则返回 false。

4. 辅助函数

• validateEmail(email)：用于校验邮箱格式的正则表达式。
• validatePassword(password)：用于校验密码长度的函数。

5. 使用示例

// www.javascriptcn.com code example
<form id="myForm">
    <input type="text" required placeholder="Name">
    <input type="email" required placeholder="Email">
    <input type="password" required placeholder="Password">
    <button type="submit">Submit</button>
</form>

<script>
    const form = document.getElementById('myForm');
    form.addEventListener('submit', function(event) {
        if (!validate(form)) {
            event.preventDefault();
            alert('Please fill out all required fields correctly.');
        }
    });
</script>

在这个示例中，表单提交时会调用 validate(form) 函数进行校验，如果校验失败，则阻止表单提交并弹出提示。