feat(Field): add start-validate and end-validate event (#10726)

youzan · Jun 18, 2022 · 6f94627 · 6f94627
1 parent 7ca4db9
commit 6f94627
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 10 deletions.
diff --git 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<FieldValidateError | void>((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
@@ -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
@@ -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
@@ -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 (
+        <Form>
+          <Field
+            name="A"
+            rules={[{ required: true }]}
+            modelValue="bar"
+            onStart-validate={onStart}
+          />
+        </Form>
+      );
+    },
+  });
+
+  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<boolean>((resolve) => {
+          setTimeout(() => resolve(true), 10);
+        }),
+    },
+  ];
+  const wrapper = mount({
+    render() {
+      return (
+        <Form>
+          <Field
+            name="A"
+            rules={rules}
+            modelValue="bar"
+            onEnd-validate={onEnd}
+          />
+        </Form>
+      );
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onEnd).toHaveBeenCalledTimes(0);
+  await later(50);
+  expect(onEnd).toHaveBeenCalledTimes(1);
+});