Question

我有一个由简单的jQuery(...).apend(...)生成的动态输入，该输入将这些代码绘制在我的网页上：

<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="/^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">

我可以验证第一部分（包括'，'的字符的最大大小），但是当您尝试验证小数时，它给我一个错误。

他指定了值“ 111”。不是有效数字。该值必须匹配改为以下正则表达式： -？（\ d + | \ d +。\ d + |。\ d +）（[eE] [-+]？\ d +）？

当我在Chrome控制台上测试正则表达式代码时，它可以正常工作（就像这些示例一样）

/^(?:\d{0,8})(?:,\d{0,3})?$/.test('1234,12');
/^(?:\d{0,8})(?:,\d{0,3})?$/.test('123,');

，但在输入内部不起作用。我可能做错了什么？

Answer 1

您的正则表达式不起作用，因为您试图匹配输入上的,。但是，即使您在浏览器上看到,，它也会在内部存储为.（可能避免了当浏览器使用不同语言环境时您现在面临的问题）

因此，将/^\d{1,8}(?:\.\d{1,3})?$/用作您的正则表达式。

在这里，我留下了代码的演示。我为每个按键添加了一个alert，以便您可以看到它的存储方式。尝试写1,1，看看会发生什么。

<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="alert(this.value); /^\d{1,8}(?:\.\d{1,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">

Answer 2

除了Julio's answer

请注意，step="0.1"也可能破坏您的表单验证。

最好坚持进行正则表达式验证（对于3个小数，step="0.001"）

更多信息here

Answer 3

尝试将功能与元素分开

    const myElement = document.getElementById("someInput");
    myElement.oninput = function(ev) {
        /^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0, -1);
    }

    <input type="number" id="someInput" name="19000003" min="0" max="99999999" required="" step="0.1" />

使用正则表达式对HTML5输入类型编号进行动态验证的问题

3 个答案: