diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 83b22babf..e48a3c999 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -16,6 +16,7 @@ import { isDef, extend, addUnit, + toArray, FORM_KEY, numericProp, unknownProp, @@ -239,12 +240,12 @@ export default defineComponent({ const validateWithTrigger = (trigger: FieldValidateTrigger) => { if (form && props.rules) { - const defaultTrigger = form.props.validateTrigger === trigger; + const { validateTrigger } = form.props; + const defaultTrigger = toArray(validateTrigger).includes(trigger); const rules = props.rules.filter((rule) => { if (rule.trigger) { - return rule.trigger === trigger; + return toArray(rule.trigger).includes(trigger); } - return defaultTrigger; }); diff --git a/packages/vant/src/field/types.ts b/packages/vant/src/field/types.ts index 730de9b8f..c60169f7c 100644 --- a/packages/vant/src/field/types.ts +++ b/packages/vant/src/field/types.ts @@ -59,7 +59,7 @@ export type FiledRuleFormatter = (value: any, rule: FieldRule) => string; export type FieldRule = { pattern?: RegExp; - trigger?: FieldValidateTrigger; + trigger?: FieldValidateTrigger | FieldValidateTrigger[]; message?: FieldRuleMessage; required?: boolean; validator?: FieldRuleValidator; diff --git a/packages/vant/src/form/Form.tsx b/packages/vant/src/form/Form.tsx index a2d90c6f0..a7857b0b6 100644 --- a/packages/vant/src/form/Form.tsx +++ b/packages/vant/src/form/Form.tsx @@ -6,7 +6,6 @@ import { truthProp, numericProp, preventDefault, - makeStringProp, createNamespace, } from '../utils'; @@ -35,9 +34,14 @@ const formProps = { scrollToError: Boolean, validateFirst: Boolean, submitOnEnter: truthProp, - validateTrigger: makeStringProp('onBlur'), showErrorMessage: truthProp, errorMessageAlign: String as PropType, + validateTrigger: { + type: [String, Array] as PropType< + FieldValidateTrigger | FieldValidateTrigger[] + >, + default: 'onBlur', + }, }; export type FormProps = ExtractPropTypes; diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md index 9c2642ef6..e5d0b9686 100644 --- a/packages/vant/src/form/README.md +++ b/packages/vant/src/form/README.md @@ -497,7 +497,7 @@ export default { | label-align | Field label align, can be set to `center` `right` | _string_ | `left` | | input-align | Field input align, can be set to `center` `right` | _string_ | `left` | | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` | -| validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit` | _string_ | `onBlur` | +| validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit`, supports using array to set multiple values | _string \| string[]_ | `onBlur` | | colon | Whether to display colon after label | _boolean_ | `false` | | disabled | Whether to disable form | _boolean_ | `false` | | readonly | Whether to be readonly | _boolean_ | `false` | diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index d0aa56c56..3b3c36d24 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -529,7 +529,7 @@ export default { | label-align | 表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` | | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` | | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` | -| validate-trigger | 表单校验触发时机，可选值为 `onChange`、`onSubmit`，详见下表 | _string_ | `onBlur` | +| validate-trigger | 表单校验触发时机，可选值为 `onChange`、`onSubmit`，支持通过数组同时设置多个值，具体用法见下方表格 | _string \| string[]_ | `onBlur` | | colon | 是否在 label 后面添加冒号 | _boolean_ | `false` | | disabled | 是否禁用表单中的所有输入框 | _boolean_ | `false` | | readonly | 是否将表单中的所有输入框设置为只读状态 | _boolean_ | `false` | diff --git a/packages/vant/src/form/test/props.spec.tsx b/packages/vant/src/form/test/props.spec.tsx index 046515235..1c4be2535 100644 --- a/packages/vant/src/form/test/props.spec.tsx +++ b/packages/vant/src/form/test/props.spec.tsx @@ -293,6 +293,43 @@ test('should trigger validate after inputting when validate-trigger prop is onCh expect(wrapper.find('.van-field__error-message').exists).toBeTruthy(); }); +test('should trigger validate correctly when validate-trigger prop is array', async () => { + const wrapper = mount({ + data() { + return { + ...getSimpleRules(), + value: '', + }; + }, + render() { + return ( +
+ + + ); + }, + }); + + const input = wrapper.find('input'); + + await input.trigger('input'); + expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy(); + + await input.trigger('blur'); + expect(wrapper.find('.van-field__error-message').exists()).toBeTruthy(); + + await wrapper.setData({ value: '1' }); + expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy(); + + await wrapper.setData({ value: '' }); + expect(wrapper.find('.van-field__error-message').exists).toBeTruthy(); +}); + test('should allow to custom trigger in rules', async () => { const rulesA = [ { diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx index 708a8e4e9..00effea10 100644 --- a/packages/vant/src/uploader/Uploader.tsx +++ b/packages/vant/src/uploader/Uploader.tsx @@ -11,6 +11,7 @@ import { import { pick, extend, + toArray, isPromise, truthProp, Interceptor, @@ -24,7 +25,6 @@ import { import { bem, name, - toArray, isOversize, filterFiles, isImageFile, diff --git a/packages/vant/src/uploader/utils.ts b/packages/vant/src/uploader/utils.ts index 35aa1db3a..0db08b5fe 100644 --- a/packages/vant/src/uploader/utils.ts +++ b/packages/vant/src/uploader/utils.ts @@ -1,4 +1,4 @@ -import { createNamespace, isFunction } from '../utils'; +import { toArray, createNamespace, isFunction } from '../utils'; import type { UploaderMaxSize, UploaderResultType, @@ -9,9 +9,6 @@ const [name, bem, t] = createNamespace('uploader'); export { name, bem, t }; -export const toArray = (item: T | T[]): T[] => - Array.isArray(item) ? item : [item]; - export function readFileContent(file: File, resultType: UploaderResultType) { return new Promise((resolve) => { if (resultType === 'file') { diff --git a/packages/vant/src/utils/basic.ts b/packages/vant/src/utils/basic.ts index c07a2aeaf..51093d73e 100644 --- a/packages/vant/src/utils/basic.ts +++ b/packages/vant/src/utils/basic.ts @@ -36,3 +36,6 @@ export function pick( return ret; }, {} as Writeable>); } + +export const toArray = (item: T | T[]): T[] => + Array.isArray(item) ? item : [item];