diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index d1349e78d..0465eba02 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -128,6 +128,8 @@ export default defineComponent({ 'clear', 'keypress', 'click-input', + 'end-validate', + 'start-validate', 'click-left-icon', 'click-right-icon', 'update:modelValue', @@ -218,19 +220,24 @@ export default defineComponent({ state.validateMessage = ''; }; + const endValidate = () => emit('end-validate', { status: state.status }); + const validate = (rules = props.rules) => new Promise((resolve) => { resetValidation(); if (rules) { + emit('start-validate'); runRules(rules).then(() => { if (state.status === 'failed') { resolve({ name: props.name, message: state.validateMessage, }); + endValidate(); } else { state.status = 'passed'; resolve(); + endValidate(); } }); } else { diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index 4da00042d..eb978af67 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -298,6 +298,8 @@ Use `input-align` prop to align the input value. | click-input | Emitted when the input is clicked | _event: MouseEvent_ | | click-left-icon | Emitted when the left icon is clicked | _event: MouseEvent_ | | click-right-icon | Emitted when the right icon is clicked | _event: MouseEvent_ | +| start-validate `v3.5.1` | Emitted when start validation | - | +| end-validate `v3.5.1` | Emitted when end validation | _{ status: string }_ | ### Methods diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index b91a1b27d..f9a572d56 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -307,16 +307,18 @@ export default { ### Events -| 事件 | 说明 | 回调参数 | -| ------------------ | -------------------- | ------------------------------ | +| 事件 | 说明 | 回调参数 | +| --- | --- | --- | | update:model-value | 输入框内容变化时触发 | _value: string (当前输入的值)_ | -| focus | 输入框获得焦点时触发 | _event: Event_ | -| blur | 输入框失去焦点时触发 | _event: Event_ | -| clear | 点击清除按钮时触发 | _event: MouseEvent_ | -| click | 点击组件时触发 | _event: MouseEvent_ | -| click-input | 点击输入区域时触发 | _event: MouseEvent_ | -| click-left-icon | 点击左侧图标时触发 | _event: MouseEvent_ | -| click-right-icon | 点击右侧图标时触发 | _event: MouseEvent_ | +| focus | 输入框获得焦点时触发 | _event: Event_ | +| blur | 输入框失去焦点时触发 | _event: Event_ | +| clear | 点击清除按钮时触发 | _event: MouseEvent_ | +| click | 点击组件时触发 | _event: MouseEvent_ | +| click-input | 点击输入区域时触发 | _event: MouseEvent_ | +| click-left-icon | 点击左侧图标时触发 | _event: MouseEvent_ | +| click-right-icon | 点击右侧图标时触发 | _event: MouseEvent_ | +| start-validate `v3.5.1` | 开始表单校验时触发 | - | +| end-validate `v3.5.1` | 结束表单校验时触发 | _{ status: string }_ | ### 方法 diff --git a/packages/vant/src/form/test/events.spec.tsx b/packages/vant/src/form/test/events.spec.tsx index 221b537af..c77dd4ad8 100644 --- a/packages/vant/src/form/test/events.spec.tsx +++ b/packages/vant/src/form/test/events.spec.tsx @@ -1,4 +1,4 @@ -import { mount } from '../../../test'; +import { later, mount } from '../../../test'; import { submitForm, mountSimpleRulesForm } from './shared'; import { Form } from '..'; import { Field } from '../../field'; @@ -64,3 +64,55 @@ test('should emit failed event correctly when rule message is empty', async () = values: { A: '' }, }); }); + +test('Field should emit start-validate event when validation start', async () => { + const onStart = jest.fn(); + const wrapper = mount({ + render() { + return ( +
+ + + ); + }, + }); + + await submitForm(wrapper); + expect(onStart).toHaveBeenCalledTimes(1); +}); + +test('Field should emit end-validate event when validation end', async () => { + const onEnd = jest.fn(); + const rules = [ + { + validator: () => + new Promise((resolve) => { + setTimeout(() => resolve(true), 10); + }), + }, + ]; + const wrapper = mount({ + render() { + return ( +
+ + + ); + }, + }); + + await submitForm(wrapper); + expect(onEnd).toHaveBeenCalledTimes(0); + await later(50); + expect(onEnd).toHaveBeenCalledTimes(1); +});