diff --git a/docs/demos/views/field.vue b/docs/demos/views/field.vue
index fe408aa95..f91c0b0d8 100644
--- a/docs/demos/views/field.vue
+++ b/docs/demos/views/field.vue
@@ -36,6 +36,12 @@
+
@@ -65,10 +71,13 @@ export default {
username: '用户名',
password: '密码',
message: '留言',
+ phone: '手机号',
+ phonePlaceholder: '请输入手机号',
usernamePlaceholder: '请输入用户名',
passwordPlaceholder: '请输入密码',
messagePlaceholder: '请输入留言',
- inputDisabled: '输入框已禁用'
+ inputDisabled: '输入框已禁用',
+ phoneError: '手机号格式错误'
},
'en-US': {
title2: 'Custom type',
@@ -78,10 +87,13 @@ export default {
username: 'Username',
password: 'Password',
message: 'Message',
+ phone: 'Phone',
+ phonePlaceholder: 'Phone',
usernamePlaceholder: 'Username',
passwordPlaceholder: 'Password',
messagePlaceholder: 'Message',
- inputDisabled: 'Disabled'
+ inputDisabled: 'Disabled',
+ phoneError: 'Invalid phone'
}
},
@@ -90,7 +102,8 @@ export default {
value: '',
password: '',
username: '',
- message: ''
+ message: '',
+ phone: '1365577'
};
}
};
diff --git a/docs/markdown/en-US/field.md b/docs/markdown/en-US/field.md
index 27ce1eaa7..eda5c0736 100644
--- a/docs/markdown/en-US/field.md
+++ b/docs/markdown/en-US/field.md
@@ -46,15 +46,29 @@ Use `type` prop to custom diffrent type fileds.
```html
-
+
```
#### Error info
+Use `error` or `error-message` to show error info
```html
-
+
+
```
@@ -84,6 +98,7 @@ Filed support all native properties of input tag,such as `maxlength`、`placeh
| label | Filed label | `String` | - | - |
| disabled | Disable field | `Boolean` | `false` | - |
| error | Whether to show error info | `Boolean` | `false` | - |
+| error-message | Error message | `String` | `''` | - |
| autosize | Textarea auto resize | `Boolean` | `false` | - |
| icon | Right side Icon name | `String` | - | - |
diff --git a/docs/markdown/zh-CN/field.md b/docs/markdown/zh-CN/field.md
index 435675928..922e0d6ba 100644
--- a/docs/markdown/zh-CN/field.md
+++ b/docs/markdown/zh-CN/field.md
@@ -48,15 +48,29 @@ Vue.use(Field);
```html
-
+
```
#### 错误提示
+通过`error`或者`error-message`属性增加对应的错误提示
```html
-
+
+
```
@@ -86,6 +100,7 @@ Filed 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`pla
| label | 输入框标签 | `String` | - | - |
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
| error | 输入框是否有错误 | `Boolean` | `false` | - |
+| error-message | 输入框底部错误提示文案 | `String` | `''` | - |
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
diff --git a/packages/field/index.vue b/packages/field/index.vue
index ac92a0ac2..ee454b65f 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -30,6 +30,11 @@
:type="type"
:value="value"
>
+
{}
diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css
index 956804408..c2aa845ba 100644
--- a/packages/vant-css/src/field.css
+++ b/packages/vant-css/src/field.css
@@ -22,6 +22,12 @@
padding-left: 90px;
}
+ &__error-message {
+ color: $red;
+ font-size: 12px;
+ text-align: left;
+ }
+
&--has-textarea {
.van-field__control {
min-height: 60px;