From e715848c900d5952fb2a3e759aa13732cc7c5d28 Mon Sep 17 00:00:00 2001 From: hetech Date: Tue, 6 Nov 2018 18:52:54 +0800 Subject: [PATCH] Form: validateField accepts an array of field names (#13319) --- examples/docs/en-US/form.md | 4 ++-- examples/docs/es/form.md | 4 ++-- examples/docs/zh-CN/form.md | 4 ++-- packages/form/src/form.vue | 15 ++++++++++----- types/form.d.ts | 8 ++++---- 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index 7fd013c72..5c653211a 100644 --- a/examples/docs/en-US/form.md +++ b/examples/docs/en-US/form.md @@ -851,9 +851,9 @@ All components in a Form inherit their `size` attribute from that Form. Similarl | Method | Description | Parameters | | ---- | ---- | ---- | | validate | validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted | Function(callback: Function(boolean, object)) | -| validateField | validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) | +| validateField | validate one or serveral form items | Function(props: string | array, callback: Function(errorMessage: string)) | | resetFields | reset all the fields and remove validation result | — | -| clearValidate | clear validation message for certain fields. The parameter is an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: array) +| clearValidate | clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string | array) | ### Form Events | Event Name | Description | Parameters | diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md index 23701e677..bbb4dcd24 100644 --- a/examples/docs/es/form.md +++ b/examples/docs/es/form.md @@ -865,9 +865,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim | Metodo | Descripción | Parametros | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | validate | el método para validar todo el formulario. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) | -| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) | +| clearValidate | clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When fields' validation messages will be cleared | Function(prop: string, callback: Function(errorMessage: string)) | | resetFields | restablece todos los campos y elimina el resultado de validación | — | -| clearValidate | limpieza de validación para determinados campos. El parámetro es un conjunto de nombres de propiedad de los elementos del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: array) | +| clearValidate | clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string | array) | ### Form Events diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index b237bea24..c264bd2cc 100644 --- a/examples/docs/zh-CN/form.md +++ b/examples/docs/zh-CN/form.md @@ -839,9 +839,9 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h | 方法名 | 说明 | 参数 |---------- |-------------- | -------------- | validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) -| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string)) +| validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string)) | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — -| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性组成的数组，如不传则移除整个表单的校验结果 | Function(props: array) +| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array | string) ### Form Events | 事件名称 | 说明 | 回调参数 | diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue index b55501b4c..e2f5b87c7 100644 --- a/packages/form/src/form.vue +++ b/packages/form/src/form.vue @@ -75,7 +75,6 @@ methods: { resetFields() { if (!this.model) { - process.env.NODE_ENV !== 'production' && console.warn('[Element Warn][Form]model is required for resetFields to work.'); return; } @@ -132,11 +131,17 @@ return promise; } }, - validateField(prop, cb) { - let field = this.fields.filter(field => field.prop === prop)[0]; - if (!field) { throw new Error('must call validateField with valid prop string!'); } + validateField(props, cb) { + props = [].concat(props); + const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1); + if (!fields.length) { + confirm.warn('[Element Warn]please pass correct props!'); + return; + } - field.validate('', cb); + fields.forEach(field => { + field.validate('', cb); + }); } } }; diff --git a/types/form.d.ts b/types/form.d.ts index c0e35eae6..038214e5f 100644 --- a/types/form.d.ts +++ b/types/form.d.ts @@ -67,16 +67,16 @@ export declare class ElForm extends ElementUIComponent { validate (callback: ValidateCallback): void validate (): Promise /** - * Validate a certain form item + * Validate certain form items * - * @param prop The property of `model` that is going to validate + * @param props The property of `model` or array of prop which is going to validate * @param callback A callback to tell the field validation result */ - validateField (prop: string, callback: ValidateFieldCallback): void + validateField (props: string | string[], callback: ValidateFieldCallback): void /** reset all the fields and remove validation result */ resetFields (): void /** clear validation message for certain fields */ - clearValidate (props?: string[]): void + clearValidate (props?: string | string[]): void }