在 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