Form: add the first verification failure immediate callback

examples/docs/en-US/form.md

@@ -602,6 +602,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | validate-on-rule-change  | whether to trigger validation when the `rules` prop is changed | boolean | — | true |
 | size  | control the size of components in this form | string | medium / small / mini | — |
 | disabled | whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' `disabled` prop | boolean | — | false |
+| immediateValid | `form.validate()`The method triggers a callback immediately when the first failed form item is verified or the promise is set to reject | boolean | — | false |
 
 ### Form Methods
 

examples/docs/es/form.md

@@ -616,6 +616,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | validate-on-rule-change | si se dispara la validación cuando el prop `rules` cambia | boolean | —                     | true        |
 | size                    | el tamaño de los componentes en este form | string  | medium / small / mini | —           |
 | disabled                | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | —                     | false       |
+| immediateValid | `form.validate()`The method triggers a callback immediately when the first failed form item is verified or the promise is set to reject | boolean | — | false |
 
 ### Form Métodos
 

examples/docs/fr-FR/form.md

@@ -601,6 +601,7 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
 | validate-on-rule-change  | Si la validation doit se déclencher lorsque `rules` est modifié. | boolean | — | true |
 | size  | Contrôle la taille des champs du formulaire. | string | medium / small / mini | — |
 | disabled | Si tout les champs du formulaire doivent être désactivés. Si `true`, il ne peut pas être modifié par l'attribut `disabled` des enfants. | boolean | — | false |
+| immediateValid | `form.validate()`La méthode déclenche un rappel immédiatement lorsque le premier élément de formulaire ayant échoué est vérifié ou que la promesse est définie sur rejeter | boolean | — | false |
 
 ### Méthodes de Form
 

examples/docs/zh-CN/form.md

@@ -580,6 +580,74 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 ```
 :::
 
+### 立即返回表单校验结果
+
+:::demo 在校验到第一个表单项失败时立即执行`callback`
+```html
+<el-form :model="immedidateForm" ref="immedidateForm" immediateValid>
+  <el-form-item
+    label="姓名"
+    prop="name"
+    :rules="[
+      { required: true, message: '姓名不能为空'},
+      { validator: asyncValid, trigger: ['blur']}
+    ]"
+  >
+    <el-input v-model="immedidateForm.name" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item 
+    label="年龄"
+    prop="age" 
+    :rules="[{required: true, message: '年龄不能为空' }]">
+    <el-input v-model="immedidateForm.age" autocomplete="off" />
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('immedidateForm')" :loading="submitting">提交</el-button>
+    <el-button @click="resetForm('immedidateForm')">重置</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        submitting: false,
+        immedidateForm: {
+          name: '',
+          age: ''
+        }
+      };
+    },
+    methods: {
+      asyncValid(rule, value, callback) {
+        setTimeout(() => {
+          if(value === "element") {
+            callback("姓名不能重复");
+          }else {
+            callback()
+          }
+        }, 2000)
+      },
+      submitForm(formName) {
+        this.submitting = true;
+        this.$refs[formName].validate((valid) => {
+          console.log('immediate callback exec!');
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+          }
+          this.submitting = false;
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Form Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -597,6 +665,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | validate-on-rule-change  | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | — | true |
 | size  | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
 | disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false |
+| immediateValid | `form.validate()`方法在校验到第一个失败的表单项时立即触发回调或者 promise 置为 reject | boolean | — | false |
 
 ### Form Methods
 

packages/form/src/form.vue

@@ -45,6 +45,10 @@
       hideRequiredAsterisk: {
         type: Boolean,
         default: false
+      },
+      immediateValid: {
+        type: Boolean,
+        default: false
       }
     },
     watch: {
@@ -124,6 +128,7 @@
 
         let valid = true;
         let count = 0;
+        let errorCount = 0;
         // 如果需要验证的fields为空，调用验证时立刻返回callback
         if (this.fields.length === 0 && callback) {
           callback(true);
@@ -133,8 +138,14 @@
           field.validate('', (message, field) => {
             if (message) {
               valid = false;
+              errorCount++;
             }
             invalidFields = objectAssign({}, invalidFields, field);
+            // 校验到第一个错误，立即触发表单校验失败。在异步校验的时候会出现等待一个异步校验结果，可能此时其他表单项已经校验失败了，但是会等待这个异步的结果一起返回
+            if (this.immediateValid && !valid && errorCount === 1) {
+              callback(false, invalidFields);
+              return;
+            }
             if (typeof callback === 'function' && ++count === this.fields.length) {
               callback(valid, invalidFields);
             }