允许用户在HTML中输入分数和整数(但不是混合数字)?

Question

正如上面的问题所述，我如何将用户输入限制为分数(不包括混合数)和整数?例如3/4或-5，但不是-3 4/5。

我还希望程序将字符限制为整数和分数。所以我不希望允许额外的字符，比如空格或字母。

我相信可能有一种方法可以用正则表达式做到这一点，这将是我更喜欢的答案。

Answer 1

您可以使用正则表达式[-]?[0-9]*[/]?[0-9]+，然后在input中利用pattern属性:

<form>
<input type="text" name="whatever" pattern="[-]?[0-9]*[/]?[0-9]+" oninput="this.reportValidity()" />
</form>

Answer 2

你可以使用这个过滤器:

<form>
<input type="text" oninput="this.value = this.value.replace(/^(-?(?:d+(?:/d*)?)?).*$/, '$1')" />
</form>

解释:

• ^-输入起始
• (-开始捕获组
• -?-期望可选的-在开始
• (?:-非捕获组启动
  • d+-期望1+数字
  • (?:-非捕获组启动
    • /d*-期望斜杠和可选数字
  • )?-非捕获组结束，?使其为可选
• )?-非捕获组结束，?使其可选
• )-捕获组结束
• .*-所有剩下的
• $-输入结束
• 替代'$1'的参考捕获组

Answer 3

我在JavaScript中做过，检查该行是否只是整数，或者该行只是分数，如果不是，将输入替换为找到的分数。如果您需要任何不同的行为，只需更改inputValidator函数。

输入是onblur验证的，你必须把鼠标从输入框中移开，然后在外面点击。

const allIntegers = /^(?:[+-]?d+(?: |$))+$/;
const allFractions = /^(?:[+-]?d+/d+(?: |$))+$/;
function inputValidator(obj) {
const text = obj.value;
if(!allIntegers.test(text)&&!allFractions.test(text)){
alert("Not Ok!");
obj.value = (text.match(/[+-]?d+/d+/g)||[]).join(" ");
} else{
alert("Ok");
}
}

<form>
<input id="my_form" type="text" name="My Form" onblur="inputValidator(this)" />
</form>