feat(Form): support valdiate multiple names (#7810)

src/form/README.md

@@ -472,7 +472,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
 | submit | Submit form | - | - |
-| validate | Validate form | _name?: string_ | _Promise_ |
+| validate | Validate form | _name?: string \| string[]_ | _Promise_ |
 | resetValidation | Reset validation | _name?: string_ | - |
 | scrollToField `v2.8.3` | Scroll to field | _name: string, alignToTop: boolean_ | - |
 

src/form/README.zh-CN.md

@@ -482,7 +482,7 @@ export default {
 | message `v2.5.3` | 错误提示文案 | _string \| (value, rule) => string_ |
 | validator `v2.5.3` | 通过函数进行校验 | _(value, rule) => boolean \| Promise_ |
 | pattern `v2.5.3` | 通过正则表达式进行校验 | _RegExp_ |
-| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | _string_ |
+| trigger `v2.5.2` | 本项规则的触发时机，可选值为 `onChange`、`onBlur` | _string_ |
 | formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ |
 
 ### validate-trigger  可选值
@@ -509,8 +509,8 @@ export default {
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | submit | 提交表单，与点击提交按钮的效果等价 | - | - |
-| validate | 验证表单，支持传入`name`来验证单个表单项 | _name?: string_ | _Promise_ |
+| validate | 验证表单，支持传入 `name` 来验证单个或多个表单项 | _name?: string \| string[]_ | _Promise_ |
-| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | _name?: string_ | - |
+| resetValidation | 重置表单项的验证提示，支持传入 `name` 来重置单个表单项 | _name?: string_ | - |
 | scrollToField `v2.8.3` | 滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部 | _name: string, alignToTop: boolean_ | - |
 
 ### Slots

src/form/index.js

@@ -43,11 +43,19 @@ export default createComponent({
   },
 
   methods: {
-    validateSeq() {
+    getFieldsByNames(names) {
+      if (names) {
+        return this.fields.filter((field) => names.indexOf(field.name) !== -1);
+      }
+      return this.fields;
+    },
+
+    validateSeq(names) {
       return new Promise((resolve, reject) => {
         const errors = [];
+        const fields = this.getFieldsByNames(names);
 
-        this.fields
+        fields
           .reduce(
             (promise, field) =>
               promise.then(() => {
@@ -71,28 +79,29 @@ export default createComponent({
       });
     },
 
-    validateAll() {
+    validateFields(names) {
       return new Promise((resolve, reject) => {
-        Promise.all(this.fields.map((item) => item.validate())).then(
+        const fields = this.getFieldsByNames(names);
-          (errors) => {
+        Promise.all(fields.map((item) => item.validate())).then((errors) => {
-            errors = errors.filter((item) => item);
+          errors = errors.filter((item) => item);
 
-            if (errors.length) {
+          if (errors.length) {
-              reject(errors);
+            reject(errors);
-            } else {
+          } else {
-              resolve();
+            resolve();
-            }
           }
-        );
+        });
       });
     },
 
     // @exposed-api
     validate(name) {
-      if (name) {
+      if (name && !Array.isArray(name)) {
         return this.validateField(name);
       }
-      return this.validateFirst ? this.validateSeq() : this.validateAll();
+      return this.validateFirst
+        ? this.validateSeq(name)
+        : this.validateFields(name);
     },
 
     validateField(name) {

src/form/test/methods.spec.js

@@ -37,7 +37,7 @@ test('validate method - validate all fields', (done) => {
   });
 });
 
-test('validate method - validate one field and passed', (done) => {
+test('validate method - validate one field and failed', (done) => {
   mountSimpleRulesForm({
     mounted() {
       this.$refs.form.validate('A').catch((err) => {
@@ -48,7 +48,7 @@ test('validate method - validate one field and passed', (done) => {
   });
 });
 
-test('validate method - validate one field and failed', (done) => {
+test('validate method - validate one field and passed', (done) => {
   mountForm({
     template: `	
       <van-form ref="form" @failed="onFailed">	
@@ -64,6 +64,25 @@ test('validate method - validate one field and failed', (done) => {
   });
 });
 
+test('validate method - validate two fields and failed', (done) => {
+  mountForm({
+    template: `	
+      <van-form ref="form" @failed="onFailed">	
+        <van-field name="A" :rules="rulesA" value="123" />	
+        <van-field name="B" :rules="rulesB" value="" />	
+        <van-button native-type="submit" />	
+      </van-form>	
+    `,
+    data: getSimpleRules,
+    mounted() {
+      this.$refs.form.validate(['A', 'B']).catch((error) => {
+        expect(error).toEqual([{ message: 'B failed', name: 'B' }]);
+        done();
+      });
+    },
+  });
+});
+
 test('validate method - unexisted name', (done) => {
   mountSimpleRulesForm({
     mounted() {

types/form.d.ts

@@ -3,7 +3,7 @@ import { VanComponent } from './component';
 export class Form extends VanComponent {
   submit(): void;
 
-  validate(name?: string): Promise<void>;
+  validate(name?: string | string[]): Promise<void>;
 
   resetValidation(name?: string): void;