feat(Form): add getValidationStatus method (#10620)

packages/vant/src/field/Field.tsx

@@ -59,6 +59,7 @@ import type {
   FieldFormatTrigger,
   FieldValidateError,
   FieldAutosizeConfig,
+  FieldValidationStatus,
   FieldValidateTrigger,
   FieldFormSharedProps,
 } from './types';
@@ -135,8 +136,8 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const id = useId();
     const state = reactive({
+      status: 'unvalidated' as FieldValidationStatus,
       focused: false,
-      validateFailed: false,
       validateMessage: '',
     });
 
@@ -181,7 +182,7 @@ export default defineComponent({
       rules.reduce(
         (promise, rule) =>
           promise.then(() => {
-            if (state.validateFailed) {
+            if (state.status === 'failed') {
               return;
             }
 
@@ -192,7 +193,7 @@ export default defineComponent({
             }
 
             if (!runSyncRule(value, rule)) {
-              state.validateFailed = true;
+              state.status = 'failed';
               state.validateMessage = getRuleMessage(value, rule);
               return;
             }
@@ -200,10 +201,10 @@ export default defineComponent({
             if (rule.validator) {
               return runRuleValidator(value, rule).then((result) => {
                 if (result && typeof result === 'string') {
-                  state.validateFailed = true;
+                  state.status = 'failed';
                   state.validateMessage = result;
                 } else if (result === false) {
-                  state.validateFailed = true;
+                  state.status = 'failed';
                   state.validateMessage = getRuleMessage(value, rule);
                 }
               });
@@ -213,10 +214,8 @@ export default defineComponent({
       );
 
     const resetValidation = () => {
-      if (state.validateFailed) {
+      state.status = 'unvalidated';
-        state.validateFailed = false;
       state.validateMessage = '';
-      }
     };
 
     const validate = (rules = props.rules) =>
@@ -224,12 +223,13 @@ export default defineComponent({
         resetValidation();
         if (rules) {
           runRules(rules).then(() => {
-            if (state.validateFailed) {
+            if (state.status === 'failed') {
               resolve({
                 name: props.name,
                 message: state.validateMessage,
               });
             } else {
+              state.status = 'passed';
               resolve();
             }
           });
@@ -352,7 +352,7 @@ export default defineComponent({
       if (typeof props.error === 'boolean') {
         return props.error;
       }
-      if (form && form.props.showError && state.validateFailed) {
+      if (form && form.props.showError && state.status === 'failed') {
         return true;
       }
     });
@@ -384,6 +384,8 @@ export default defineComponent({
 
     const getInputId = () => props.id || `${id}-input`;
 
+    const getValidationStatus = () => state.status;
+
     const renderInput = () => {
       const controlClass = bem('control', [
         getProp('inputAlign'),
@@ -531,6 +533,7 @@ export default defineComponent({
       validate,
       formValue,
       resetValidation,
+      getValidationStatus,
     });
 
     provide(CUSTOM_FIELD_INJECTION_KEY, {

packages/vant/src/field/README.md

@@ -327,6 +327,7 @@ import type {
   FieldValidateError,
   FieldAutosizeConfig,
   FieldValidateTrigger,
+  FieldValidationStatus,
 } from 'vant';
 ```
 

packages/vant/src/field/README.zh-CN.md

@@ -346,6 +346,7 @@ import type {
   FieldValidateError,
   FieldAutosizeConfig,
   FieldValidateTrigger,
+  FieldValidationStatus,
 } from 'vant';
 ```
 

packages/vant/src/field/index.ts

@@ -17,6 +17,7 @@ export type {
   FieldValidateError,
   FieldAutosizeConfig,
   FieldValidateTrigger,
+  FieldValidationStatus,
 } from './types';
 
 declare module 'vue' {

packages/vant/src/field/types.ts

@@ -66,6 +66,8 @@ export type FieldRule = {
   formatter?: FiledRuleFormatter;
 };
 
+export type FieldValidationStatus = 'passed' | 'failed' | 'unvalidated';
+
 // Shared props of Field and Form
 export type FieldFormSharedProps =
   | 'colon'
@@ -83,6 +85,7 @@ export type FieldExpose = {
     rules?: FieldRule[] | undefined
   ) => Promise<void | FieldValidateError>;
   resetValidation: () => void;
+  getValidationStatus: () => FieldValidationStatus;
   /** @private */
   formValue: ComputedRef<unknown>;
 };

packages/vant/src/form/Form.tsx

@@ -18,6 +18,7 @@ import type {
   FieldTextAlign,
   FieldValidateError,
   FieldValidateTrigger,
+  FieldValidationStatus,
 } from '../field/types';
 import type { FormExpose } from './types';
 
@@ -141,6 +142,12 @@ export default defineComponent({
       });
     };
 
+    const getValidationStatus = () =>
+      children.reduce<Record<string, FieldValidationStatus>>((form, field) => {
+        form[field.name] = field.getValidationStatus();
+        return form;
+      }, {});
+
     const scrollToField = (
       name: string,
       options?: boolean | ScrollIntoViewOptions
@@ -186,6 +193,7 @@ export default defineComponent({
       getValues,
       scrollToField,
       resetValidation,
+      getValidationStatus,
     });
 
     return () => (

packages/vant/src/form/README.md

@@ -540,9 +540,10 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Form i
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
 | submit | Submit form | - | - |
-| validate | Validate form | _name?: string \| string[]_ | _Promise_ |
 | getValues `v3.4.8` | Get current form values | - | _Record<string, unknown>_ |
+| validate | Validate form | _name?: string \| string[]_ | _Promise\<void\>_ |
 | resetValidation | Reset validation | _name?: string \| string[]_ | - |
+| getValidationStatus `v3.5.0` | Get validation status of all fields，status can be `passed`、`failed`、`unvalidated` | - | _Record\<string, FieldValidationStatus\>_ |
 | scrollToField | Scroll to field | _name: string, alignToTop: boolean_ | - |
 
 ### Types

packages/vant/src/form/README.zh-CN.md

@@ -578,9 +578,10 @@ export default {
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | submit | 提交表单，与点击提交按钮的效果等价 | - | - |
-| validate | 验证表单，支持传入 `name` 来验证单个或部分表单项 | _name?: string \| string[]_ | _Promise_ |
 | getValues `v3.4.8` | 获取所有表单项当前的值 | - | _Record<string, unknown>_ |
-| resetValidation | 重置表单项的验证提示，支持传入 `name` 来重置单个或部分表单项 | _name?: string \| string[]_ | - |
+| validate | 验证表单，支持传入一个或多个 `name` 来验证单个或部分表单项，不传入 `name` 时，会验证所有表单项 | _name?: string \| string[]_ | _Promise\<void\>_ |
+| resetValidation | 重置表单项的验证提示，支持传入一个或多个 `name` 来重置单个或部分表单项，不传入 `name` 时，会重置所有表单项 | _name?: string \| string[]_ | - |
+| getValidationStatus `v3.5.0` | 获取所有表单项的校验状态，状态包括 `passed`、`failed`、`unvalidated` | - | _Record\<string, FieldValidationStatus\>_ |
 | scrollToField | 滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部 | _name: string, alignToTop: boolean_ | - |
 
 ### 类型定义

packages/vant/src/form/test/methods.spec.tsx

@@ -153,3 +153,37 @@ test('getValues method should return all current values', () => {
 
   expect(formRef.value?.getValues()).toEqual({ A: '123', B: '456' });
 });
+
+test('getValidationStatus method should the status of all fields', async () => {
+  const formRef = ref<FormInstance>();
+  const rules = getSimpleRules();
+  mount({
+    render() {
+      return (
+        <Form ref={formRef}>
+          <Field name="A" rules={rules.rulesA} modelValue="123" />
+          <Field name="B" rules={rules.rulesB} modelValue="456" />
+        </Form>
+      );
+    },
+  });
+
+  expect(formRef.value?.getValidationStatus()).toEqual({
+    A: 'unvalidated',
+    B: 'unvalidated',
+  });
+
+  await formRef.value?.validate();
+
+  expect(formRef.value?.getValidationStatus()).toEqual({
+    A: 'passed',
+    B: 'passed',
+  });
+
+  formRef.value?.resetValidation();
+
+  expect(formRef.value?.getValidationStatus()).toEqual({
+    A: 'unvalidated',
+    B: 'unvalidated',
+  });
+});

packages/vant/src/form/types.ts

@@ -1,5 +1,6 @@
 import type { ComponentPublicInstance } from 'vue';
 import type { FormProps } from './Form';
+import type { FieldValidationStatus } from '../field';
 
 export type FormExpose = {
   submit: () => void;
@@ -10,6 +11,7 @@ export type FormExpose = {
     options?: boolean | ScrollIntoViewOptions | undefined
   ) => void;
   resetValidation: (name?: string | string[] | undefined) => void;
+  getValidationStatus: () => Record<string, FieldValidationStatus>;
 };
 
 export type FormProvide = {