使用Formik / Yup进行可选的文件验证

时间:2019-05-18 11:39:47

标签: reactjs forms formik yup

如果要选择文件,我想验证文件输入,我找到了Formik / Yup的解决方案,但是即使没有选择文件,它也可以验证。

avatar: Yup.mixed()
    .test("fileSize", "File is too large", value => {
      return value && value.size <= FILE_SIZE;
    })
    .test(
      "fileFormat",
      "Unsupported Format",
      value => value && SUPPORTED_FORMATS.includes(value.type)
    )

当我输入其他输入时会触发验证,我只想在文件存在的情况下触发验证,因为头像是可选的!

1 个答案:

答案 0 :(得分:1)

问题在于,仅当value存在时,测试才返回null(意味着它可以验证)。您必须添加一个条件以接受不存在的值(即:是undefinedavatar: Yup.mixed() .test( "fileSize", "File is too large", value => !value || (value && value.size <= FILE_SIZE) ) .test( "fileFormat", "Unsupported Format", value => !value || (value => value && SUPPORTED_FORMATS.includes(value.type)) ) )。

我遇到了完全相同的问题,我这样解决了:

computed: {
    usersWithTicketList () {
        // put users & tickets together in one object
        let users = this.user_list.map(user => {
            let tickets = this.ticket_list.filter(ticket => ticket.user_id === user.id)
            return {...user, tickets}
        })

        // add unnassigned tickets to a fake user
        users.concat({
            id: -1, // fake user id for unnassigned
            // other user info
            tickets: UNNASSIGNED
        })

        return users
    }
}