在 JavaScript 中验证表单输入中的数字

Habdul Hazeez 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 RegExp.prototype.test() 验证数字
  2. 使用 isNaN 验证 JavaScript 中的数字
在 JavaScript 中验证表单输入中的数字

本文将教你如何验证 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>

输出:

HTML 表单输入验证 - 使用 RegExp 原型测试

使用 isNaN 验证 JavaScript 中的数字

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

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

  1. 使用 isNaNString.fromCharCode 验证数字。
  2. isNaNparseFloatisFinite 验证一个数字。

在 JavaScript 中使用 isNaNString.fromCharCode 验证数字

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

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

因此,你可以对加法结果使用 isNaN() 函数。因此,返回 falseisNaN 上的 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>

输出:

HTML 表单输入验证 - 使用 String fromCharCode 1

但是,如果你不想要小数,你可以使用 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>

输出:

HTML 表单输入验证 - 使用字符串 fromCharCode 2

在 JavaScript 中使用 isNaNparseFloatisFinite 验证数字

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>

输出:

HTML 表单输入验证 - 使用 parseFloat

Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

相关文章 - JavaScript Validation