如何解决Formik+Yup正则验证错误提示异常消失的问题

你当前编写的正则存在逻辑缺陷：
/[^\/\\#+()$~%.":;*<>{}@]/ 是单字符匹配规则，含义是「匹配任意一个不在禁止特殊字符列表内的合法字符」，且没有加字符串起止锚点。
结合Yup.matches()的校验逻辑：只要输入内容中存在任意一段能匹配正则的子串，就会判定校验通过。这就导致你在特殊字符后输入普通合法字符时，正则会匹配到后续的普通字符，直接判定校验通过，错误提示消失，只有整个输入全是非法特殊字符时，才会因为找不到任何可匹配的合法子串触发错误。

调整正则规则，增加字符串起止锚点，要求整个输入字符串从开头到结尾的所有字符都属于合法字符范围，修正后的正则如下：

// 规则含义：从字符串开头到结尾，所有字符均不在禁止特殊字符列表内
const firstNameSpecialChars = /^[^\/\\#+()$~%.":;*<>{}@]*$/;

正则各部分说明：

• ^：匹配字符串的起始位置
• [^\/\\#+()$~%.":;*<>{}@]*：匹配0个或多个不在禁止列表内的合法字符
• $：匹配字符串的结束位置

修正后只要输入内容中包含任意一个非法特殊字符，正则就会匹配失败，持续展示错误提示，直到所有非法字符被完全移除才会校验通过。

对应的完整校验规则参考：

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email(ENTER_VALID_EMAIL_MESSAGE)
    .required(EMAIL_IS_REQUIRED_MESSAGE),
  firstname: Yup.string()
    .trim()
    .matches(
      firstNameSpecialChars,
      'These characters are not allowed in name fields',
    )
    // 如果姓名字段为必填，补充下面这行，可选字段可忽略
    // .required(FIRST_NAME_IS_REQUIRED_MESSAGE)
})

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