Javascript:确保输入是数字

Javascript: Ensure Input is Numbers Only

本文关键字：数字 输入 确保 Javascript      更新时间：2023-09-26

我有一个单位转换脚本;我的HTML包含单选按钮(用来选择单位)，一个输入字段，一个输出字段和一个按钮。

这是我的Javascript文件的一个示例:

[...]
window.addEventListener("load", function(){
    document.getElementById("convert").addEventListener("click", function(){
        var initial = document.getElementById("initial").value;
        document.getElementById("answerswer").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"作为答案。在这两种情况下，我都希望输出不返回任何内容(空白)。我不希望它不做任何事情，以防用户在提交正确的数字后提交空白字段或无效值(我认为这会导致之前的答案仍然显示)

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

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

我还在学习，所以，如果可能的话，我真的很感激解释以及编辑的代码。谢谢你！

在函数开头的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

增加以下功能，检查整数中是否有值

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("answerswer").innerHTML = convertObj.converted(initial); 
        }else{
            document.getElementById("answerswer").innerHTML = '';
        }   
    });

这将确保当提供一个有效的整数时，只有它会被转换，否则答案仍然为空。

有关如何检查整数的更多信息，请查看:

如何检查如果一个变量是一个整数在JavaScript?

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

相关文章：