错误 - 模式属性值不是有效的正则表达式

Question

我收到错误

Pattern attribute value [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])? 
   is not a valid regular expression: Uncaught SyntaxError: 
Invalid regular expression: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/v: 
Invalid character in character class

对于

FormControl

<Form.Control 
    name="email" 
    onChange={updateInput} 
    type="email" 
    pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" 
    placeholder="Email" 
    aria-label="aria-email" 
    isInvalid = {formValidState.email === '' ? false : !formValidState.email } isValid={formValidState.email === '' ? false : formValidState.email } 
    required />

这个问题已经在几个地方得到了回答，但我仍然无法弄清楚上述正则表达式有什么问题。我没有正确转义或没有转义哪些字符？还是别的什么？

Answer 1

两个斜杠需要转义，可以使用反斜杠。

<Form.Control name="email" onChange={updateInput} type="email" pattern="[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" placeholder="Email" aria-label="aria-email" isInvalid = {formValidState.email === '' ? false : !formValidState.email } isValid={formValidState.email === '' ? false : formValidState.email } required />