0.15.1

Author: MinJieLiu

README-zh_CN.md

@@ -102,14 +102,12 @@ export default formConnect(schemas, methods)(BasicForm);
  error: 'valid-error',
  }}
  values={this.state.formValues}
- delay={100}
 />
 ```
 
 
  * `values` 的值类似于 { email: '', hobby: ['2'] }
  * `classNames` 和 `values` 也可以在 `BasicForm` 中使用 `init` 方法初始化
- * `delay` 防抖
 
 基础验证方法可以参考 [validate-framework-utils](https://github.com/MinJieLiu/validate-framework-utils)
 
@@ -122,7 +120,7 @@ export default formConnect(schemas, methods)(BasicForm);
  * `Textarea`
  * `Message`
 
-表单 `name` 属性是必需的，其他参数可以被覆盖。
+表单域 `name` 属性是必需的，`delay` 为验证防抖，其他参数可以被覆盖。
 
 当然，你也可以使用自定义的表单受控组件，只需指定 `value` 和 `onChange`：
 
@@ -154,7 +152,6 @@ return (
 | :--- | :--- | :--- | :--- | :--- |
 | values | Object | false | | `values` 集合 |
 | classNames | Object | false | {} | 其 key 值包含 `static`，`success`，`error` 三种类名 |
-| delay | number | false | | 验证防抖 |
 
 #### Form params
 

README.md

@@ -69,8 +69,10 @@ const BasicForm = () => (
  <Text
  name="email"
  placeholder="Please input your email"
+ delay={100} // Asynchronous validation
  />
  <Message className="valid-error-message" name="email" />
+ <Text name="phone" />
  </div>
 );
 ```
@@ -91,14 +93,12 @@ Finally, sets the initialized value:
  error: 'valid-error',
  }}
  values={this.state.formValues}
- delay={100}
 />
 
 ```
 
  * The values like this { email: '', hobby: ['2'] }
  * classNames and values can be initialized in `BasicForm` use `init`
- * `delay` debounce
 
 Validate methods can refer to [validate-framework-utils](https://github.com/MinJieLiu/validate-framework-utils)
 
@@ -111,7 +111,7 @@ Validate methods can refer to [validate-framework-utils](https://github.com/MinJ
  * `Textarea`
  * `Message`
 
-The `name` attribute is required in form components, Other parameters can be overridden.
+The `name` attribute is required in form components, `delay` debounce, Other parameters can be overridden.
 
 Of course, you can also use unencapsulated form components, just specify `value` and` onChange` on the line:
 
@@ -143,7 +143,6 @@ return (
 | :--- | :--- | :--- | :--- | :--- |
 | values | Object | false | | Key-value pairs for `name` and` value` |
 | classNames | Object | false | {} | Its `key` value contains` static`, `success`,` error` |
-| delay | number | false | | debounce |
 
 #### Form params
 

example/BasicForm.jsx

@@ -1,7 +1,3 @@
-/**
- * Created by MingYi on 2016/12/23.
- */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -19,8 +15,8 @@ import ChildForm from './ChildForm';
 // Rules and messages
 const schemas = {
  email: {
- rules: 'required | isEmail | maxLength(32)',
- messages: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters.',
+ rules: 'required | isEmail | maxLength(32) | remoteRule',
+ messages: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters. | The email already exists',
  },
  phone: {
  rules: 'isPhone',
@@ -65,6 +61,13 @@ const methods = {
  const otherField = this.fields[param];
  return this.required(field) || (otherField.result && this.required(otherField));
  },
+ async remoteRule(field) {
+ await sleep(1000);
+ if (field.value) {
+ return field.value !== 'example@example.com';
+ }
+ return false;
+ },
  async selectLimit(field, param) {
  // Simulation
  await sleep(1000);
@@ -106,6 +109,7 @@ class BasicForm extends Component {
  name="email"
  type="email"
  placeholder="Please input your email"
+ delay={200}
  />
  <Message className="valid-error-message" name="email" />
  </div>
@@ -181,6 +185,7 @@ class BasicForm extends Component {
  id="hobby1"
  name="hobby"
  value="1"
+ delay={200}
  />
  hobby1
  </label>
@@ -189,6 +194,7 @@ class BasicForm extends Component {
  id="hobby2"
  name="hobby"
  value="2"
+ delay={200}
  />
  hobby2
  </label>
@@ -197,6 +203,7 @@ class BasicForm extends Component {
  id="hobby3"
  name="hobby"
  value="3"
+ delay={200}
  />
  hobby3
  </label>
@@ -205,6 +212,7 @@ class BasicForm extends Component {
  id="hobby4"
  name="hobby"
  value="4"
+ delay={200}
  />
  hobby4
  </label>