Skip to content

Commit 096a2d4

Browse files
committed
Form: validateField accepts an array of field names
1 parent 717b348 commit 096a2d4

File tree

5 files changed

+20
-15
lines changed

5 files changed

+20
-15
lines changed

examples/docs/en-US/form.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -851,9 +851,9 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
851851
| Method | Description | Parameters |
852852
| ---- | ---- | ---- |
853853
| 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)) |
854-
| validateField | validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
854+
| validateField | validate one or serveral form items | Function(props: string | array, callback: Function(errorMessage: string)) |
855855
| resetFields | reset all the fields and remove validation result ||
856-
| 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)
856+
| 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) |
857857

858858
### Form Events
859859
| Event Name | Description | Parameters |

examples/docs/es/form.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -865,9 +865,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
865865
| Metodo | Descripción | Parametros |
866866
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
867867
| 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)) |
868-
| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
868+
| 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)) |
869869
| resetFields | restablece todos los campos y elimina el resultado de validación ||
870-
| 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) |
870+
| 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) |
871871

872872
### Form Events
873873

examples/docs/zh-CN/form.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -839,9 +839,9 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
839839
| 方法名 | 说明 | 参数
840840
|---------- |-------------- | --------------
841841
| validate | 对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise | Function(callback: Function(boolean, object))
842-
| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
842+
| validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string))
843843
| resetFields | 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 | —
844-
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性组成的数组,如不传则移除整个表单的校验结果 | Function(props: array)
844+
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验结果 | Function(props: array | string)
845845

846846
### Form Events
847847
| 事件名称 | 说明 | 回调参数 |

packages/form/src/form.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@
7575
methods: {
7676
resetFields() {
7777
if (!this.model) {
78-
process.env.NODE_ENV !== 'production' &&
7978
console.warn('[Element Warn][Form]model is required for resetFields to work.');
8079
return;
8180
}
@@ -132,11 +131,17 @@
132131
return promise;
133132
}
134133
},
135-
validateField(prop, cb) {
136-
let field = this.fields.filter(field => field.prop === prop)[0];
137-
if (!field) { throw new Error('must call validateField with valid prop string!'); }
134+
validateField(props, cb) {
135+
props = [].concat(props);
136+
const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1);
137+
if (!fields.length) {
138+
confirm.warn('[Element Warn]please pass correct props!');
139+
return;
140+
}
138141
139-
field.validate('', cb);
142+
fields.forEach(field => {
143+
field.validate('', cb);
144+
});
140145
}
141146
}
142147
};

types/form.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,16 +67,16 @@ export declare class ElForm extends ElementUIComponent {
6767
validate (callback: ValidateCallback): void
6868
validate (): Promise<boolean>
6969
/**
70-
* Validate a certain form item
70+
* Validate certain form items
7171
*
72-
* @param prop The property of `model` that is going to validate
72+
* @param props The property of `model` or array of prop which is going to validate
7373
* @param callback A callback to tell the field validation result
7474
*/
75-
validateField (prop: string, callback: ValidateFieldCallback): void
75+
validateField (props: string | string[], callback: ValidateFieldCallback): void
7676

7777
/** reset all the fields and remove validation result */
7878
resetFields (): void
7979

8080
/** clear validation message for certain fields */
81-
clearValidate (props?: string[]): void
81+
clearValidate (props?: string | string[]): void
8282
}

0 commit comments

Comments
 (0)