React中Yup数组IPv4校验失效问题求助：验证每个元素合法性

架构老林

2026-7-4

解决Yup数组中IP地址元素校验不生效的问题

你的问题出在两个核心点：正则表达式匹配逻辑不严谨，以及数组校验规则覆盖不全。以下是修正后的完整解决方案：

修正后的校验Schema

const RegisterSchema = Yup.object().shape({
  username: Yup.string().required('Username required'),
  password: Yup.string().required('Password is required'),
  email: Yup.string().required('Email is required'),
  ip_address: Yup.array()
    // 确保数组至少包含一个有效元素
    .min(1, 'IP数组不能为空')
    .of(
      Yup.string()
        // 严格匹配IPv4格式的正则表达式
        .matches(
          /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
          '请输入有效的IPv4地址'
        )
        // 避免数组中出现空字符串元素
        .required('单个IP地址不能为空')
    )
    .required('IP数组为必填项'),
});

关键修正说明

替换不严谨的正则
你原有的正则允许不完整的IP格式（如2.2.2），原因是\.?允许段之间省略点号，\b边界匹配也存在逻辑漏洞。新正则严格限制IPv4规则：每个段为0-255的数字，用点号分隔，共4个完整段。
补全数组校验规则
- 添加.min(1)：仅.required()只能保证字段存在，无法限制数组为空，.min(1)确保数组至少有一个元素
- 给数组内字符串加.required()：防止数组中出现空字符串的无效项
表单绑定确认
在React表单（如搭配Formik使用）中，需确保数组的每个元素都正确绑定到表单控件，字段变更或表单提交时会触发完整的Schema校验。