如何用JavaScript验证输入为纯数字？解决NaN及HTML事件选择问题

需求：在JavaScript中实现文本框输入验证，当数据输入到class为numb的文本框后，确保内容仅为数字格式；若输入字母，即时弹出alert提示；同时保证计算结果不出现NaN值。
咨询：HTML应使用oninput、oncheck还是其他on类事件？

现有代码 #

JavaScript

function chicken()
{
    var foodchicken=0;
    var theForm = document.forms["energyform"];
    var chicken = theForm.elements["chicken"];
    var ttlchicken = document.getElementById("textbox1").value;

    if(chicken.checked===true)
    {
        foodchicken = ttlchicken*10;
    }
    return foodchicken;
}

function pork() 
{
    var foodpork=0;
    var theForm = document.forms["energyform"];
    var pork = theForm.elements["pork"];
    var ttlpork = document.getElementById("textbox2").value;

    if(pork.checked===true)
    {
        foodpork = ttlpork*20;
    }
    return foodpork;
}

function calculateTotal()
{
var HMontotalco = chicken() + pork() ;
var hmco = document.getElementById('totalHMonthCst').innerHTML = +HMontotalco.toFixed(2)
}

HTML

<body onload='hideTotal()'>
    <div id="all">
        <form  id="energyform" onsubmit="return false;">
        <div>
            <div class="cont_order">
               <fieldset>
               <br/>
                <label for='chicken' class="chick">Chicken </label></hr>
                <input type="checkbox" id="chicken" name='chicken' onchange="calculateTotal()">
                <input type="text" oninput="calculateTotal();" id="textbox1" name="textbox1" placeholder="Enter total chicken" />
<br/>
<br/>
                <label for='pork' class="pig">&nbsp Pork &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></hr>
                <input type="checkbox" id="pork" name='pork' onchange="calculateTotal();allvalidate();personvalidate()">
                <input type="text" oninput="calculateTotal();" id="textbox2" name="textbox2" placeholder="Enter total pork in kg" />
<br/>      
                <div id="totalHMonthCst">0</div>
                       </div>  
       </form>
                    </div>

</body>

事件选择与解决方案 #

1. 事件选择：用oninput就对了

• oninput是最佳选择：它会在文本框内容实时变化时触发（包括键盘输入、粘贴、拖拽等所有输入操作），刚好满足你“即时验证提示”的需求。
• 不存在oncheck这个标准事件，直接忽略。
• 如果你还需要在文本框失去焦点时再做一次验证，可以额外加onblur，但oninput已经能覆盖实时验证的核心需求。

2. 完整实现代码

下面是修改后的代码，包含输入验证、NaN避免逻辑：

修改后的JavaScript

// 通用数字验证函数，处理class为numb的输入框
function validateNumberInput(input) {
    const val = input.value.trim();
    // 检测是否包含非数字字符（允许小数点，若只需要正整数，把正则改成/[^0-9]/g）
    if (/[^0-9.]/.test(val)) {
        alert('请输入纯数字！');
        // 自动清除非法字符，保证输入框内容合法
        input.value = val.replace(/[^0-9.]/g, '');
    }
}

// 优化chicken计算，避免NaN
function chicken() {
    let foodchicken = 0;
    const form = document.forms["energyform"];
    const isChecked = form.elements["chicken"].checked;
    const inputVal = document.getElementById("textbox1").value;
    // 把输入值转为数字，空值/非数字直接设为0
    const num = isNaN(parseFloat(inputVal)) ? 0 : parseFloat(inputVal);

    if (isChecked) {
        foodchicken = num * 10;
    }
    return foodchicken;
}

// 优化pork计算，同理
function pork() {
    let foodpork = 0;
    const form = document.forms["energyform"];
    const isChecked = form.elements["pork"].checked;
    const inputVal = document.getElementById("textbox2").value;
    const num = isNaN(parseFloat(inputVal)) ? 0 : parseFloat(inputVal);

    if (isChecked) {
        foodpork = num * 20;
    }
    return foodpork;
}

function calculateTotal() {
    const total = chicken() + pork();
    document.getElementById('totalHMonthCst').innerHTML = total.toFixed(2);
}

// 保留你原有的hideTotal函数（假设已实现）
function hideTotal() {
    document.getElementById('totalHMonthCst').style.display = 'none';
}

// 保留你原有的验证函数（如果有实际逻辑）
function allvalidate() {}
function personvalidate() {}

修改后的HTML

给文本框添加numb类，并绑定验证+计算事件：

<body onload='hideTotal()'>
    <div id="all">
        <form id="energyform" onsubmit="return false;">
            <div class="cont_order">
                <fieldset>
                    <br/>
                    <label for='chicken' class="chick">Chicken </label><hr/>
                    <input type="checkbox" id="chicken" name='chicken' onchange="calculateTotal()">
                    <input type="text" class="numb" oninput="validateNumberInput(this); calculateTotal();" id="textbox1" name="textbox1" placeholder="Enter total chicken" />
                    <br/><br/>
                    <label for='pork' class="pig">Pork </label><hr/>
                    <input type="checkbox" id="pork" name='pork' onchange="calculateTotal();allvalidate();personvalidate()">
                    <input type="text" class="numb" oninput="validateNumberInput(this); calculateTotal();" id="textbox2" name="textbox2" placeholder="Enter total pork in kg" />
                    <br/>      
                    <div id="totalHMonthCst">0</div>
                </fieldset>
            </div>  
        </form>
    </div>
</body>

3. 关键逻辑说明

• 即时验证：每次输入变化时触发validateNumberInput，检测到非数字就弹提示并清除非法字符，确保输入框始终是数字格式。
• 避免NaN：计算时用parseFloat转换输入值，再用isNaN判断，非数字/空值直接转为0，这样相加结果永远是合法数字，不会出现NaN。
• 扩展性：验证函数是通用的，所有class为numb的文本框都能复用，不用重复写逻辑。

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