在 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>
輸出：
使用 isNaN 驗證 JavaScript 中的數字
JavaScript isNaN 函式檢查數字是否不是數字。所以，如果它用於 if 條件檢查並返回 false，我們檢查的變數是一個數字。
有多種方法可以使用 isNaN 檢查變數是否為數字。以下是示例。
- 使用
isNaN和String.fromCharCode驗證數字。 - 用
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>
輸出：
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