feat(Form): support autoValidate=false to close auto validate

alibaba-fusion · Feb 2, 2019 · 4bec5db · 4bec5db
1 parent b9b0129
commit 4bec5db
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 3 deletions.
diff --git a/docs/field/index.md b/docs/field/index.md
@@ -191,7 +191,7 @@ let myfield = new Field(this [,options]);
 | forceUpdate | 仅建议PureComponent的组件打开此强制刷新功能，会带来性能问题(500个组件为例：打开的时候render花费700ms, 关闭时候render花费400ms) | Boolean  |false|
 | scrollToFirstError | field.validate的时候滚动到第一个出错的组件, 如果是整数会进行偏移 | Boolean/Number  |true|
 | autoUnmount | 自动删除Unmout元素，如果想保留数据可以设置为false | Boolean  |true|
-| autoValidate | 是否修改数据的时候就自动触发校验 | Boolean  |true|
+| autoValidate | 是否修改数据的时候就自动触发校验, 设为 false 后只能通过 validate() 来触发校验  | Boolean  |true|
 | values | 初始化数据 | Object ||
 
 #### API接口
@@ -230,7 +230,7 @@ init(name, options, props)
 | options.rules | 校验规则 | Array/Object | | | |
 | options.getValueFromEvent | 自定义从`onChange`事件中获取value的方式，一般不需要设置. 详细用法查看demo `自定义数据获取` | Function(value,...args) 参数顺序和组件是完全一致的 | | | |
 | props | 组件自定义的事件可以写在这里  | Object | | | |
-| autoValidate | 是否修改数据的时候自动触发校验单个组件的校验 | Boolean  |true|
+| autoValidate | 是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验 | Boolean  |true|
 
 返回值
 ```

diff --git a/docs/form/index.en-us.md b/docs/form/index.en-us.md
@@ -80,6 +80,7 @@ Form layout, validation, data submission operations used.
 | formatMessage | custom error message for `format` | String | - |
 | formatTrigger | custom trigger mode for `format` | String/Array | - |
 | validator | [validation] custom validation function <br><br> **signature **:<br>Function() => void | Function | - |
+| autoValidate | validate while value changed | Boolean            | -     |
 
 ### Form.Reset
 

diff --git a/docs/form/index.md b/docs/form/index.md
@@ -81,6 +81,7 @@
 | formatTrigger       | format 自定义触发方式                                                                                                          | String/Array       | -     |
 | validator           | [表单校验] 自定义校验函数<br><br>**签名**:<br>Function() => void                                                                     | Function           | -     |
 | validatorTrigger    | validator 自定义触发方式                                                                                                       | String/Array       | -     |
+| autoValidate        | 是否修改数据时自动触发校验, 设为 false 后修改不会再触发校验 | Boolean            | -     |
 
 ### Form.Submit
 

diff --git a/src/form/enhance.jsx b/src/form/enhance.jsx
@@ -92,6 +92,7 @@ export function getFieldInitCfg(props, displayName) {
     return {
         valueName: getValueName(props, displayName),
         trigger: props.trigger ? props.trigger : 'onChange',
+        autoValidate: props.autoValidate,
         rules: getRules(props)
     };
 }
diff --git a/src/form/item.jsx b/src/form/item.jsx
@@ -165,7 +165,11 @@ export default class Item extends React.Component {
         /**
          * validator 自定义触发方式
          */
-        validatorTrigger: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+        validatorTrigger: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+        /**
+         * 是否修改数据时自动触发校验
+         */
+        autoValidate: PropTypes.bool,
     };
 
     static defaultProps = {

diff --git a/test/form/validate-spec.js b/test/form/validate-spec.js
@@ -120,6 +120,25 @@ describe('Submit', () => {
         assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
         wrapper.find('button').simulate('click');
     });
+
+    it('autoValidate=false', (done) => {
+        const onClick = (v) => {
+            assert(v.first === '');
+            done()
+        }
+        const wrapper = mount(<Form>
+            <FormItem minLength={10} autoValidate={false}>
+                <Input name="first"/>
+            </FormItem>
+            <Submit validate={['first']} onClick={onClick}>click</Submit>
+        </Form>);
+
+        wrapper.find('input#first').simulate('change', {target: {value: ""}});
+        wrapper.update();
+        assert(wrapper.find('.next-form-item-help').first().length === 0);
+        wrapper.find('button').simulate('click');
+        assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
+    });
 });
 
 describe('Reset', () => {