React中Formik+Yup表单验证：为用户名添加字母数字混合规则

要让用户名必须同时包含字母和数字，你可以使用 Yup 的 matches 方法配合正则表达式来实现，以此排除纯符号+数字、纯字母等不符合要求的情况。

修改后的验证规则中，为 username 字段添加正则匹配规则即可，完整代码如下：

const validationSchema = Yup.object({
  email: Yup.string()
    .email("请输入有效的邮箱地址")
    .required("此字段为必填项"),
  username: Yup.string()
    .min(4, "用户名长度不能少于4位")
    .max(50, "用户名长度不能超过50位")
    .matches(/^(?=.*[A-Za-z])(?=.*\d).+$/, "用户名必须同时包含字母和数字")
    .required("此字段为必填项"),
  password: Yup.string()
    .min(4, "密码长度不能少于4位")
    .max(50, "密码长度不能超过50位")
    .required("此字段为必填项"),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref("password")], "两次输入的密码不一致")
    .required("此字段为必填项"),
});

规则说明： #

• 正则表达式 ^(?=.*[A-Za-z])(?=.*\d).+$ 通过正向预查实现双重校验：
  • (?=.*[A-Za-z])：确保字符串中至少包含一个大小写字母
  • (?=.*\d)：确保字符串中至少包含一个数字
  • .+：匹配任意非空字符，结合前面的 min 和 max 规则，保证用户名长度合规

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