如何限制JavaScript Prompt窗口仅输入0-9或1-9的数字？

嘿，我明白你的需求了——要让prompt窗口只接受1-9的单个数字输入，避免用户乱输其他字符对吧？其实原生prompt本身没法直接限制输入内容，但我们可以通过输入验证+循环重新提示的方式来实现这个效果。

核心思路 #

我们需要在用户输入后做以下检查：

• 确认用户没有点击取消（输入不为null）
• 验证输入是否是单个1-9的整数，既不能是多位数、小数，也不能是字母/符号

实现方案（修改你的代码） #

这里提供两种验证方式，你可以选一种喜欢的：

方案1：正则表达式验证

正则/^[1-9]$/可以精准匹配单个1-9的数字字符，代码修改如下：

<html>
<head>
</head>
<body>
<button onclick="myFunction()">Start Game</button>
<button>Stop Game</button>
<br/>
<br/>
<p><font size="20">Your chosen number is:</font></p>
<span id="number"></span>
<br/>
<br/>
<p><font size="20">Your score so far is:</font></p>
<br/>
<span id="gamedisplay"></span>
<span id="gamedisplay2"></span>
<span id="gamedisplay3"></span>
<span id="gamedisplay4"></span>
<script>
function myFunction() {
    let integer;
    // 循环提示直到输入符合要求或用户取消
    do {
        integer = prompt("Please enter an integer between 1 and 9");
        // 如果用户取消，直接退出
        if (integer === null) return;
        // 验证输入是否符合要求
        if (!/^[1-9]$/.test(integer)) {
            alert("请输入1-9之间的单个数字！");
        }
    } while (!/^[1-9]$/.test(integer));

    // 输入符合要求后，更新页面内容
    document.getElementById("number").textContent = integer;
    document.getElementById("gamedisplay").innerHTML = Math.floor(Math.random() * 10);
    document.getElementById("gamedisplay2").innerHTML = Math.floor(Math.random() * 10);
    document.getElementById("gamedisplay3").innerHTML = Math.floor(Math.random() * 10);
    document.getElementById("gamedisplay4").innerHTML = Math.floor(Math.random() * 10);
}
</script>
</body>
</html>

方案2：数值类型验证

如果你更习惯用数值判断，可以把输入转成数字后验证是否为整数且在1-9范围内：

function myFunction() {
    let integer;
    let num;
    do {
        integer = prompt("Please enter an integer between 1 and 9");
        if (integer === null) return;
        // 转换为数字
        num = Number(integer);
        // 验证是否是1-9的整数
        if (!Number.isInteger(num) || num < 1 || num > 9) {
            alert("请输入1-9之间的单个整数！");
        }
    } while (!Number.isInteger(num) || num < 1 || num > 9);

    document.getElementById("number").textContent = num;
    // 后续随机数代码不变
    document.getElementById("gamedisplay").innerHTML = Math.floor(Math.random() * 10);
    document.getElementById("gamedisplay2").innerHTML = Math.floor(Math.random() * 10);
    document.getElementById("gamedisplay3").innerHTML = Math.floor(Math.random() * 10);
    document.getElementById("gamedisplay4").innerHTML = Math.floor(Math.random() * 10);
}

关键说明 #

• 用do...while循环可以保证用户第一次输入不符合要求时，会重新弹出prompt直到输入正确
• 加入了alert提示用户输入错误，提升交互体验
• 新增了把用户选择的数字显示到#number元素的逻辑，让页面反馈更完整

内容的提问来源于stack exchange，提问作者user12062753