feat: update the rules for verification.

Author: Ohh-889

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

@@ -2,12 +2,12 @@ import { toast } from 'soybean-react-ui';
 
 export function showToastCode(title: string, values: any) {
   toast(title, {
+    className: '!w-[400px]',
     description: (
       <pre className="mt-2 w-[360px] max-sm:w-screen rounded-md bg-neutral-950 p-4">
         <code className="text-white">{JSON.stringify(values, null, 2)}</code>
       </pre>
     ),
-    className: '!w-[400px]',
     position: 'top-center'
   });
 }

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { Card, Form, FormField, useFieldErrors, useForm } from 'soybean-react-ui';
+import { Button, Card, Form, FormField, useFieldErrors, useForm } from 'soybean-react-ui';
 
 import { DemoInput } from './DemoComponents';
 import { showToastCode } from './toast';
@@ -14,17 +14,23 @@ type Inputs = {
 const Validate = () => {
   const [form] = useForm<Inputs>();
 
-  const errors = useFieldErrors(form);
+  // const errors = useFieldErrors(form);
 
-  useEffect(() => {
-    // showToastCode('all Errors', errors);
-  }, [errors]);
+  // useEffect(() => {
+  //   // showToastCode('all Errors', errors);
+  // }, [errors]);
 
   return (
     <Card title="Validate Fields">
       <Form
         className="w-[480px] max-sm:w-full space-y-4"
         form={form}
+        onFinish={values => {
+          showToastCode('You submitted the following values success Validate', values);
+        }}
+        onFinishFailed={errors => {
+          showToastCode('You failed to submit the form failed Validate', errors);
+        }}
       >
         <FormField
           label="Username"
@@ -43,7 +49,8 @@ const Validate = () => {
           name="age"
           rules={[
             { message: 'Age is required', required: true },
-            { message: 'Age must be at least 18', min: 18, type: 'number' }
+            { message: 'Age must be at least 18', min: 18, type: 'number' },
+            { max: 35, message: 'Age must be less than 35', type: 'number' }
           ]}
         >
           <DemoInput
@@ -56,11 +63,27 @@ const Validate = () => {
           label="Password"
           name="password"
           rules={[
-            { message: 'Password must be at least 8 characters', minLength: 8, type: 'string' },
             {
-              validator: (_, value) => {
-                if (value.includes('123')) {
-                  return 'Password cannot contain 123';
+              message: 'Password must be at least 8 characters and contain at least one letter and one number',
+              pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
+            }
+          ]}
+        >
+          <DemoInput
+            name="password"
+            placeholder="Password"
+          />
+        </FormField>
+
+        <FormField
+          label="Password2"
+          name="password2"
+          rules={[
+            {
+              validator: (_, value, values) => {
+                console.log('value', value);
+                if (value !== values.password) {
+                  return 'Password must be the same';
                 }
 
                 return null;
@@ -69,10 +92,65 @@ const Validate = () => {
           ]}
         >
           <DemoInput
-            name="password"
-            placeholder="Password"
+            name="password2"
+            placeholder="Password2"
           />
         </FormField>
+
+        <FormField
+          label="Username2"
+          name="username2"
+          rules={[
+            {
+              // 异步校验，延迟 1000ms
+              validator: async (_, value) => {
+                console.log('start validate username:', value);
+
+                await new Promise(r => setTimeout(r, 1000));
+
+                if (!value) {
+                  return 'Username2 is required';
+                }
+
+                if (value.toLowerCase() === 'admin') {
+                  return 'This username2 is not allowed';
+                }
+
+                return null; // 校验通过
+              }
+            }
+          ]}
+        >
+          <DemoInput
+            name="username2"
+            placeholder="Username2"
+          />
+        </FormField>
+
+        <FormField
+          label="Email"
+          name="email"
+          validateTrigger={['onChange', 'onBlur']}
+          rules={[
+            {
+              message: 'Please enter a valid email',
+              type: 'email',
+              validateTrigger: 'onBlur' // 单个
+            },
+            {
+              message: 'At least 6 characters',
+              minLength: 6,
+              validateTrigger: ['onChange', 'onBlur'] // 多个
+            }
+          ]}
+        >
+          <DemoInput
+            name="email"
+            placeholder="Email"
+          />
+        </FormField>
+
+        <Button type="submit">Submit</Button>
       </Form>
     </Card>
   );

primitives/filed-form /src/createStore.ts

@@ -662,7 +662,7 @@ class FormStore {
       if (!wasValidating) {
         this._validating.add(key);
         this._validated.delete(key);
-        this.enqueueNotify([key], ChangeTag.Validating, true);
+        this.enqueueNotify([key], ChangeTag.Validating);
         this.triggerOnFieldsChange([key]);
       }
 
@@ -672,9 +672,10 @@ class FormStore {
       let warns: string[] = [];
 
       try {
-        ({ errors, warns } = await runRulesWithMode(value, rules, opts?.mode || 'parallelAll'));
+        ({ errors, warns } = await runRulesWithMode(value, rules, opts?.mode || 'parallelAll', this._store));
       } catch (e: any) {
         // 4) 兜底：规则抛错也要转成错误信息（避免“莫名其妙通过/卡住”）
+        console.error('e', e);
         errors = [String(e?.message ?? e)];
       }
 
@@ -713,7 +714,7 @@ class FormStore {
         needFieldsChange = true;
       }
 
-      if (mask) this.enqueueNotify([key], mask, true);
+      if (mask) this.enqueueNotify([key], mask);
       if (needFieldsChange) this.triggerOnFieldsChange([key]);
 
       return errors.length === 0;
@@ -729,23 +730,41 @@ class FormStore {
     });
   };
 
-  async validateFields(names?: NamePath[], opts?: ValidateOptions) {
-    const list = names?.length ? names : Array.from(this._dirty);
+  async validateFields(names?: NamePath[], opts?: ValidateOptions & { dirty?: boolean }) {
+    let list: string[];
+
+    if (names && names.length > 0) {
+      const normalized = names.map(n => keyOfName(n));
+      if (opts?.dirty) {
+        // 只取 names 中 dirty 的
+        list = normalized.filter(k => this._dirty.has(k));
+      } else {
+        // 全部 names
+        list = normalized;
+      }
+    } else if (opts?.dirty) {
+      // 没有传 names → 校验所有 dirty 的
+      list = Array.from(this._dirty);
+    } else {
+      // 没有传 names → 校验所有字段
+      list = this._fieldEntities.map(e => keyOfName(e.name));
+    }
+
     if (!list.length) return true;
 
+    // 标记 validating
     this.transaction(() => {
-      for (const n of list) {
-        const k = keyOfName(n);
+      for (const k of list) {
         if (!this._validating.has(k)) {
           this._validating.add(k);
           this.enqueueNotify([k], ChangeTag.Validating);
         }
       }
     });
 
-    const ok = await Promise.all(list.map(n => this.validateField(n, opts)));
+    const results = await Promise.all(list.map(n => this.validateField(n, opts)));
 
-    return ok.every(Boolean);
+    return results.every(Boolean);
   }
 
   // ------------------------------------------------
@@ -914,10 +933,16 @@ class FormStore {
     };
   }
   private submit = () => {
-    this.validateFields().then(ok => {
-      if (ok) this._callbacks.onFinish?.(this._store);
-      else this._callbacks.onFinishFailed?.(this.buildFailedPayload());
-    });
+    console.log('submit');
+    this.validateFields()
+      .then(ok => {
+        console.log('ok', ok);
+        if (ok) this._callbacks.onFinish?.(this._store);
+        else this._callbacks.onFinishFailed?.(this.buildFailedPayload());
+      })
+      .catch(err => {
+        console.log('err', err);
+      });
   };
 
   private destroyForm = (clearOnDestroy?: boolean) => {
@@ -991,14 +1016,14 @@ class FormStore {
     }
   }
 
-  private enqueueNotify(names?: NamePath[] | string[], mask: ChangeMask = ChangeTag.All, isImmediate = false) {
+  private enqueueNotify(names?: NamePath[] | string[], mask: ChangeMask = ChangeTag.All) {
     if (!names) this.markPending('*', ChangeTag.All);
     else for (const n of names) this.markPending(keyOfName(n), mask);
 
-    this.scheduleFlush(isImmediate);
+    this.scheduleFlush();
   }
 
-  private scheduleFlush(isImmediate = false) {
+  private scheduleFlush() {
     if (this._txDepth > 0) return; // During the transaction, do not flush; wait for commit.
 
     if (!this._flushScheduled) {