fix(form): add success validation type to setValidateMessage

v_sshuairen · v_sshuairen · commit 00e2d4c19c23 · 2025-11-10T15:28:29.000+08:00
diff --git a/packages/components/common.ts b/packages/components/common.ts
@@ -41,9 +41,6 @@ export interface UploadDisplayDragEvents {
 
 export type ImageEvent = Event;
 
-/**
- * 通用全局类型
- * */
 export type PlainObject = { [key: string]: any };
 
 export type OptionData = {
@@ -63,6 +60,9 @@ export type TreeOptionData<T = string | number> = {
   content?: string | TNode;
 } & PlainObject;
 
+/**
+ * 通用全局类型
+ * */
 export type SizeEnum = 'small' | 'medium' | 'large';
 
 export type ShapeEnum = 'circle' | 'round';
diff --git a/packages/components/form/form-item.tsx b/packages/components/form/form-item.tsx
@@ -1,3 +1,19 @@
+import {
+  cloneDeep,
+  isArray,
+  isBoolean,
+  isNil,
+  isNumber,
+  isString,
+  get as lodashGet,
+  set as lodashSet,
+} from 'lodash-es';
+import {
+  GlobalIconType,
+  CheckCircleFilledIcon as TdCheckCircleFilledIcon,
+  CloseCircleFilledIcon as TdCloseCircleFilledIcon,
+  ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
+} from 'tdesign-icons-vue-next';
 import {
   computed,
   defineComponent,
@@ -12,34 +28,7 @@ import {
   VNode,
   watch,
 } from 'vue';
-import {
-  CheckCircleFilledIcon as TdCheckCircleFilledIcon,
-  CloseCircleFilledIcon as TdCloseCircleFilledIcon,
-  ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
-  GlobalIconType,
-} from 'tdesign-icons-vue-next';
-import {
-  isNil,
-  isArray,
-  isNumber,
-  isString,
-  isBoolean,
-  cloneDeep,
-  get as lodashGet,
-  set as lodashSet,
-} from 'lodash-es';
 
-import { validate } from './utils/form-model';
-import {
-  AllValidateResult,
-  Data,
-  FormErrorMessage,
-  FormItemValidateMessage,
-  FormRule,
-  ValidateTriggerType,
-  ValueType,
-} from './type';
-import props from './form-item-props';
 import {
   AnalysisValidateResult,
   ErrorListType,
@@ -50,10 +39,21 @@ import {
   useCLASSNAMES,
   ValidateStatus,
 } from './consts';
+import props from './form-item-props';
+import {
+  AllValidateResult,
+  Data,
+  FormErrorMessage,
+  FormItemValidateMessage,
+  FormRule,
+  ValidateTriggerType,
+  ValueType,
+} from './type';
+import { validate } from './utils/form-model';
 
-import { useConfig, useTNodeJSX, useGlobalIcon, usePrefixClass } from '@tdesign/shared-hooks';
-import { getFormItemClassName } from './utils';
 import { template } from '@tdesign/common-js/utils/stringTemplate';
+import { useConfig, useGlobalIcon, usePrefixClass, useTNodeJSX } from '@tdesign/shared-hooks';
+import { getFormItemClassName } from './utils';
 
 export type FormItemValidateResult<T extends Data = Data> = { [key in keyof T]: boolean | AllValidateResult[] };
 
@@ -164,7 +164,7 @@ export default defineComponent({
     /** Suffix Icon END */
 
     /** Content Style */
-    const errorClasses = computed(() => {
+    const statusClasses = computed(() => {
       if (!showErrorMessage.value) return '';
       if (verifyStatus.value === ValidateStatus.SUCCESS) {
         return props.successBorder
@@ -176,7 +176,7 @@ export default defineComponent({
       if (props.status) return statusClass.value;
       return type === 'error' ? CLASS_NAMES.value.error : CLASS_NAMES.value.warning;
     });
-    const contentClasses = computed(() => [CLASS_NAMES.value.controls, errorClasses.value]);
+    const contentClasses = computed(() => [CLASS_NAMES.value.controls, statusClasses.value]);
     const contentStyle = computed(() => {
       let contentStyle = {};
       if (labelWidth.value && labelAlign.value !== 'top') {
@@ -322,13 +322,28 @@ export default defineComponent({
     };
 
     const setValidateMessage = (validateMessage: FormItemValidateMessage[]) => {
-      if (!validateMessage && !isArray(validateMessage)) return;
+      if (!validateMessage || !isArray(validateMessage)) return;
+      errorList.value = [];
+      successList.value = [];
       if (validateMessage.length === 0) {
-        errorList.value = [];
         verifyStatus.value = ValidateStatus.SUCCESS;
+        return;
       }
-      errorList.value = validateMessage.map((item) => ({ ...item, result: false }));
-      verifyStatus.value = ValidateStatus.FAIL;
+      const errors = validateMessage.filter(
+        (item) => item.type === 'error' || item.type === 'warning',
+      ) as FormItemValidateMessage[];
+      const successes = validateMessage.filter((item) => item.type === 'success') as FormItemValidateMessage[];
+      errorList.value = errors.map((item) => ({
+        message: item.message,
+        type: item.type as 'error' | 'warning',
+        result: false,
+      }));
+      successList.value = successes.map((item) => ({
+        message: item.message,
+        type: item.type as 'success',
+        result: true,
+      }));
+      verifyStatus.value = errors.length > 0 ? ValidateStatus.FAIL : ValidateStatus.SUCCESS;
     };
 
     const value = computed<ValueType>(() => form?.data && lodashGet(form?.data, props.name));
diff --git a/packages/components/form/form.en-US.md b/packages/components/form/form.en-US.md
@@ -42,7 +42,7 @@ name | params | return | description
 -- | -- | -- | --
 clearValidate | `(fields?: Array<keyof FormData>)` | \- | required
 reset | `(params?: FormResetParams<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
-setValidateMessage | `(message: FormValidateMessage<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
+setValidateMessage | `(message: FormValidateMessage<FormData>)` | \- | required。Sets custom validation results, such as directly displaying remote validation messages. Note: This method must be called after the component is mounted. `FormData` refers to the generic type of form data。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error' \| 'success'; message: string }`<br/>
 submit | `(params?: { showErrorMessage?: boolean })` | \- | required
 validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
 validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `Promise<FormValidateResult<FormData>>` | required
diff --git a/packages/components/form/form.md b/packages/components/form/form.md
@@ -44,7 +44,7 @@ validate | `(result: ValidateResultContext<FormData>)` | 校验结束后触发
 -- | -- | -- | --
 clearValidate | `(fields?: Array<keyof FormData>)` | \- | 必需。清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])`
 reset | `(params?: FormResetParams<FormData>)` | \- | 必需。重置表单，表单里面没有重置按钮`<button type=\"reset\" />`时可以使用该方法，默认重置全部字段为空，该方法会触发 `reset` 事件。<br />如果表单属性 `resetType='empty'` 或者 `reset.type='empty'` 会重置为空；<br />如果表单属性 `resetType='initial'` 或者 `reset.type='initial'` 会重置为表单初始值。<br />`reset.fields` 用于设置具体重置哪些字段，示例：`reset({ type: 'initial', fields: ['name', 'age'] })`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
-setValidateMessage | `(message: FormValidateMessage<FormData>)` | \- | 必需。设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
+setValidateMessage | `(message: FormValidateMessage<FormData>)` | \- | 必需。设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error' \| 'success'; message: string }`<br/>
 submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表单，表单里面没有提交按钮`<button type=\"submit\" />`时可以使用该方法。`showErrorMessage` 表示是否在提交校验不通过时显示校验不通过的原因，默认显示。该方法会触发 `submit` 事件
 validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | 必需。校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。<br />【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
 validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `Promise<FormValidateResult<FormData>>` | 必需。纯净的校验函数，仅返回校验结果，不对组件进行任何操作。泛型 `FormData` 表示表单数据 TS 类型。参数和返回值含义同 `validate` 方法
diff --git a/packages/components/form/type.ts b/packages/components/form/type.ts
@@ -6,7 +6,7 @@
 
 import { IsEmailOptions } from 'validator/es/lib/isEmail';
 import { IsURLOptions } from 'validator/es/lib/isURL';
-import { TNode, FormResetEvent, FormSubmitEvent } from '../common';
+import { FormResetEvent, FormSubmitEvent, TNode } from '../common';
 
 export interface TdFormProps<FormData extends Data = Data> {
   /**
@@ -378,7 +378,7 @@ export interface FormResetParams<FormData> {
 export type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] };
 
 export interface FormItemValidateMessage {
-  type: 'warning' | 'error';
+  type: 'warning' | 'error' | 'success';
   message: string;
 }
 
