feat: add a callback for verification failure.

Author: Ohh-889

playground/src/app/(demo)/form/modules/Default.tsx

@@ -26,11 +26,14 @@ const Default = () => {
 
   return (
     <Form
-      className="w-[480px] space-y-4"
+      className="w-[480px] max-sm:w-full space-y-4"
       form={form}
       onFinish={values => {
         console.log(values);
       }}
+      onFinishFailed={errors => {
+        console.log(errors);
+      }}
     >
       <FormField<FormValues>
         label="Username"

primitives/filed-form /src/FieldContext.ts

@@ -47,6 +47,17 @@ export interface OperationOptions<Values = any> {
   validateFields: (...names: AllPaths<Values>[]) => Promise<boolean>;
 }
 
+export interface ValidateErrorEntity<Values = any> {
+  // 便于 UI 直接滚动
+  errorCount: number; // 可选：按 _pruneForSubmit 过滤后的值（给埋点/回放）
+  errorFields: Meta<string, any>[]; // 逐字段列表（用于滚动到第一个错误、逐项显示）
+  errorMap: Record<string, string[]>; // 同上：警告
+  firstErrorName?: string; // 全量当前值（未裁剪）
+  submittedAt: number;
+  values: Values; // 快速索引（表头红点、侧边分组统计）
+  warningMap: Record<string, string[]>;
+}
+
 export interface RegisterCallbackOptions<Values = any> {
   onFieldsChange?: (
     changedFields: Meta<AllPaths<Values>, PathToDeepType<Values, AllPaths<Values>>>[],
@@ -55,6 +66,8 @@ export interface RegisterCallbackOptions<Values = any> {
 
   onFinish?: (values: Values) => void;
 
+  onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
+
   onValuesChange?: (changedValues: Partial<Values>, values: Values) => void;
 }
 

primitives/filed-form /src/Form.tsx

@@ -38,6 +38,7 @@ const Form = <Values=any, As extends ElementType = 'form'>(props: FormProps<Valu
     initialValues,
     onFieldsChange,
     onFinish,
+    onFinishFailed,
     onValuesChange,
     preserve = true,
     validateMessages,
@@ -75,6 +76,7 @@ const Form = <Values=any, As extends ElementType = 'form'>(props: FormProps<Valu
     setCallbacks({
       onFieldsChange,
       onFinish,
+      onFinishFailed,
       onValuesChange
     });
 

primitives/filed-form /src/createStore.ts

@@ -640,15 +640,30 @@ class FormStore {
       // 并发淘汰：如果 token 改变，放弃落盘
       if (this._validateToken.get(key) !== token) return false;
 
-      // 写回（空即删）
-      errors.length ? this._errors.set(key, errors) : this._errors.delete(key);
+      // === 对比新旧，只有变化才落盘 & 通知 ===
+      const prevErrors = this._errors.get(key) || [];
+      const prevWarns = this._warnings.get(key) || [];
 
-      warns.length ? this._warnings.set(key, warns) : this._warnings.delete(key);
+      const errorsChanged = !isEqual(prevErrors, errors);
+      const warnsChanged = !isEqual(prevWarns, warns);
+
+      if (errorsChanged) {
+        errors.length ? this._errors.set(key, errors) : this._errors.delete(key);
+      }
+      if (warnsChanged) {
+        warns.length ? this._warnings.set(key, warns) : this._warnings.delete(key);
+      }
 
       this._validating.delete(key);
 
-      this.enqueueNotify([key], ChangeTag.Validated | ChangeTag.Errors | ChangeTag.Warnings);
+      // 只在对应位变化时，才把位并进掩码
+      let mask: ChangeMask = ChangeTag.Validated;
+      if (errorsChanged) mask |= ChangeTag.Errors;
+      if (warnsChanged) mask |= ChangeTag.Warnings;
+
+      this.enqueueNotify([key], mask);
 
+      // 是否需要始终回调由你的业务决定；如也想避免无变化触发，可加条件判断
       this.triggerOnFieldsChange([key]);
 
       return errors.length === 0;
@@ -786,6 +801,8 @@ class FormStore {
     }
   };
 
+  // ===== Submit =====
+
   usePreSubmit(fn: (values: Store) => Store) {
     this._preSubmit.push(fn);
   }
@@ -814,11 +831,38 @@ class FormStore {
     return walk(values, []) ?? {};
   }
 
-  // ===== Submit =====
+  private buildFailedPayload() {
+    const errorMap = Object.fromEntries(this._errors);
+    const warningMap = Object.fromEntries(this._warnings);
+
+    const errorFields = Array.from(this._errors.entries()).map(([name, errors]) => ({
+      errors,
+      name,
+      touched: this._touched.has(name),
+      validating: this._validating.has(name),
+      value: this.getFieldValue(name),
+      warnings: this._warnings.get(name) || []
+    }));
+
+    // 注意：Map 的迭代顺序是插入顺序；如果你想“第一个错误字段”根据 DOM 顺序，
+    // 可以在这里按你的字段注册顺序（_fieldEntities）排序一次。
+    const firstErrorName = errorFields[0]?.name;
+
+    return {
+      errorCount: errorFields.length,
+      errorFields,
+      errorMap,
+      firstErrorName,
+      submittedAt: Date.now(),
+      values: this._store,
+      warningMap
+    };
+  }
   private submit = () => {
     this.validateFields().then(ok => {
+      console.log('submit', ok);
       if (ok) this._callbacks.onFinish?.(this._store);
-      else this._callbacks.onFinishFailed?.(this._store);
+      else this._callbacks.onFinishFailed?.(this.buildFailedPayload());
     });
   };