如何检测HTML文本输入框中输入的值是否为数字？

DevOps 小满

2026-8-9

年龄输入的数字验证实现方案

你可以通过以下几种方式判断输入内容是否为非数字，并给出错误提示：

方法一：利用`isNaN()`处理（兼容一般数字场景）

先去除输入内容的前后空格，再通过isNaN()判断是否能转换为有效数字：

修改后的完整代码

HTML：

Age: <input type="text" id="age">
<button onclick="validateForm()">提交</button>

JavaScript：

function validateForm() {
    let ageInput = document.getElementById("age");
    let age = ageInput.value.trim();
    
    // 空输入或无法转换为数字时触发提示
    if (!age || isNaN(age)) {
        alert("请输入有效的数字年龄！");
        ageInput.focus(); // 聚焦回输入框方便修改
        return false;
    }
    
    // 验证通过后的逻辑
    alert("年龄输入有效！");
    return true;
}

方法二：正则表达式匹配纯整数（更贴合年龄场景）

年龄通常是正整数，用正则严格匹配仅数字的输入：

修改后的JavaScript代码

function validateForm() {
    let ageInput = document.getElementById("age");
    let age = ageInput.value.trim();
    // 正则匹配1个及以上数字的正整数
    const ageRegex = /^[0-9]+$/;
    
    if (!age || !ageRegex.test(age)) {
        alert("请输入有效的数字年龄！");
        ageInput.focus();
        return false;
    }
    
    alert("年龄输入有效！");
    return true;
}