test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 03:07:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Form: add validate event (#10351)

Browse Source
This commit is contained in:
杨奕 2018-03-25 22:32:22 +08:00 committed by GitHub
parent e9ea178ded
commit d9bcaacc74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 74 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/docs/en-US/form.md
View File

@ -854,6 +854,11 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
| resetFields | reset all the fields and remove validation result | — |
| clearValidate | clear validation message for all fields | -
### Form Events
| Event Name | Description | Parameters |
|----------- |------------ |----------- |
| validate | triggers after a form item is validated | prop name of the form item being validated, whether validation is passed |
### Form-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
@ -861,7 +866,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
| prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` |
| label | label | string | — | — |
| label-width | width of label, e.g. '50px' | string | — | — |
| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false |
| required | whether the field is required or not, will be determined by validation rules if omitted | boolean | — | false |
| rules | validation rules of form | object | — | — |
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
| show-message | whether to show the error message | boolean | — | true |

7
examples/docs/es/form.md
View File

@ -859,6 +859,11 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
| clearValidate | limpia mensaje de validación para todos los campos | -
### Form Events
| Nombre | Descripción | Parametros |
|----------- |------------ |----------- |
| validate | triggers after a form item is validated | prop name of the form item being validated, whether validation is passed |
### Form-Item Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
@ -866,7 +871,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form` | |
| label | etiqueta | string | — | — |
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | string | — | false |
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | — | false |
| rules | reglas de validacion del form | object | — | — |
| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
| show-message | si mostrar o no el mensaje de error | boolean | — | true |

7
examples/docs/zh-CN/form.md
View File

@ -842,6 +842,11 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | -
| clearValidate | 移除整个表单的校验结果 | -
### Form Events
| 事件名称 | 说明 | 回调参数 |
|--------- |-------- |---------- |
| validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过 |
### Form-Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
@ -849,7 +854,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
| prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 `model` 中的字段 | — |
| label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度，例如 '50px' | string | — | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
| rules | 表单验证规则 | object | — | — |
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
| show-message | 是否显示校验错误信息 | boolean | — | true |

1
packages/form/src/form-item.vue
View File

@ -197,6 +197,7 @@
this.validateMessage = errors ? errors[0].message : '';
callback(this.validateMessage, invalidFields);
this.elForm && this.elForm.$emit('validate', this.prop, !errors);
});
},
clearValidate() {

55
test/unit/specs/form.spec.js
View File

@ -755,4 +755,59 @@ describe('Form', () => {
});
});
});
it('validate event', done => {
vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form" @validate="onValidate">
<el-form-item label="活动名称" prop="name" ref="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动地点" prop="addr" ref="addr">
<el-input v-model="form.addr"></el-input>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: '',
addr: ''
},
valid: {
name: null,
addr: null
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
],
addr: [
{ required: true, message: '请输入活动名称', trigger: 'change' }
]
}
};
},
methods: {
onValidate(prop, valid) {
this.valid[prop] = valid;
},
setValue(prop, value) {
this.form[prop] = value;
}
}
}, true);
vm.setValue('name', '1');
setTimeout(() => {
expect(vm.valid.name).to.equal(false);
vm.setValue('addr', '1');
setTimeout(() => {
expect(vm.valid.addr).to.equal(true);
vm.setValue('name', '111');
setTimeout(() => {
expect(vm.valid.name).to.equal(true);
done();
}, DELAY);
}, DELAY);
}, DELAY);
});
});