mwc-文本字段输入模式不适用于反斜杠或竖线

Question

我正在尝试向 mwc-textfield 输入添加模式以过滤文件名。我的模式似乎是有效的 js 正则表达式，并且似乎适用于 html 输入，但不能作为 mwc-textfield 上的模式。我有两个问题：

1. \|

   或 \ 给出

   Pattern attribute value ^[^|\/:*"<>]+$ is not a valid regular expression: ect...

   但

   \\|

   的作用让我感到困惑

2. \\

   无论我尝试什么，实际上似乎都不会匹配。

示例：https://codesandbox.io/p/sandbox/fervent-field-jjpvjz

正则表达式：

^[^\|\\\/:\*"<>]+$

任何人都可以解释这种奇怪的现象或我做错了什么吗？ 谢谢！

Answer 1

由于您在 JS 标记模板字符串中编写正则表达式模式，因此需要转义

\

，因此您应该将其加倍。

html`
      <mwc-textfield
        outlined
        validationMessage="WRONG!"
        pattern='^[^\\|\\\\\\/:*&quot;&lt;&gt;]+$'
        label="Test"
        value="Hello|"
      >
      </mwc-textfield>
    `