From d9bcaacc7454b42b0298ab3e78e24427a560e6ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Sun, 25 Mar 2018 22:32:22 +0800 Subject: [PATCH] Form: add validate event (#10351) --- examples/docs/en-US/form.md | 7 ++++- examples/docs/es/form.md | 7 ++++- examples/docs/zh-CN/form.md | 7 ++++- packages/form/src/form-item.vue | 1 + test/unit/specs/form.spec.js | 55 +++++++++++++++++++++++++++++++++ 5 files changed, 74 insertions(+), 3 deletions(-) diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index 6892678b..12e238c8 100644 --- a/examples/docs/en-US/form.md +++ b/examples/docs/en-US/form.md @@ -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 | diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md index 6aaefdee..faf9568b 100644 --- a/examples/docs/es/form.md +++ b/examples/docs/es/form.md @@ -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 | diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index 766bb1c6..ce2ca10a 100644 --- a/examples/docs/zh-CN/form.md +++ b/examples/docs/zh-CN/form.md @@ -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 | diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue index e1ec4fd6..4ee04193 100644 --- a/packages/form/src/form-item.vue +++ b/packages/form/src/form-item.vue @@ -197,6 +197,7 @@ this.validateMessage = errors ? errors[0].message : ''; callback(this.validateMessage, invalidFields); + this.elForm && this.elForm.$emit('validate', this.prop, !errors); }); }, clearValidate() { diff --git a/test/unit/specs/form.spec.js b/test/unit/specs/form.spec.js index dcea0800..452adeda 100644 --- a/test/unit/specs/form.spec.js +++ b/test/unit/specs/form.spec.js @@ -755,4 +755,59 @@ describe('Form', () => { }); }); }); + it('validate event', done => { + vm = createVue({ + template: ` + + + + + + + + + `, + 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); + }); });