regex条件不适用于聚合物纸张输入，如何在纸张输入上仅允许小数？

Question

我试图在纸张输入上仅允许使用小数。以下是我的条件。

不应允许e 应该允许+，-例如：-23.43 DOT后只能包含12个值（十进制），例如：107.123456789012

所以我尝试使用正则表达式，但都无法正常工作。

   ^(?!-0(\.0+)?$)-?(0|[1-9]\d*)(\.\d{1,12})?$
    /^(?!-0(\.0+)?$)-?(0|[1-9]\d*)(\.\d+)?$/

        <paper-input allowed-pattern="^(?!-0(\.0+)?$)-?(0|[1-9]\d*)(\.\d+)?$">
        </paper-input>

上述正则表达式仅是整数，不接受小数。因此尝试以下之一。它的工作正常。但不确定如何限制小数。我只想在DOT（decimal）之后只允许12个值

<paper-input  allowed-pattern="[-.\d]"> </paper-input>

Answer 1

您可以使用此

^[+-]?\d+\.\d{1,12}$

  

说明

• ^-字符串开头的锚点。
• [+-]?\d+-匹配+或-（两者都是可选的）一个或多个数字。
• \.-匹配.。
• \d{1,12}-匹配1到12个数字。

Demo

const regex = /^\d+\.\d{1,12}$/gm;
const str = `1.1
0
1.123456789123
a1223
0000.1111
1.abv
`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

Answer 2

From the doc：

模式-RegEx模式以验证输入值

<paper-input pattern="[A-Z]{2}[0-9]{6}"></paper-input>

/**
* For this input “EN123456” is a valid value, 
* but "EN123456 " or " EN123456" are invalid values
* because there are extra characters 
* and value doesn't match a pattern
*/

allowed-pattern-一种限制输入的字符的模式

// accepts letters only
<paper-input allowed-pattern="[a-zA-Z]"></paper-input>

// accepts digits only
<paper-input allowed-pattern="[0-9]"></paper-input>

// accepts nothing, because one character cannot match this pattern
<paper-input allowed-pattern="[0-9][A-Z]"></paper-input>

---

只需使用：

<paper-input pattern="^(?!-0(?:\.0+)?$)-?(?:0|[1-9]\d*)(?:\.\d+)?$">

我也将捕获组更改为非捕获组，这更加有效。