用户注册表单

💡 修改"邮箱"或"密码"字段，观察确认字段的自动重新验证

📖 实现说明

1. 定义依赖关系

const form = useFormState({
  fields: {
    password: {
      validator: Validators.minLength(8)
    },
    confirmPassword: {
      validator: passwordMatchValidator,
      // 当 password 变化时，自动重新验证此字段
      dependencies: ['password']
    },
    orderTotal: {
      validator: Validators.min(0)
    },
    discountCode: {
      validator: discountCodeValidator,
      // 当 orderTotal 变化时，自动重新验证此字段
      dependencies: ['orderTotal']
    }
  }
});

2. 编写依赖验证器

// 密码确认验证器
const passwordMatchValidator = createValidator(
  (value, allValues) => {
    if (value !== allValues.password) {
      return '两次密码不一致';
    }
    return null;
  }
);

// 折扣码验证器（依赖订单金额）
const discountCodeValidator = createValidator(
  async (value, allValues) => {
    const total = allValues.orderTotal as number;

    // 金额 < 100 时不验证
    if (total < 100) return null;

    // 金额 >= 100 时必须填写
    if (!value) {
      return '订单金额超过100时，必须输入折扣码';
    }

    // 异步验证折扣码有效性
    const isValid = await checkDiscountCode(value);
    return isValid ? null : '无效的折扣码';
  }
);

✨ 特性亮点

自动级联验证：修改字段A时，依赖A的字段B自动重新验证
访问所有字段值：验证器可以访问 allValues 参数
异步验证支持：折扣码验证模拟了API调用
条件验证：根据其他字段值决定是否验证（如订单金额）
防抖优化：使用 validateOnComplete 减少不必要的验证

🎯 适用场景

密码确认、邮箱确认
开始日期 → 结束日期（结束必须晚于开始）
国家 → 省份 → 城市（级联选择）
商品数量 → 库存检查
优惠券 → 订单金额验证
支付方式 → 对应字段验证

字段依赖示例

用户注册表单

📧 邮箱验证

🔒 密码验证

💰 订单金额与折扣

📖 实现说明

1. 定义依赖关系

2. 编写依赖验证器

✨ 特性亮点

🎯 适用场景