在 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