在 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