基础表单示例

简单的登录表单，演示 FormState 的基础用法。

功能特性

✅ 字段验证（必填、邮箱格式、最小长度）
✅ 实时错误提示
✅ 表单状态管理（dirty、touched、valid）
✅ 提交处理

代码示例

const form = useFormState({
  fields: {
    email: {
      validator: Validators.compose(
        Validators.required('邮箱不能为空'),
        Validators.email('请输入有效的邮箱地址')
      )
    },
    password: {
      validator: Validators.compose(
        Validators.required('密码不能为空'),
        Validators.minLength(8, '密码至少需要 8 个字符')
      )
    }
  }
});

<Form {form} onSubmit={handleSubmit}>
  <FormField name="email" label="邮箱">
    {#snippet children({ value, error, touched, onInput, onBlur })}
      <input type="email" {value} oninput={e => onInput(e.target.value)} />
    {/snippet}
  </FormField>
</Form>

交互演示

表单状态

是否有效 ✓ 是

是否修改 ✗ 否

验证中 ✗ 否

查看原始数据

{
  "values": {
    "email": "",
    "password": "",
    "rememberMe": false
  },
  "errors": {}
}