From d92d29c885e3130b79ed5f9b18e0fdaf9752cc3b Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 24 Dec 2020 20:11:22 +0800 Subject: [PATCH] feat(Form): support valdiate multiple names (#7810) --- src/form/README.md | 2 +- src/form/README.zh-CN.md | 6 +++--- src/form/index.js | 37 ++++++++++++++++++++++------------- src/form/test/methods.spec.js | 23 ++++++++++++++++++++-- types/form.d.ts | 2 +- 5 files changed, 49 insertions(+), 21 deletions(-) diff --git a/src/form/README.md b/src/form/README.md index bbca7e1c9..e71665ea1 100644 --- a/src/form/README.md +++ b/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_ | - | diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index b89b80527..2285aa97f 100644 --- a/src/form/README.zh-CN.md +++ b/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_ | -| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | _name?: string_ | - | +| validate | 验证表单，支持传入 `name` 来验证单个或多个表单项 | _name?: string \| string[]_ | _Promise_ | +| resetValidation | 重置表单项的验证提示，支持传入 `name` 来重置单个表单项 | _name?: string_ | - | | scrollToField `v2.8.3` | 滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部 | _name: string, alignToTop: boolean_ | - | ### Slots diff --git a/src/form/index.js b/src/form/index.js index 0a73f1858..363de6eda 100644 --- a/src/form/index.js +++ b/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( - (errors) => { - errors = errors.filter((item) => item); + const fields = this.getFieldsByNames(names); + Promise.all(fields.map((item) => item.validate())).then((errors) => { + errors = errors.filter((item) => item); - if (errors.length) { - reject(errors); - } else { - resolve(); - } + if (errors.length) { + reject(errors); + } else { + 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) { diff --git a/src/form/test/methods.spec.js b/src/form/test/methods.spec.js index 5acb4549b..1e58b9937 100644 --- a/src/form/test/methods.spec.js +++ b/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: ` @@ -64,6 +64,25 @@ test('validate method - validate one field and failed', (done) => { }); }); +test('validate method - validate two fields and failed', (done) => { + mountForm({ + template: ` + + + + + + `, + 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() { diff --git a/types/form.d.ts b/types/form.d.ts index 3f11ee7fd..2584f24a8 100644 --- a/types/form.d.ts +++ b/types/form.d.ts @@ -3,7 +3,7 @@ import { VanComponent } from './component'; export class Form extends VanComponent { submit(): void; - validate(name?: string): Promise; + validate(name?: string | string[]): Promise; resetValidation(name?: string): void;