使用vee-validate和Yup绑定验证复选框时遇类型错误

出现accept must be a boolean type, but the final value was: "on"错误的核心原因是：HTML原生checkbox选中时默认返回字符串"on"，但你的Yup校验规则定义的是布尔类型，两者类型不匹配导致报错。

以下是几种可行的解决方式：

方式一：给checkbox指定布尔类型的选中/未选中值 #

通过Vue的v-bind给checkbox设置true-value和false-value，强制返回布尔值：

<Field
  type="checkbox"
  name="accept"
  v-model="form.accept"
  :true-value="true"
  :false-value="false"
/>

方式二：在Yup规则中转换值 #

利用Yup的transform方法，将收到的"on"字符串转换为布尔值，适配校验规则：

import { object, boolean } from 'yup';

const validationSchema = object({
  accept: boolean()
    .transform((value) => value === 'on' || value === true)
    .required('请同意相关条款'),
});

方式三：通过vee-validate的Field组件转换值 #

使用Field组件的parse属性，将输入值转换为布尔类型：

<Field
  type="checkbox"
  name="accept"
  v-model="form.accept"
  :parse="(value) => value === 'on'"
/>

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