Javascript：确保输入仅为数字

Question

我有一个单位转换脚本；我的 HTML 包含单选按钮（用于选择单位）、一个输入字段、一个输出字段和一个按钮。

这是我的 Javascript 文件的示例：

[...]

window.addEventListener("load", function(){
    document.getElementById("convert").addEventListener("click", function(){
        var initial = document.getElementById("initial").value;
        document.getElementById("answer").innerHTML = convertObj.converted(initial);    
    });

[...]

});

function ConvertClass(){}

ConvertClass.prototype.converted = function(initialAmount){
    if(document.getElementById("kilograms").checked) {
        this.calculation = this.multiply(initialAmount, 2.2046);
    } else if(document.getElementById("pounds").checked) {
        this.calculation = this.divide(initialAmount, 2.2046);
    }
    return this.calculation.toFixed(2);
}

[...]

var convertObj = new ConvertClass();

我想添加一些内容以确保 a) 空输入字段不被视为“0”，以及 b) 不显示数字以外的内容 "NaN"作为答案。 在这两种情况下，我只是希望我的输出为 return 什么都没有（空白）。我不希望它做什么都不做，以防用户在提交正确的数字后提交空白字段或无效值（我认为这会导致仍然显示以前的答案.)

我该怎么写？我假设我应该使用条件，但我不知道是哪些条件。我做了一些研究，显然使用 isNaN() 并不完全准确，至少在这种情况下不准确。

我应该把代码放在哪里，是在页面加载触发的函数中还是按钮触发的函数中？

我还在学习，所以如果可能的话，我非常感谢解释和编辑的代码。谢谢！

Answer 1

在函数开头的ConvertClass.prototype.converted里面，添加：

// this coerces it to a number instead of a string
// or NaN if it can't convert to a number
initialAmount = initialAmount.length > 0 ? +initialAmount : 0/0;

// if not a number, return empty string
if (isNaN(initialAmount)) {
    return "";
}

如果输入为空字符串 0/0 计算结果为 NaN。

Answer 2

添加以下函数来检查一个值是否为 Integer。

function isInt(value) {
  return !isNaN(value) && 
         parseInt(Number(value)) == value && 
         !isNaN(parseInt(value, 10));
}

像这样更改加载函数：

window.addEventListener("load", function(){
    document.getElementById("convert").addEventListener("click", function(){
        var initial = document.getElementById("initial").value;
        if(isInt(initial)){
            document.getElementById("answer").innerHTML = convertObj.converted(initial); 
        }else{
            document.getElementById("answer").innerHTML = '';
        }   
    });

这将确保在提供有效整数时，只有它会转换，否则答案将保持为空。

要进一步阅读如何检查整数，请查看：

How to check if a variable is an integer in JavaScript?

编辑：当数字不是整数时将答案设置为空字符串。

Javascript：确保输入仅为数字

Javascript: Ensure Input is Numbers Only

javascript

validation

numbers

input