如何正确验证表单空白字段？JavaScript表单验证简洁实现求助

我正在学习JavaScript，想找到验证表单中文本和数字字段的最佳方法。现有如下HTML表单：

<form id="captureLegoSets">
    <label for="setName">Lego Set Name</label><br>
    <input class="input input1" type="text" id="setName" name="setName" value=" ">*<br>    
    <label for="setTheme">Set Theme</label><br>
    <input class="input input1" type="text" id="setTheme" name="setTheme" value=" "><br>    
    <label for="setReferenceNumber">Reference Number</label><br>
    <input class="input input1" type="number" id="setReferenceNumber" name="setReferenceNumber" value="0">*<br>
    <label for="setPieceCount">Piece Count</label><br>
    <input class="input input1" type="number" id="setPieceCount" name="setPieceCount" value="0">*<br>
    <br>
    <input class="input input2" type="button" value="Save Set" onclick="captureLegoSets.captureSets()">
    <input class="input input2" type="reset" value="Reset Values">   
</form>

关联的JavaScript代码（忽略console.log语句）：

this.captureSets = function(){

    let setName = " ";
    let setTheme = " ";
    let setReferenceNumber = 0;
    let setPieceCount = 0;

    let formFields = document.querySelectorAll(".input1");
    for (let i=0; i < formFields.length; i++) { 
        if ((+document.getElementById(formFields[i].id).value) > 0 | (+document.getElementById(formFields[i].id).length) !== null) {
                if(formFields[i].id === "setName"){
                    setName = +document.getElementById(formFields[i].id).value;
                }
                if (formFields[i].id === "setTheme") {
                    setTheme = +document.getElementById(formFields[i].id).value;
                }
                if (formFields[i].id === "setReferenceNumber") {
                    setReferenceNumber = +document.getElementById(formFields[i].id).value;
                }
                if (formFields[i].id === "setPieceCount") {
                    setPieceCount = +document.getElementById(formFields[i].id).value;
                }
        } else {
            alert("Please add non-zero values to " + formFields[i].id);
        }
    }
}

我遇到的问题是：仅检查.value时，文本字段会持续触发else语句的提示；但如果检查.length，则完全不会触发提示。我知道可以写一堆if语句来检查null、空值等，但认为这属于不良编码方式，是否有更简洁的有效输入检查方法？

核心问题分析 #

你当前的代码把文本和数字字段用同一套判断逻辑，还存在两个关键错误：

• 用+强制转换文本字段的值，非数字内容会被转成NaN，永远不满足>0的条件，导致文本字段一直触发提示。
• 逻辑或误用了位运算符|，应该用逻辑或运算符||，位运算完全不符合当前需求。

简洁的分类型验证方案 #

针对字段类型（文本/数字）和必填状态分开处理，用对象统一管理验证规则，代码清晰易维护：

this.captureSets = function(){
    // 定义必填字段的验证规则和提示消息
    const requiredRules = {
        setName: { type: 'text', msg: '请填写乐高套装名称' },
        setReferenceNumber: { type: 'number', msg: '请填写大于0的参考编号' },
        setPieceCount: { type: 'number', msg: '请填写大于0的零件数量' }
    };

    let isValid = true;
    const formData = {};

    // 遍历所有表单字段
    document.querySelectorAll(".input1").forEach(field => {
        const fieldId = field.id;
        const rawValue = field.value.trim(); // 去除首尾空格，避免无效输入
        formData[fieldId] = rawValue;

        // 文本字段验证
        if (field.type === 'text') {
            if (requiredRules[fieldId] && rawValue === '') {
                alert(requiredRules[fieldId].msg);
                isValid = false;
            }
        } 
        // 数字字段验证
        else if (field.type === 'number') {
            const numValue = Number(rawValue);
            formData[fieldId] = numValue;

            if (requiredRules[fieldId] && (isNaN(numValue) || numValue <= 0)) {
                alert(requiredRules[fieldId].msg);
                isValid = false;
            }
        }
    });

    // 验证通过后执行保存逻辑
    if (isValid) {
        console.log('验证通过，表单数据:', formData);
        // 这里添加保存套装的业务代码
    }
}

额外优化建议 #

• 用trim()处理文本输入，避免用户只输入空格就通过验证。
• 验证规则集中管理，后续修改字段要求或提示消息时，只需改动requiredRules对象，无需修改验证逻辑。
• 用forEach替代传统for循环，代码更简洁易读。
• 若想避免多次弹出alert，可以收集所有错误消息，验证完成后一次性展示给用户。

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