我正在使用三元运算符来检查用户输入是否是数字。
但是，当我按下复选按钮时，无论输入数字还是字母，都会出现警报：
请输入显示的数字。
这是我的代码：
<body>
<label style="font-size: 40px">Please Enter A Number Here: </label>
<input
type="text"
id="num"
style="font-size: 40px"
/>
<button
type="button"
onclick="check()"
>
Check
</button>
<script>
function check() {
var input = document.getElementById("num");
var check = /^[0-9]*$/;
!check.test(input)
? window.alert(
"You have only entered numeric characters! Please proceed to press one of the other buttons."
)
: window.alert("Please enter only numbers!");
}
</script>
</body>但是，当我按下复选按钮时，无论输入数字还是字母，都会出现“请输入数字”的提示
这是不正确的。如果我们运行带有数字输入的代码（检查下面的代码片段），它将显示：
您只输入了数字字符！请继续按其他按钮之一。
这是真的。但是，对于字母输入，它也会显示相同的消息：
您只输入了数字字符！请继续按其他按钮之一。
这是错误的。
<body>
<label style="font-size: 40px">Please Enter A Number Here: </label>
<input
type="text"
id="num"
style="font-size: 40px"
/>
<button
type="button"
onclick="check()"
>
Check
</button>
<script>
function check() {
var input = document.getElementById("num");
var check = /^[0-9]*$/;
!check.test(input)
? window.alert(
"You have only entered numeric characters! Please proceed to press one of the other buttons."
)
: window.alert("Please enter only numbers!");
}
</script>
</body>要解决此问题，我们应该首先
console.log()input<input type="text" id="num" style="font-size: 40px"></input>
输出是
<input>input<body>
<label style="font-size: 40px">Please Enter A Number Here: </label>
<input
type="text"
id="num"
style="font-size: 40px"
/>
<button
type="button"
onclick="check()"
>
Check
</button>
<script>
function check() {
var input = document.getElementById("num");
console.log(input);
var check = /^[0-9]*$/;
!check.test(input)
? window.alert(
"You have only entered numeric characters! Please proceed to press one of the other buttons."
)
: window.alert("Please enter only numbers!");
}
</script>
</body>要捕获该值，我们可以这样做：
var input = document.getElementById("num").value;
因此，当我们再次
console.log()input12345
<body>
<label style="font-size: 40px">Please Enter A Number Here: </label>
<input
type="text"
id="num"
style="font-size: 40px"
/>
<button
type="button"
onclick="check()"
>
Check
</button>
<script>
function check() {
var input = document.getElementById("num").value;
console.log(input);
var check = /^[0-9]*$/;
!check.test(input)
? window.alert(
"You have only entered numeric characters! Please proceed to press one of the other buttons."
)
: window.alert("Please enter only numbers!");
}
</script>
</body>但是，代码（检查下面的代码片段）现在表现出意外。输入数字会显示：
请仅输入数字！
输入字母后会显示：
您只输入了数字字符！请继续按其他按钮之一。
<body>
<label style="font-size: 40px">Please Enter A Number Here: </label>
<input
type="text"
id="num"
style="font-size: 40px"
/>
<button
type="button"
onclick="check()"
>
Check
</button>
<script>
function check() {
var input = document.getElementById("num").value;
var check = /^[0-9]*$/;
!check.test(input)
? window.alert(
"You have only entered numeric characters! Please proceed to press one of the other buttons."
)
: window.alert("Please enter only numbers!");
}
</script>
</body>行为在某种程度上被逆转了。这就是为什么我们需要删除逻辑 NOT 运算符：
check.test(input)
现在，代码（检查下面的代码片段）可以按预期工作。
<body>
<label style="font-size: 40px">Please Enter A Number Here: </label>
<input
type="text"
id="num"
style="font-size: 40px"
/>
<button
type="button"
onclick="check()"
>
Check
</button>
<script>
function check() {
var input = document.getElementById("num").value;
var check = /^[0-9]*$/;
check.test(input)
? window.alert(
"You have only entered numeric characters! Please proceed to press one of the other buttons."
)
: window.alert("Please enter only numbers!");
}
</script>
</body>