迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

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

作者:迹忆客 最近更新:2024/03/20 浏览次数:

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

输出:

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

输出:

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中 use strict

发布时间:2024/03/20 浏览次数:56 分类:JavaScript

在本文中,学习 JavaScript 中的 use strict 特性。我们将通过不同的示例了解如何在 JavaScript 代码语句中创建和执行 use strict 关键字。

JavaScript 邮政编码验证

发布时间:2024/03/20 浏览次数:68 分类:JavaScript

在本文中,我们将学习如何使用正则表达式来验证邮政编码,使用 JavaScript 代码和不同的示例。

在 JavaScript 中为一个元素设置多个属性

发布时间:2024/03/19 浏览次数:187 分类:JavaScript

本教程向我们展示了如何使用 JavaScript 一次为一个元素设置多个属性。我们将使用 setAttribute() 方法将每个属性及其值添加到元素中,并使用 Object.keys() 和 forEach() 方法来获取对象键的数

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便