VeeValidate和YUP异步电子邮件验证为后台的每个输入发送请求

Question

我正在尝试在我的注册表格中添加惰性电子邮件唯一的验证器。它可以工作，但是当我在其他字段(也包括电子邮件字段)中键入某些内容时，唯一的验证器会不断地运行，并不断地向服务器发送请求。我认为表单级别验证会导致这种情况，但我无法找到关闭它的方法。如何防止在表单级别验证email字段以处理烦人的验证请求？

下面是脚本设置：

<script setup lang='ts'>
// E-mail unique validator (adding method to YUP's string)
addMethod(string, 'unique', function unique(message: string) {
  return this.test('unique', message, function (value: string) {
    const { path, createError } = this;

    return new Promise((resolve, reject) => {
      EventService.checkEmailUniqueness(value).then(() => {
        resolve(true)
      }).catch(() => {
        reject(createError({ path, message }))
      })
    });
  })
})

// YUP validation schema
const userLoginSchema = object({
  firstname: string().required(t('fieldRequired')),
  lastname: string().required(t('fieldRequired')),
  email: string().email(t('emailRequired')).unique(t('emailInUse')).required(t('fieldRequired')),
  password: string().required(t('fieldRequired')).min(8, t('minPasswordLength', {min: 8})),
  password2:
      string().required(t('fieldRequired')).min(8, t('minPasswordLength', {min: 8})).oneOf([refy('password')],
      t('passwordNotMatch')),
})

// Form and fields
const { handleSubmit, errors } = useForm({
  validationSchema: userLoginSchema,
  validateOnMount: false,
});

const { value: firstname } = useField('firstname')
const { value: lastname } = useField('lastname')
const { value: email, handleChange } = useField('email')
const { value: password } = useField('password')
const { value: password2 } = useField('password2')
</script>

表单模板(使用vuetify构建)：

<template lang='pug'>
    v-card(width='300').mx-auto
      v-card-text
        v-form(@submit.prevent='register')
          v-text-field(v-model='firstname' :label='$t("firstname")'
            :error-messages='errors.firstname' required)
          v-text-field(v-model='lastname' :label='$t("lastname")'
            :error-messages='errors.lastname' required)
          v-text-field(:model-value='email' :label='$t("email")'
            type='email' :error-messages='errors.email' @change='handleChange' required)
          v-text-field(v-model='password' :label='$t("password")'
            :append-inner-icon='showPassword ? "mdi-eye": "mdi-eye-off"'
            :type='showPassword ? "text": "password"'
            @click:append-inner='showPassword = !showPassword' :error-messages='errors.password'
            required)
          v-text-field(v-model='password2' :label='$t("repeatPassword")'
            :append-inner-icon='showPassword ? "mdi-eye": "mdi-eye-off"'
            :type='showPassword ? "text": "password"'
            @click:append-inner='showPassword = !showPassword' :error-messages='errors.password2'
            required)
          div.text-body-1.text-red {{ err }}
          v-btn(v-if='!loading' color='success' variant='contained-text'
            type='submit').mt-5 {{ $t('register') }}
          v-progress-circular(v-if='loading' color='info' indeterminate="").mt-5
    </template>

Answer 1

我不知道如何在电子邮件字段中禁用重复验证，但是答案在这里允许我链接我的验证(通常是验证并行运行)，并消除荒谬的请求。

下面是上面编辑的模式版本，希望它能有所帮助：

const sequence = <T>(
    name: string,
    ...schemas: ReadonlyArray<BaseSchema>
): TestConfig<T> => {
  return {
    name,
    test: async (value, context) => {
      try {
        for (const schema of schemas) {
          await schema.validate(value, { context })
        }
      } catch (e) {
        if (e instanceof ValidationError) {
          return context.createError({ message: e.message })
        }
        throw e
      }
      return true
    },
  }
}

const userLoginSchema = object({
  firstname: string().required(t('fieldRequired')),
  lastname: string().required(t('fieldRequired')),
  email: string().test(
      sequence('email',
          string().required(t('fieldRequired')).email(t('emailRequired')),
          string().test( // You can also write your custom validations via addMethod like in original post
              {
                name: 'unique',
                message: t('emailInUse'),
                test: async (value: string) => {
                  EventService.checkEmailUniqueness(value).then((response) => {
                    return response.data.is_available
                  }).catch((e) => { throw e })
                }
              }
          )
      )
  ),
  password:
      string().matches(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?\d).{8,}$/,
          t('passwordMatch')).required(t('fieldRequired')).min(8,
          t('minPasswordLength',
      {min: 8})),
  password2:
      string().required(t('fieldRequired')).oneOf([refy('password')], t('passwordNotMatch')),
})

Answer 2

与其将验证规则放入表单验证模式中，不如将它们作为每个useField调用的第二个参数独立传递：

const { handleSubmit, errors } = useForm({
  // ditch the validationSchema
  // validationSchema: userLoginSchema,
  validateOnMount: false,
});

// Declare each field and provide validators
const { value: firstname } = useField('firstname', 'required|customGlobalVal')
// ... same with your other fields

在此之后，更改字段不应触发其他字段中的验证，除非手动执行。