限制输入为5个数字（整数）或8个数字（包含小数位）

Question

我有一个简单的文本输入框：

 <div style="float:right" class="xField">
      <input id="userLength" name="userLength"/>
      <label style="margin-left: 3px;">m</label>
 </div>

我需要这个输入框只接受数字，如果是整数，它应该只允许5个字符，例如12345。如果数字包含分数，则应允许8个字符，例如12345.99。

我尝试在输入框中添加maxlength，但这只适用于其中一个条件。

我该如何实现这个功能？

- Henrique Tavares

---

这个回答解决了你的问题吗？强制数字输入保留两位小数并且仅限两位 - Heretic Monkey

Answer 1

你可以使用pattern属性，并提供支持您要求的正则表达式。

例如（这并不禁止输入无效数据，但在未匹配模式时将标记字段为无效）。

<div style="float:right" class="xField">
      <input id="userLength" name="userLength" pattern="\d{1,5}(,\d{1,2})?" />
      <label style="margin-left: 3px;">m</label>
 </div>

- Gabriele Petrioli

---

这允许用户输入任何他们想要的内容，并且如果值不匹配模式，则将输入标记为无效。 - Heretic Monkey

@HereticMonkey 这是建议。如果用户从文档中复制并想在提交之前进行编辑怎么办？完全禁止粘贴是不礼貌的。最好在用户明确提交时进行验证。 - santiago arizti

@santiagoarizti 当然，如果答案给出了这个警告，我就不会添加我的评论了。事实上，这个答案被提供为如何限制用户输入超过五个数字和两个小数的问题的答案。 - Heretic Monkey

Answer 2

你所需的只有这个：

<form action="/" id="form">
    <input pattern="\d{0,5}([,.]\d{1,2})?" title="max 5 digits and 2 decimals">
    <button type="submit">submit</button>
</form>

这将允许用户输入任意数量的字符，但在表单验证时，如果模式不符合要求，则表单将失败。

该模式是一个正则表达式，读作： 从0到5个数字字符，可选地带有最多两位小数

此外，如果输入不能为空，您可以像这样添加一个required属性

<input ... pattern="" required>

如果输入为空，这也会导致验证失败。

当未满足模式时，浏览器将向用户显示title=""内的任何内容。

通过使用此fiddle进行测试，您可以看到如何呈现验证错误：https://jsfiddle.net/aqohfsrj/2/

此外，如果您想使用JavaScript处理输入值，我建议绑定到表单的submit事件，而不是按钮的click或输入的enter-keydown事件。

document.getElementById("form").addEventListener("submit", e => {
    // if this code is executed it means the validation passed, otherwise errors
    // are displayed to the user and this code is not run.
    e.preventDefault(); // <-- to avoid trying to use the form's action i.e. the browser will not navigate.
});

为了理解我使用的正则表达式，您可以查看这个regex101文件： https://regex101.com/r/aHLI6u/1

最后一个建议： 尽量避免在验证时使用maxlength；经常有这样的情况，我必须在线填写一个表单，例如要求信用卡，但它被限制为maxlength="16"，一开始听起来像是个好主意，但如果你试图从你的笔记或其他地方复制你的信用卡号码，而它是存储为5430-0000-1111-2222（带破折号）。当用户想要粘贴、编辑、然后提交时，禁止粘贴超过允许字符数感觉很无礼。我会让用户添加他们想要的任何内容，这样他们就可以进行现场编辑以删除括号（用于电话），删除货币符号（用于货币），删除破折号（用于信用卡）并在提交表单后进行验证。

- santiago arizti

---

如果你对正则表达式(fe)感到不知所措，你可以在谷歌上搜索人们分享和完善的各种正则表达式。例如，要验证电子邮件地址或货币，最好使用已经被他人尝试和测试过的正则表达式。我的正则表达式是我刚刚自己编写的，我不知道它是否满足你的所有需求。 - santiago arizti