react-validation框架下checkbox勾选状态验证的实现问题

和你现有的text-input验证逻辑对齐，只需三步即可完成checkbox校验：

1. 扩展状态管理 #

在现有表单状态中新增两个字段，分别存储checkbox勾选状态和对应的错误提示：

// 示例基于React useState，和你现有逻辑保持一致
const [formData, setFormData] = useState({
  // 你原有字段
  inputVal: '',
  inputErr: '',
  // 新增checkbox相关字段
  isAgreeChecked: false,
  checkErr: ''
})

2. 给checkbox绑定状态和变更事件 #

修改checkbox的渲染代码，绑定状态和 onChange 事件，勾选时自动清空错误提示：

<input
  type="checkbox"
  checked={formData.isAgreeChecked}
  onChange={(e) => {
    setFormData({
      ...formData,
      isAgreeChecked: e.target.checked,
      checkErr: '' // 勾选/取消勾选时自动清空错误提示
    })
  }}
/>
<label>我已同意用户协议</label>
<!-- 错误提示渲染，和input错误提示逻辑一致 -->
{ formData.checkErr && <span className="error">{formData.checkErr}</span> }

3. 提交校验中新增checkbox规则 #

在现有的表单提交校验函数中，加入checkbox的勾选校验逻辑：

const handleSubmit = (e) => {
  e.preventDefault()
  let passValidate = true
  // 你原有的text-input校验逻辑保留
  if (!formData.inputVal.trim()) {
    setFormData(prev => ({...prev, inputErr: '请输入内容'}))
    passValidate = false
  }
  // 新增checkbox校验逻辑
  if (!formData.isAgreeChecked) {
    setFormData(prev => ({...prev, checkErr: '请勾选同意协议'}))
    passValidate = false
  }
  if (passValidate) {
    // 校验全部通过，执行后续提交逻辑
  }
}

注意：字段命名可以根据你现有代码的命名规则调整，保持逻辑对齐即可。

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