JavaScript表单输入不能为空验证的完整实现方案

function validateOnSubmit() {
    const input = document.getElementById('username');
    if (input.value.trim() === '') {
        alert('用户名不能为空');
        return false;
    }
    return true;
}

<form onsubmit="return validateOnSubmit()">

document.getElementById('userForm').addEventListener('submit', function(e) {
    const username = this.username.value.trim();
    if (username === '') {
        alert('用户名不能为空！');
        e.preventDefault(); // 阻止默认提交
    }
});

if (input.value === '') { /* 为空 */ }

if (input.value.trim() === '') { /* 真正为空 */ }

const input = document.getElementById('username');
if (!input) {
    console.error('找不到指定输入框');
    return false;
}

const value = input.value;
if (value.trim() === '') {
    alert('请输入用户名');
    return false;
}

// 获取所有带 required 属性的输入框
const requiredFields = document.querySelectorAll('input[required], textarea[required]');

let isValid = true;

requiredFields.forEach(field => {
    if (field.value.trim() === '') {
        console.warn(`${field.name || field.placeholder} 不能为空`);
        isValid = false;
    }
});

<input type="text" id="username" required placeholder="请输入用户名">

if (!value.trim()) { /* 视为空 */ }

if (value.trim().length === 0) { /* 真正为空 */ }

function isValidAge(ageStr) {
    const num = Number(ageStr);
    return !isNaN(num) && num >= 0 && num <= 120;
}

function isEmpty(value) {
    if (value == null) return true; // null 或 undefined

    if (typeof value === 'string') {
        return value.trim().length === 0;
    }

    if (Array.isArray(value)) {
        return value.length === 0;
    }

    if (typeof value === 'object') {
        return Object.keys(value).length === 0;
    }

    return false; // 其他类型如 number, boolean 不视为空
}

flowchart LR
    Start[开始判断] --> NullCheck{value == null?}
    NullCheck -- 是 --> ReturnTrue[返回 true]
    NullCheck -- 否 --> TypeCheck{类型判断}
    TypeCheck --> StringCase[字符串? → trim().length === 0]
    TypeCheck --> ArrayCase[数组? → length === 0]
    TypeCheck --> ObjectCase[对象? → keys.length === 0]
    TypeCheck --> OtherCase[其他 → false]
    StringCase --> End
    ArrayCase --> End
    ObjectCase --> End
    OtherCase --> End
    End --> ReturnValue[返回结果]

function validateForm(form) {
    let isValid = true;

    // 查找所有必填字段
    const requiredInputs = form.querySelectorAll('[required]');

    requiredInputs.forEach(input => {
        if (isEmpty(input.value)) {
            markAsError(input, '此项为必填');
            if (isValid) input.focus(); // 第一个错误字段获取焦点
            isValid = false;
        } else {
            clearError(input);
        }
    });

    return isValid;
}

form.addEventListener('submit', validateData);     // 验证逻辑
form.addEventListener('submit', trackAnalytics);   // 数据埋点
form.addEventListener('submit', disableSubmitBtn); // 防重复提交
form.addEventListener('submit', saveToLocal);      // 自动保存

<div onclick="console.log('div clicked')">
    <form id="myForm">...</form>
</div>

flowchart LR
    A[用户点击submit按钮] --> B[触发submit事件]
    B --> C{是否有preventDefault?}
    C -->|是| D[阻止页面跳转]
    C -->|否| E[执行默认提交]
    B --> F{是否有stopPropagation?}
    F -->|是| G[停止向祖先传递]
    F -->|否| H[事件继续冒泡]

form.addEventListener('submit', async function(e) {
    const response = await fetch('/check-username', { 
        method: 'POST', 
        body: JSON.stringify({ username: this.username.value })
    });
    const data = await response.json();

    if (!data.available) {
        e.preventDefault(); // ❌ 太晚了！
        alert('用户名已存在');
    }
});

form.addEventListener('submit', async function(e) {
    e.preventDefault(); // ⬅️ 必须一开始就阻止！

    try {
        const response = await fetch('/api/validate', {
            method: 'POST',
            body: new FormData(this)
        });

        const result = await response.json();

        if (result.valid) {
            this.submit(); // 绕过事件监听器直接提交
        } else {
            showError(result.message);
        }
    } catch (err) {
        showError('网络异常，请稍后重试');
    }
});

function setLoading(form, loading) {
    const btn = form.querySelector('button[type="submit"]');
    btn.disabled = loading;
    btn.textContent = loading ? '验证中...' : '提交';
}

// validators.js
export const isEmpty = str => typeof str === 'string' ? str.trim().length === 0 : false;
export const isEmail = str => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
export const minLength = (str, len) => str.trim().length >= len;
export const maxLength = (str, len) => str.trim().length <= len;

function validateInputs(configList) {
    let firstErrorField = null;
    let isValid = true;

    configList.forEach(config => {
        const { element, rules, message } = config;
        const value = element.value;

        for (const rule of rules) {
            if (!rule(value)) {
                showError(element, message);
                if (isValid) {
                    firstErrorField = element;
                }
                isValid = false;
                break;
            }
        }

        if (isValid) {
            clearError(element);
        }
    });

    if (firstErrorField) {
        firstErrorField.focus();
    }

    return isValid;
}

form.addEventListener('submit', function(e) {
    const rules = [
        {
            element: this.username,
            rules: [v => !isEmpty(v), v => minLength(v, 3)],
            message: '用户名至少3个字符'
        },
        {
            element: this.email,
            rules: [v => !isEmpty(v), v => isEmail(v)],
            message: '请输入有效邮箱'
        }
    ];

    if (!validateInputs(rules)) {
        e.preventDefault();
    }
});

sequenceDiagram
    participant User
    participant Frontend
    participant Backend

    User->>Frontend: 提交表单
    Frontend->>Frontend: preventDefault()
    Frontend->>Backend: AJAX POST 请求
    alt 响应成功
        Backend-->>Frontend: 返回 200 + 成功数据
        Frontend->>User: 跳转成功页
    else 校验失败
        Backend-->>Frontend: 返回 400 + 错误详情
        Frontend->>User: 高亮错误字段
    else 网络异常
        Frontend->>User: 提示离线/超时
    end