mirror of https://github.com/ElemeFE/element
Form: clearValidate supports prop names (#11821)
杨奕
hetech
parent
04d2891eeb
commit
b799d2ec4d
|
|
@ -852,7 +852,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
|
|||
| 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)) |
|
||||
| resetFields | reset all the fields and remove validation result | — |
|
||||
| clearValidate | clear validation message for all fields | -
|
||||
| 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)
|
||||
|
||||
### Form Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
|
|||
|
|
@ -857,7 +857,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
|
|||
| 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)) |
|
||||
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
|
||||
| clearValidate | limpia mensaje de validación para todos los campos | -
|
||||
| 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)
|
||||
|
||||
### Form Events
|
||||
| Nombre | Descripción | Parametros |
|
||||
|
|
|
|||
|
|
@ -839,8 +839,8 @@ 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))
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | -
|
||||
| clearValidate | 移除整个表单的校验结果 | -
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | —
|
||||
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性组成的数组，如不传则移除整个表单的校验结果 | Function(props: array)
|
||||
|
||||
### Form Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -79,8 +79,11 @@
|
|||
field.resetField();
|
||||
});
|
||||
},
|
||||
clearValidate() {
|
||||
this.fields.forEach(field => {
|
||||
clearValidate(props = []) {
|
||||
const fields = props.length
|
||||
? this.fields.filter(field => props.indexOf(field.prop) > -1)
|
||||
: this.fields;
|
||||
fields.forEach(field => {
|
||||
field.clearValidate();
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -213,6 +213,64 @@ describe('Form', () => {
|
|||
done();
|
||||
});
|
||||
});
|
||||
it('clear validate', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-form ref="form" :model="form" :rules="rules">
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动地址" prop="address">
|
||||
<el-input v-model="form.address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质" prop="type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
address: '',
|
||||
type: []
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'blur' }
|
||||
],
|
||||
address: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
const form = vm.$refs.form;
|
||||
const nameField = form.fields.filter(field => field.prop === 'name')[0];
|
||||
const addressField = form.fields.filter(field => field.prop === 'address')[0];
|
||||
form.validate();
|
||||
vm.$nextTick(() => {
|
||||
expect(nameField.validateMessage).to.equal('请输入活动名称');
|
||||
form.clearValidate(['name']);
|
||||
vm.$nextTick(() => {
|
||||
expect(nameField.validateMessage).to.equal('');
|
||||
form.clearValidate();
|
||||
vm.$nextTick(() => {
|
||||
expect(addressField.validateMessage).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
it('form item nest', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -77,6 +77,6 @@ export declare class ElForm extends ElementUIComponent {
|
|||
/** reset all the fields and remove validation result */
|
||||
resetFields (): void
|
||||
|
||||
/** clear validation message for all fields */
|
||||
clearValidate (): void
|
||||
/** clear validation message for certain fields */
|
||||
clearValidate (props?: string[]): void
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue