How do you add synchronous and asynchronous field validation in TanStack Form?

<script setup lang="ts">
import { useForm }       from "@tanstack/vue-form"
import { zodValidator } from "@tanstack/zod-form-adapter"
import { z }            from "zod"

const form=useForm({
  defaultValues:    { username:"", email:"" },
  validatorAdapter: zodValidator(),
  onSubmit: async ({ value })=>{ await register(value) },
})
</script>
<template>
  <form @submit.prevent="form.handleSubmit()">

    <!-- Sync Zod validation -->
    <form.Field name="username"
      :validators="{
        onChange: z.string().min(3,'Min 3 characters'),
        onBlur:   z.string().regex(/^[a-z0-9]+$/,'Lowercase/numbers only'),
      }"
    >
      <template #default="{ field }">
        <input :value="field.state.value" @blur="field.handleBlur"
               @input="field.handleChange(($event.target as HTMLInputElement).value)" />
        <p v-for="e in field.state.meta.errors" :key="e">{{e}}</p>
      </template>
    </form.Field>

    <!-- Async validation with debounce -->
    <form.Field name="email"
      :validators="{
        onChangeAsync: async ({ value })=>{
          const taken=await checkEmailTaken(value)
          return taken ? 'Email already registered' : undefined
        },
        onChangeAsyncDebounceMs: 500,
      }"
    >
      <template #default="{ field }">
        <input :value="field.state.value"
               @input="field.handleChange(($event.target as HTMLInputElement).value)" />
        <span v-if="field.state.meta.isValidating">Checking...</span>
        <p v-for="e in field.state.meta.errors" :key="e">{{e}}</p>
      </template>
    </form.Field>
    <button type="submit">Register</button>
  </form>
</template>