如何实现输入框准确区分数字与字符串？解决数字字母混合输入的校验问题

• 混合输入被误识别的核心原因是parseInt()的解析特性：它会从字符串起始位置开始提取有效数字，遇到第一个非数字字符就停止解析并返回前面提取到的数字片段。比如输入23fdsfsd时，parseInt直接返回23，根本不会校验后面跟的字符串内容。
• 原有非法输入判断逻辑完全失效：代码里写的input != Number，是把parseInt返回的结果和JS内置的Number构造函数做比较，和“输入是否为数字”的判断毫无关系。纯字符串输入的时候，parseInt返回NaN，刚好不满足input > 0的条件，意外走到了错误提示分支，才看起来像逻辑运行正常。
• 之前尝试移除parseInt后逻辑未达预期，是因为没有配套修改校验规则：直接拿原始字符串做大小比较时，JS的隐式类型转换规则会把可解析为数字的字符串转成数字做运算，既没有严格判断输入是否为纯数字，也没有替换掉原来无效的合法性判断，所有输入都保留为字符串类型参与比较，自然达不到校验效果。

要实现全量输入校验，不能依赖会截断的parseInt提前转换输入，需要保留原始输入值做全量合法性校验，具体调整点如下：

• 获取输入后先去除首尾空白字符，避免用户误输入空格导致的误判
• 用全量转换的Number()方法处理输入值，只要输入包含任意非数字的杂字符，就会直接返回NaN，不会出现截断提取有效数字的问题
• 用isNaN()判断转换结果是否为有效数字，替换原来完全无效的input != Number判断
• 阻止表单submit按钮的默认页面刷新行为，避免交互后页面重置丢失账户余额状态
• 每次交互前清空旧的错误提示，避免历史提示残留干扰
• 校验不通过时直接终止后续逻辑，不要执行余额更新操作

// 预设初始账户余额
let initialBalance = 0
// 页面初始化时渲染初始余额
document.querySelector('#balance span').innerText = initialBalance

document.getElementById('depositButton').addEventListener('click', function(e) {
    // 阻止表单提交导致的页面刷新
    e.preventDefault()
    // 清空上一次的错误提示
    document.getElementById('notNumber').innerText = ''
    // 获取原始输入并去除首尾空格
    const rawInput = document.getElementById('userInput').value.trim()
    // 全量转换输入为数字
    const parsedValue = Number(rawInput)

    // 校验输入合法性：非数字、或者金额小于等于0的情况直接报错
    if (isNaN(parsedValue) || parsedValue <= 0) {
        document.getElementById('notNumber').innerText = "ERROR: Please input a number!"
        return
    }

    // 校验通过后再执行余额累加
    initialBalance += parsedValue
    document.querySelector('#balance span').innerText = initialBalance
})

• 输入纯数字比如100时，会正常累加账户余额
• 输入纯字符串比如fdsfsd时，Number转换返回NaN，触发错误提示，余额保持不变
• 输入数字字符串混合内容比如23fdsfsd时，Number转换返回NaN，触发错误提示，不会出现之前自动累加23的问题
• 如果需要仅支持整数输入，可以在合法性校验里额外加一层Number.isInteger(parsedValue)的判断即可

注意：不要用parseInt做全量输入校验，它的截断机制天生不适合用来识别“完全由数字组成的合法输入”。

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