feat(Form): form rule support multi trigger (#3323)

* fix(TimePicker): fixed only support hh:mm format * fix(TimePicker): disabled position only is start * fix(Upload): fixed vue error on uploadPastedFiles is false * docs: add readonly in api * feat(Form): rule support array trigger
Tencent · Dec 3, 2024 · 223488f · 223488f
1 parent ae862af
commit 223488f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx
@@ -302,7 +302,16 @@ export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('
         allowSetValue: false,
       };
       // 过滤不需要校验的规则
-      result.rules = trigger === 'all' ? this.innerRules : this.innerRules.filter((item) => (item.trigger || 'change') === trigger);
+      result.rules = trigger === 'all'
+        ? this.innerRules
+        : this.innerRules.filter((item) => {
+          const { trigger: validateTrigger = 'change' } = item;
+          if (Array.isArray(validateTrigger)) {
+            return validateTrigger.includes(trigger);
+          }
+
+          return trigger === validateTrigger;
+        });
       if (this.innerRules.length && !result.rules.length) {
         return result;
       }

diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md
@@ -82,7 +82,7 @@ number | Boolean | - | \- | N
 pattern | Object | - | Typescript：`RegExp` | N
 required | Boolean | - | \- | N
 telnumber | Boolean | - | \- | N
-trigger | String | change | Typescript：`ValidateTriggerType` | N
+trigger | String | change | Typescript：`Exclude<ValidateTriggerType, 'all'> | Exclude<ValidateTriggerType, 'all'>[]` | N
 type | String | error | options: error/warning | N
 url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N
 validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N

diff --git a/src/form/form.md b/src/form/form.md
@@ -84,7 +84,7 @@ number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1
 pattern | Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp` | N
 required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N
 telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N
-trigger | String | change | 校验触发方式。TS 类型：`ValidateTriggerType` | N
+trigger | String | change | 校验触发方式。TS 类型：`Exclude<ValidateTriggerType, 'all'> | Exclude<ValidateTriggerType, 'all'>[]` | N
 type | String | error | 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warning | N
 url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N
 validator | Function | - | 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N

diff --git a/src/form/type.ts b/src/form/type.ts
@@ -246,7 +246,7 @@ export interface FormRule {
    * 校验触发方式
    * @default change
    */
-  trigger?: ValidateTriggerType;
+  trigger?: Exclude<ValidateTriggerType, 'all'> | Exclude<ValidateTriggerType, 'all'>[];
   /**
    * 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种
    * @default error