迹忆客 专注技术分享

本文将教你如何验证 HTML 表单输入中的数字。我们将采取两种方法。

第一个将使用 RegExp.prototype.test() 方法，第二个将使用两个利用 JavaScript isNaN() 函数的变体。

在 JavaScript 中使用 RegExp.prototype.test() 验证数字

你可以使用 RegExp.prototype.test() 方法验证数字。由于 test() 方法来自 RegExp.prototype，你必须在验证数字之前以有效的正则表达式模式调用它。

这意味着在 test() 方法进行任何验证之前，你需要有一个模式来验证一个数字。

在我们的代码示例中，我们定义了一个匹配数字的正则表达式模式。之后，我们在一个变量上调用 test() 方法来检查它是否是一个数字。

同时，这种方法不接受小数。

<main style="font-size: 2em">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number"/>
        <input type="submit" value="submit" id="submit">
    </form>
</main>
<script>
    let formInput = document.getElementById("number");
    let submit = document.getElementById('submit');

    submit.addEventListener("click", function(e) {
        e.preventDefault();
        let formValue = formInput.value;
        if (!/\D/.test(formValue)) {
            alert("You submitted numbers");
        } else {
            alert("You did not submit numbers");
        }
    });
</script>

输出：

使用 isNaN 验证 JavaScript 中的数字

JavaScript isNaN 函数检查数字是否不是数字。所以，如果它用于 if 条件检查并返回 false，我们检查的变量是一个数字。

有多种方法可以使用 isNaN 检查变量是否为数字。以下是示例。

1. 使用 isNaN 和 String.fromCharCode 验证数字。
2. 用 isNaN 和 parseFloat 和 isFinite 验证一个数字。

在 JavaScript 中使用 isNaN 和 String.fromCharCode 验证数字

你可以在用户按下的键上使用 String.fromCharCode 和 this.value 的组合。要跟踪用户在键盘上按下的键，你将使用 onkeypress 事件属性。

同时，String.fromCharcode 将把 event.keycode 作为参数。之后，添加 this.value 和 String.fromCharCode(argument)。

因此，你可以对加法结果使用 isNaN() 函数。因此，返回 false 的 isNaN 上的 if 语句意味着用户在键盘上按下了一个数字。

同时，这种方法也将接受小数。

<main style="font-size: 2em">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number">
    </form>
</main>
<script>
    let formInput = document.getElementById("number");
    formInput.addEventListener("keypress", function() {
        if (isNaN(this.value + String.fromCharCode(event.keyCode))) {
            alert("That was not a number!");
            return false;
        }
    });
</script>

输出：

但是，如果你不想要小数，你可以使用 String.fromCharCode(event.keyCode) 上的 isNaN 函数。

<main style="font-size: 2em;">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number">
    </form>
</main>
<script>
    let formInput = document.getElementById("number");
    formInput.addEventListener("keypress", function() {
        if (isNaN(String.fromCharCode(event.keyCode))) {
            alert("That was not a number!");
            return false;
        }
    });
</script>

输出：

在 JavaScript 中使用 isNaN 和 parseFloat 和 isFinite 验证数字

parseFloat 函数将解析一个数字并返回一个浮点数。相反，isFinite 函数确定数字是否为数字。

因此，如果参数作为浮点数和有限数传递，则它是一个数字。同时，如果你对此类参数使用 isNaN 函数，它应该返回 false，因为它是一个数字。

因此，在 if 语句中，你可以否定 isNaN 函数的结果。这可以确保 if 语句匹配一个数字。

因此，else 块中的代码将匹配不是数字的参数。

我们已经在下面的代码中实现了使用 isNaN 作为函数的检查。之后，我们在 if 语句中使用该函数。

<main style="font-size: 2em">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number"/>
        <input type="submit" value="submit" id="submit">
    </form>
</main>
<script>
    function validateNumber(number) {
        return !isNaN(parseFloat(number) && isFinite(number));
    }

    let formInput = document.getElementById("number");
    let submit = document.getElementById('submit');

    submit.addEventListener("click", function(e) {
        e.preventDefault();
        if (validateNumber(formInput.value)) {
            alert("You entered numbers!");
        } else {
            alert("You did not submit numbers!");
        }
    });
</script>

输出：