diff --git a/src/field/index.js b/src/field/index.js index b65e23655..b29c825d2 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -101,6 +101,13 @@ export default createComponent({ ); }, + showError() { + if (this.vanForm && this.vanForm.showError && this.validateMessage) { + return true; + } + return this.error; + }, + listeners() { const listeners = { ...this.$listeners, @@ -540,7 +547,7 @@ export default createComponent({ scopedSlots={scopedSlots} arrowDirection={this.arrowDirection} class={bem({ - error: this.error || this.validateMessage, + error: this.showError, [`label-${labelAlign}`]: labelAlign, 'min-height': this.type === 'textarea' && !this.autosize, })} diff --git a/src/form/README.md b/src/form/README.md index 3fca2be67..907f6270d 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -432,6 +432,7 @@ export default { | colon | Whether to display `:` after label | *boolean* | `false` | | validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` | | scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | *boolean* | `false` | +| show-error `v2.5.9` | Whether to highlight input when validation failed | *boolean* | `true` | | show-error-message `v2.5.8` | Whether to show error message when validation failed | *boolean* | `true` | ### Data Structure of Rule diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 38bb64e90..f0fd56ac8 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -467,6 +467,7 @@ export default { | colon | 是否在 label 后面添加冒号 | *boolean* | `false` | | validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` | | scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` | +| show-error `v2.5.9` | 是否在校验不通过时标红输入框 | *boolean* | `true` | | show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | *boolean* | `true` | > 表单项的 API 参见:[Field 组件](#/zh-CN/field#api) diff --git a/src/form/index.js b/src/form/index.js index 2eccf1267..980343ad5 100644 --- a/src/form/index.js +++ b/src/form/index.js @@ -15,6 +15,10 @@ export default createComponent({ type: String, default: 'onBlur', }, + showError: { + type: Boolean, + default: true, + }, showErrorMessage: { type: Boolean, default: true, diff --git a/src/form/test/props.spec.js b/src/form/test/props.spec.js index 6128f2946..447393088 100644 --- a/src/form/test/props.spec.js +++ b/src/form/test/props.spec.js @@ -406,3 +406,28 @@ test('show-error-message prop', async () => { await submitForm(wrapper); expect(wrapper.contains('.van-field__error-message')).toBeTruthy(); }); + +test('show-error prop', async () => { + const wrapper = mountForm({ + template: ` + + + + + `, + data() { + return { + ...getSimpleRules(), + showError: false, + }; + }, + }); + + await submitForm(wrapper); + expect(wrapper.contains('.van-field--error')).toBeFalsy(); + + wrapper.setData({ showError: true }); + + await submitForm(wrapper); + expect(wrapper.contains('.van-field--error')).toBeTruthy(); +});