英国邮编正则表达式验证持续失效问题排查

HTML的input元素的pattern属性要求传入字符串格式的正则表达式，不需要包含正则字面量的斜杠/。你现在传的是JavaScript正则对象（RegExp实例），React会自动把它转成字符串，结果变成了"/^[A-Z]{1,2}\d[A-Z\d]? ?\d[A-Z]{2}$/"——相当于要求输入内容里必须包含前后斜杠，合法的英国邮编自然通不过验证。

有两种简单的修改方式：

方式一：改用字符串定义正则 #

直接把REGEXES里的postcode改成字符串格式，注意反斜杠要转义：

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

方式二：提取正则对象的源字符串 #

如果想保留正则对象的写法，就用RegExp.prototype.source属性获取不含斜杠的正则源字符串，传给pattern：

const ADDRESS_FORM_FIELDS = [
    ...,
    {
        name: 'postcode',
        required: true,
        label: 'Postcode',
        type: 'text',
        pattern: REGEXES.postcode.source // 这里用source属性
    }
];

• 给input加个title属性，比如title: "请输入合法英国邮编，示例：AB1 2CD"，这样验证失败时浏览器会弹出这个提示，用户更清楚要怎么输入。
• 可以给正则加上大小写不敏感修饰符i，比如把正则改成/^[A-Z]{1,2}\d[A-Z\d]? ?\d[A-Z]{2}$/i（字符串形式就是"^[A-Z]{1,2}\\d[A-Z\\d]? ?\\d[A-Z]{2}$i"），这样用户输入小写字母也能通过验证，体验更好。

内容的提问来源于stack exchange，提问作者physicsboy