more doc about validateMessages

ant-design · Jul 1, 2019 · d881aa4 · d881aa4
1 parent 2ce47a6
commit d881aa4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -39,6 +39,7 @@ Some component use dynamic style to support wave effect. You can config `csp` pr
 | --- | --- | --- | --- |
 | autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | true |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |
+| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |
 | renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | Function(componentName: string): ReactNode | - |
 | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` |
 | prefixCls | set prefix class | string | ant |
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -40,6 +40,7 @@ return (
 | --- | --- | --- | --- |
 | autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |
+| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |
 | renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | Function(componentName: string): ReactNode | - |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body |
 | prefixCls | 设置统一样式前缀 | string | ant |
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
@@ -29,13 +29,37 @@ title: Form
 | labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) |  |
 | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
 | name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - |
-| validateMessages | 验证提示模板 | [ValidateMessages](<(https://github.com/react-component/field-form/blob/master/src/utils/messages.ts)>) | - |
+| validateMessages | 验证提示模板，说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) |  |
 | onFinish | 数据验证成功后回调事件 | Function(values) | - |
 | onFieldsChange | 字段更新时触发回调事件 | Function(changedFields, allFields) | - |
 | onValuesChange | 字段值更新时触发回调事件 | Function(changedValues, allValues) | - |
 
-### validateMessages 使用
+### validateMessages
+
+Form 为验证提供了[默认的错误提示信息](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
+
+```jsx
+const validateMessages = {
+  required: "'${name}' 是必选字段",
+  // ...
+};
+
+<Form validateMessages={validateMessages} />;
+```
+
+此外，[ConfigProvider](/components/config-provider/) 也提供了全局化配置方案，允许统一配置错误提示模板：
+
+```jsx
+const validateMessages = {
+  required: "'${name}' 是必选字段",
+  // ...
+};
+
+<ConfigProvider form={{ validateMessages }}>
+  <Form />
+</ConfigProvider>;
+```
 
 ## Form.Item