[new feature] Field: add error-message prop (#492)

docs/demos/views/field.vue

@@ -36,6 +36,12 @@
     <demo-block :title="$t('title4')">
       <van-cell-group>
         <van-field :label="$t('username')" :placeholder="$t('usernamePlaceholder')" error />
+        <van-field
+          v-model="phone"
+          :label="$t('phone')"
+          :placeholder="$t('phonePlaceholder')"
+          :error-message="$t('phoneError')"
+        />
       </van-cell-group>
     </demo-block>
 
@@ -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'
     };
   }
 };

docs/markdown/en-US/field.md

@@ -46,15 +46,29 @@ Use `type` prop to custom diffrent type fileds.
 
 ```html
 <van-cell-group>
-  <van-field value="Disabled" label="Username" disabled />
+  <van-field
+    value="Disabled"
+    label="Username"
+    disabled
+  />
 </van-cell-group>
 ```
 
 #### Error info
+Use `error` or `error-message` to show error info
 
 ```html
 <van-cell-group>
-  <van-field label="Username" placeholder="Username" error />
+  <van-field
+    label="Username"
+    placeholder="Username"
+    error
+  />
+  <van-field
+    label="Phone"
+    placeholder="Phone"
+    error-message="Invalid phone"
+  />
 </van-cell-group>
 ```
 
@@ -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` | - | - |
 

docs/markdown/zh-CN/field.md

@@ -48,15 +48,29 @@ Vue.use(Field);
 
 ```html
 <van-cell-group>
-  <van-field value="输入框已禁用" label="用户名" disabled />
+  <van-field
+    value="输入框已禁用"
+    label="用户名"
+    disabled
+  />
 </van-cell-group>
 ```
 
 #### 错误提示
+通过`error`或者`error-message`属性增加对应的错误提示
 
 ```html
 <van-cell-group>
-  <van-field label="用户名" placeholder="请输入用户名" error />
+  <van-field
+    label="用户名"
+    placeholder="请输入用户名"
+    error
+  />
+  <van-field
+    label="手机号"
+    placeholder="请输入手机号"
+    error-message="手机号格式错误"
+  />
 </van-cell-group>
 ```
 
@@ -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 组件支持的类型 |
 

packages/field/index.vue

@@ -30,6 +30,11 @@
       :type="type"
       :value="value"
     >
+    <div
+      v-if="errorMessage"
+      v-text="errorMessage"
+      class="van-field__error-message"
+    />
     <div
       v-if="hasIcon"
       v-show="$slots.icon || value"
@@ -68,6 +73,7 @@ export default create({
     border: Boolean,
     required: Boolean,
     autosize: Boolean,
+    errorMessage: String,
     onIconClick: {
       type: Function,
       default: () => {}

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;