动态验证

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

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

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    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
      },
    },
  })

  render() {
    return html`<!-- form content -->`
  }
}

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    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
      },
    },
  })

  render() {
    return html`<!-- form content -->`
  }
}

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

重新验证选项

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

它接受两个参数

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

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

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    // ...
    validationLogic: revalidateLogic({
      mode: 'submit',
      modeAfterSubmission: 'blur',
    }),
    // ...
  })
}

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    // ...
    validationLogic: revalidateLogic({
      mode: 'submit',
      modeAfterSubmission: 'blur',
    }),
    // ...
  })
}

访问错误

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

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  })

  render() {
    return html`<p>${this.#form.api.state.errorMap.onDynamic?.firstName}</p>`
  }
}

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    // ...
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: ({ value }) => {
        if (!value.firstName) {
          return { firstName: 'A first name is required' }
        }
        return undefined
      },
    },
  })

  render() {
    return html`<p>${this.#form.api.state.errorMap.onDynamic?.firstName}</p>`
  }
}

与其他验证逻辑结合使用

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

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    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
      },
    },
  })

  render() {
    return html`
      <div>
        <p>${this.#form.api.state.errorMap.onChange?.firstName}</p>
        <p>${this.#form.api.state.errorMap.onDynamic?.lastName}</p>
      </div>
    `
  }
}

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    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
      },
    },
  })

  render() {
    return html`
      <div>
        <p>${this.#form.api.state.errorMap.onChange?.firstName}</p>
        <p>${this.#form.api.state.errorMap.onDynamic?.lastName}</p>
      </div>
    `
  }
}

与字段结合使用

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

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  })

  render() {
    return html`
      <form
        @submit=${(e: Event) => {
          e.preventDefault()
          e.stopPropagation()
          this.#form.api.handleSubmit()
        }}
      >
        ${this.#form.field(
          {
            name: 'age',
            validators: {
              onDynamic: ({ value }) =>
                value > 18 ? undefined : 'Age must be greater than 18',
            },
          },
          (field) => html`
            <div>
              <input
                type="number"
                .value=${field.state.value}
                @input=${(e: Event) => {
                  const target = e.target as HTMLInputElement
                  field.handleChange(target.valueAsNumber)
                }}
                @blur=${() => field.handleBlur()}
              />
              <p style="color: red;">${field.state.meta.errorMap.onDynamic}</p>
            </div>
          `,
        )}
        <button type="submit">Submit</button>
      </form>
    `
  }
}

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    defaultValues: {
      name: '',
      age: 0,
    },
    validationLogic: revalidateLogic(),
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  })

  render() {
    return html`
      <form
        @submit=${(e: Event) => {
          e.preventDefault()
          e.stopPropagation()
          this.#form.api.handleSubmit()
        }}
      >
        ${this.#form.field(
          {
            name: 'age',
            validators: {
              onDynamic: ({ value }) =>
                value > 18 ? undefined : 'Age must be greater than 18',
            },
          },
          (field) => html`
            <div>
              <input
                type="number"
                .value=${field.state.value}
                @input=${(e: Event) => {
                  const target = e.target as HTMLInputElement
                  field.handleChange(target.valueAsNumber)
                }}
                @blur=${() => field.handleBlur()}
              />
              <p style="color: red;">${field.state.meta.errorMap.onDynamic}</p>
            </div>
          `,
        )}
        <button type="submit">Submit</button>
      </form>
    `
  }
}

异步验证

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

import { LitElement } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    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' }
      },
    },
  })
}

import { LitElement } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    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 { LitElement } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
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'),
})

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: schema,
    },
  })
}

import { LitElement } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
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'),
})

@customElement('my-form')
export class MyForm extends LitElement {
  #form = new TanStackFormController(this, {
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    validationLogic: revalidateLogic(),
    validators: {
      onDynamic: schema,
    },
  })
}