动态验证

在许多情况下，您希望根据表单的状态或其他条件更改验证规则。最常见的例子是，您希望根据用户是第一次提交表单还是以后提交，以不同的方式验证某个字段。

我们通过我们的 onDynamic 验证函数来支持这一点。

import { revalidateLogic, createForm } from '@tanstack/svelte-form'

// ...

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  // If this is omitted, onDynamic will not be called
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: ({ value }) => {
      if (!value.firstName) {
        return { firstName: 'A first name is required' }
      }
      return undefined
    },
  },
}))

import { revalidateLogic, createForm } from '@tanstack/svelte-form'

// ...

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  // If this is omitted, onDynamic will not be called
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: ({ value }) => {
      if (!value.firstName) {
        return { firstName: 'A first name is required' }
      }
      return undefined
    },
  },
}))

默认情况下，onDynamic 不会被调用，因此您需要将 revalidateLogic() 传递给 createForm 的 validationLogic 选项。

重新验证选项

revalidateLogic 允许您指定何时运行验证，并根据表单的当前提交状态动态更改验证规则。

它接受两个参数

mode: 首次提交表单之前的验证模式。可以是以下任一选项：
- change: 每次更改时验证。
- blur: 失去焦点时验证。
- submit: 提交时验证。（默认）
modeAfterSubmission: 表单提交后的验证模式。可以是以下任一选项：
- change: 每次更改时验证。（默认）
- blur: 失去焦点时验证。
- submit: 提交时验证。

例如，您可以使用以下方式在首次提交后根据失去焦点来重新验证：

const form = createForm(() => ({
  // ...
  validationLogic: revalidateLogic({
    mode: 'submit',
    modeAfterSubmission: 'blur',
  }),
  // ...
}))

const form = createForm(() => ({
  // ...
  validationLogic: revalidateLogic({
    mode: 'submit',
    modeAfterSubmission: 'blur',
  }),
  // ...
}))

访问错误

正如您可能从 onChange 或 onBlur 验证中访问错误一样，您可以使用 form.state.errorMap 对象访问 onDynamic 验证函数中的错误。

svelte

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<p>{form.state.errorMap.onDynamic?.firstName}</p>

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<p>{form.state.errorMap.onDynamic?.firstName}</p>

与其他验证逻辑结合使用

您可以将 onDynamic 验证与其他验证逻辑（如 onChange 或 onBlur）结合使用。

svelte

<script lang="ts">
  import { revalidateLogic, createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onChange: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
      onDynamic: ({ value }) => {
        if (!value.lastName) {
          return { lastName: 'A last name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<div>
  <p>{form.state.errorMap.onChange?.firstName}</p>
  <p>{form.state.errorMap.onDynamic?.lastName}</p>
</div>

<script lang="ts">
  import { revalidateLogic, createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onChange: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
      onDynamic: ({ value }) => {
        if (!value.lastName) {
          return { lastName: 'A last name is required' }
        }
        return undefined
      },
    },
  }))
</script>

<div>
  <p>{form.state.errorMap.onChange?.firstName}</p>
  <p>{form.state.errorMap.onDynamic?.lastName}</p>
</div>

与字段结合使用

您也可以像使用其他验证逻辑一样，将 onDynamic 验证与字段一起使用。

svelte

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  }))
</script>

<form
  onsubmit={(e) => {
    e.preventDefault()
    e.stopPropagation()
    form.handleSubmit()
  }}
>
  <form.Field
    name={'age'}
    validators={{
      onDynamic: ({ value }) =>
        value > 18 ? undefined : 'Age must be greater than 18',
    }}
  >
    {#snippet children(field)}
      <div>
        <input
          type="number"
          onchange={(e) => field.handleChange(e.target.valueAsNumber)}
          onblur={field.handleBlur}
          value={field.state.value}
        />
        <p style="color: red">
          {field.state.meta.errorMap.onDynamic}
        </p>
      </div>
    {/snippet}
  </form.Field>
  <button type="submit">Submit</button>
</form>

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  }))
</script>

<form
  onsubmit={(e) => {
    e.preventDefault()
    e.stopPropagation()
    form.handleSubmit()
  }}
>
  <form.Field
    name={'age'}
    validators={{
      onDynamic: ({ value }) =>
        value > 18 ? undefined : 'Age must be greater than 18',
    }}
  >
    {#snippet children(field)}
      <div>
        <input
          type="number"
          onchange={(e) => field.handleChange(e.target.valueAsNumber)}
          onblur={field.handleBlur}
          value={field.state.value}
        />
        <p style="color: red">
          {field.state.meta.errorMap.onDynamic}
        </p>
      </div>
    {/snippet}
  </form.Field>
  <button type="submit">Submit</button>
</form>

异步验证

异步验证也可以像其他验证逻辑一样与 onDynamic 一起使用。您甚至可以对异步验证进行防抖处理，以避免过多的调用。

const form = createForm(() => ({
  defaultValues: {
    username: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
    onDynamicAsync: async ({ value }) => {
      if (!value.username) {
        return { username: 'Username is required' }
      }
      // Simulate an async validation
      const isValid = await validateUsername(value.username)
      return isValid ? undefined : { username: 'Username is already taken' }
    },
  },
}))

const form = createForm(() => ({
  defaultValues: {
    username: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
    onDynamicAsync: async ({ value }) => {
      if (!value.username) {
        return { username: 'Username is required' }
      }
      // Simulate an async validation
      const isValid = await validateUsername(value.username)
      return isValid ? undefined : { username: 'Username is already taken' }
    },
  },
}))

标准模式验证

您还可以将 Valibot 或 Zod 等标准模式验证库与 onDynamic 验证结合使用。这使您可以定义复杂的验证规则，这些规则可以根据表单状态动态更改。

import { z } from 'zod'

const schema = z.object({
  firstName: z.string().min(1, 'A first name is required'),
  lastName: z.string().min(1, 'A last name is required'),
})

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: schema,
  },
}))

import { z } from 'zod'

const schema = z.object({
  firstName: z.string().min(1, 'A first name is required'),
  lastName: z.string().min(1, 'A last name is required'),
})

const form = createForm(() => ({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: schema,
  },
}))

重新验证选项

访问错误

与其他验证逻辑结合使用

与字段结合使用

异步验证

标准模式验证

订阅 Bytes

订阅 Bytes