Skip to content

Commit 4bec5db

Browse files
committed
feat(Form): support autoValidate=false to close auto validate
1 parent b9b0129 commit 4bec5db

File tree

6 files changed

+29
-3
lines changed

6 files changed

+29
-3
lines changed

docs/field/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ let myfield = new Field(this [,options]);
191191
| forceUpdate | 仅建议PureComponent的组件打开此强制刷新功能,会带来性能问题(500个组件为例:打开的时候render花费700ms, 关闭时候render花费400ms) | Boolean |false|
192192
| scrollToFirstError | field.validate的时候滚动到第一个出错的组件, 如果是整数会进行偏移 | Boolean/Number |true|
193193
| autoUnmount | 自动删除Unmout元素,如果想保留数据可以设置为false | Boolean |true|
194-
| autoValidate | 是否修改数据的时候就自动触发校验 | Boolean |true|
194+
| autoValidate | 是否修改数据的时候就自动触发校验, 设为 false 后只能通过 validate() 来触发校验 | Boolean |true|
195195
| values | 初始化数据 | Object ||
196196

197197
#### API接口
@@ -230,7 +230,7 @@ init(name, options, props)
230230
| options.rules | 校验规则 | Array/Object | | | |
231231
| options.getValueFromEvent | 自定义从`onChange`事件中获取value的方式,一般不需要设置. 详细用法查看demo `自定义数据获取` | Function(value,...args) 参数顺序和组件是完全一致的 | | | |
232232
| props | 组件自定义的事件可以写在这里 | Object | | | |
233-
| autoValidate | 是否修改数据的时候自动触发校验单个组件的校验 | Boolean |true|
233+
| autoValidate | 是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验 | Boolean |true|
234234

235235
返回值
236236
```

docs/form/index.en-us.md

+1
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ Form layout, validation, data submission operations used.
8080
| formatMessage | custom error message for `format` | String | - |
8181
| formatTrigger | custom trigger mode for `format` | String/Array | - |
8282
| validator | [validation] custom validation function <br><br> **signature **:<br>Function() => void | Function | - |
83+
| autoValidate | validate while value changed | Boolean | - |
8384

8485
### Form.Reset
8586

docs/form/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
| formatTrigger | format 自定义触发方式 | String/Array | - |
8282
| validator | [表单校验] 自定义校验函数<br><br>**签名**:<br>Function() => void | Function | - |
8383
| validatorTrigger | validator 自定义触发方式 | String/Array | - |
84+
| autoValidate | 是否修改数据时自动触发校验, 设为 false 后修改不会再触发校验 | Boolean | - |
8485

8586
### Form.Submit
8687

src/form/enhance.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export function getFieldInitCfg(props, displayName) {
9292
return {
9393
valueName: getValueName(props, displayName),
9494
trigger: props.trigger ? props.trigger : 'onChange',
95+
autoValidate: props.autoValidate,
9596
rules: getRules(props)
9697
};
9798
}

src/form/item.jsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,11 @@ export default class Item extends React.Component {
165165
/**
166166
* validator 自定义触发方式
167167
*/
168-
validatorTrigger: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
168+
validatorTrigger: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
169+
/**
170+
* 是否修改数据时自动触发校验
171+
*/
172+
autoValidate: PropTypes.bool,
169173
};
170174

171175
static defaultProps = {

test/form/validate-spec.js

+19
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,25 @@ describe('Submit', () => {
120120
assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
121121
wrapper.find('button').simulate('click');
122122
});
123+
124+
it('autoValidate=false', (done) => {
125+
const onClick = (v) => {
126+
assert(v.first === '');
127+
done()
128+
}
129+
const wrapper = mount(<Form>
130+
<FormItem minLength={10} autoValidate={false}>
131+
<Input name="first"/>
132+
</FormItem>
133+
<Submit validate={['first']} onClick={onClick}>click</Submit>
134+
</Form>);
135+
136+
wrapper.find('input#first').simulate('change', {target: {value: ""}});
137+
wrapper.update();
138+
assert(wrapper.find('.next-form-item-help').first().length === 0);
139+
wrapper.find('button').simulate('click');
140+
assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
141+
});
123142
});
124143

125144
describe('Reset', () => {

0 commit comments

Comments
 (0)