在 JavaScript 中驗證表單輸入中的數字

Habdul Hazeez 2023年1月30日
  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
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