输入英国邮政编码的正则表达式始终无效

Question

我正在尝试使用正则表达式

pattern

将

input

验证添加到我的

^[A-Z]{1,2}\d[A-Z\d]? ?\d[A-Z]{2}$

中，并且在输入我希望有效的

AB1 2CD

形式的邮政编码后，我不断收到无效消息。 .

const REGEXES = {
    postcode: /^[A-Z]{1,2}\d[A-Z\d]? ?\d[A-Z]{2}$/,
    ...
};

const ADDRESS_FORM_FIELDS = [
    ...,
    {
        name: 'postcode',
        required: true,
        label: 'Postcode',
        type: 'text',
        pattern: REGEXES.postcode
    }
];

const MyForm = () => {
    
   ...
   
   return (
     <form ...>
        {
            ADDRESS_FORM_FIELDS.map(({name, required, label, type, ...rest}) => (<>
               <label for={name}>{label}{required ? ' *' : ''}</label>
               <input {...{name, type, required, placeholder: label, ...rest, value: addressValues[name], onChange: handleAddressFormChange}} />
                </>))
            }
     </form>
  )
}

Answer 1

问题是您使用的是普通正则表达式，该表达式会转换为要传递给

pattern

属性的字符串。

... 模式文本周围不应指定正斜杠。 ...

RegExp 的

toString()

方法将创建类似

/.../flags

的内容，但

pattern

属性需要正则表达式的“内部”部分，而不是

/

部分。

因此您可以使用

.source

属性来提取该内容。

那么，

const ADDRESS_FORM_FIELDS = [
    ...,
    {
        name: 'postcode',
        required: true,
        label: 'Postcode',
        type: 'text',
        pattern: REGEXES.postcode.source
    }
];