提交 cd2c027d 编写于 作者: A afc163

docs: Add API document for Form validation rule

close #5201, ref #5155
上级 8bc0e8ab
...@@ -105,7 +105,7 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless ...@@ -105,7 +105,7 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless
| options.trigger | When to collect the value of children node | string | 'onChange' | | options.trigger | When to collect the value of children node | string | 'onChange' |
| options.getValueFromEvent | To convert parameters of onChange to the value of control | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) | | options.getValueFromEvent | To convert parameters of onChange to the value of control | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
| options.validateTrigger | When to validate the value of children node. | string\|string[] | 'onChange' | | options.validateTrigger | When to validate the value of children node. | string\|string[] | 'onChange' |
| options.rules | Includes validation rules. Please refer to [async-validator](https://github.com/yiminghe/async-validator#rules) for details. | object[] | n/a | | options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object[] | n/a |
| options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false | | options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false |
### Form.Item ### Form.Item
...@@ -125,6 +125,24 @@ Note: ...@@ -125,6 +125,24 @@ Note:
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | | colon | Used with `label`, whether to display `:` after label text. | boolean | true |
### Validation Rules
Property | Description | Type | Default Value |
---------|-------------|------|---------------|
message | validation error message | string | - |
type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' |
required | indicates whether field is required | boolean | false |
len | validate an exact length of a field | number | - |
min | validate a min length of a field | number | - |
max | validate a max length of a field | number | - |
enum | validate a value from a list of possible values | string | - |
pattern | validate from a regular expression | RegExp | - |
transform | transform a value before validation | function(value) => transformedValue:any | - |
validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - |
See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
<style> <style>
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) { .code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
max-width: 540px; max-width: 540px;
......
...@@ -106,7 +106,7 @@ CustomizedForm = Form.create({})(CustomizedForm); ...@@ -106,7 +106,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
| options.trigger | 收集子节点的值的时机 | string | 'onChange' | | options.trigger | 收集子节点的值的时机 | string | 'onChange' |
| options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) | | options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
| options.validateTrigger | 校验子节点值的时机 | string\|string[] | 'onChange' | | options.validateTrigger | 校验子节点值的时机 | string\|string[] | 'onChange' |
| options.rules | 校验规则,参[async-validator](https://github.com/yiminghe/async-validator#rules) | object[] | | | options.rules | 校验规则,参考下方文档 | object[] | |
| options.exclusive | 是否和其他控件互斥,特别用于 Radio 单选控件 | boolean | false | | options.exclusive | 是否和其他控件互斥,特别用于 Radio 单选控件 | boolean | false |
### Form.Item ### Form.Item
...@@ -127,6 +127,23 @@ CustomizedForm = Form.create({})(CustomizedForm); ...@@ -127,6 +127,23 @@ CustomizedForm = Form.create({})(CustomizedForm);
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false | | hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false |
| colon | 配合 label 属性使用,表示是否显示 label 后面的分号 | boolean | true | | colon | 配合 label 属性使用,表示是否显示 label 后面的分号 | boolean | true |
### 校验规则
参数 | 说明 | 类型 | 默认值 |
-----|------|------|-------|
message | 校验文案 | string | - |
type | 内建校验类型,[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' |
required | 是否必选 | boolean | - |
len | 字段长度 | number | - |
min | 最小长度 | number | - |
max | 最大长度 | number | - |
enum | 枚举类型 | string | - |
pattern | 正则表达式校验 | RegExp | - |
transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
validator | 自定义校验(注意,[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - |
更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)
<style> <style>
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) { .code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
max-width: 540px; max-width: 540px;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册