Skip to content
Permalink
Browse files

doc

  • Loading branch information
MinJieLiu committed Aug 17, 2018
1 parent 2015c3f commit 0eea1417a7a1bb3027799952dba81a971864eb74
Showing with 95 additions and 100 deletions.
  1. +44 −45 README-zh_CN.md
  2. +43 −45 README.md
  3. +3 −4 lib/FormControl.js
  4. +1 −1 lib/FormControl.js.map
  5. +1 −1 package.json
  6. +3 −4 src/FormControl.jsx
@@ -42,8 +42,8 @@ import formConnect, {
```js
const schemas = {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: '不能为空 | 请输入有效的电子邮件地址 | 不能超过{{param}}个字符',
rules: 'required | isEmail | maxLength(32) | validateFromServer',
messages: '不能为空 | 请输入有效的电子邮件地址 | 不能超过{{param}}个字符 | 邮箱被占用',
},
hobby: {
rules: 'requiredField(email) | selectLimit(2)',
@@ -70,45 +70,51 @@ const methods = {

* 验证规则和扩展方法不是必需

表单像这样
表单

```js
const BasicForm = () => (
<div className="form-group">
<Text
name="email"
placeholder="Please input your email"
/>
<Message className="valid-error-message" name="email" />
</div>
);
```

* 组件中 `name` 为必需值

导出模块:

```js
export default formConnect(schemas, methods)(BasicForm);
```

最后,初始化表单值和类名:

```js
<BasicForm
classNames={{
static: 'form-control',
success: 'valid-success',
error: 'valid-error',
}}
values={this.state.formValues}
/>
@formConnect(schemas, methods)
export default class BasicForm extends React.Component {
static propTypes = {
formControl: PropTypes.object,
};
constructor(props) {
super(props);
props.formControl.init({
email: '',
phone: '',
}, {
static: 'form-control',
success: 'valid-success',
error: 'valid-error',
});
}
handleSubmit = async () => {
const { formControl } = this.props;
if (await formControl.validate()) {
// Submit.
}
};
render() {
return (
<div className="form-group">
<Text
name="email"
placeholder="Please input your email"
delay={100} // Asynchronous validation
/>
<Message className="valid-error-message" name="email" />
<Text name="phone" />
<button onClick={this.handleSubmit}>提交</button>
</div>
);
}
}
```


* `values` 的值类似于 { email: '', hobby: ['2'] }
* `classNames``values` 也可以在 `BasicForm` 中使用 `init` 方法初始化

基础验证方法可以参考 [validate-framework-utils](https://github.com/MinJieLiu/validate-framework-utils)

### 表单组件
@@ -120,7 +126,7 @@ export default formConnect(schemas, methods)(BasicForm);
* `Textarea`
* `Message`

表单域 `name` 属性是必需的,`delay` 为验证防抖,其他参数可以被覆盖。
表单域 `name` 属性是必需的,`delay` 为验证防抖(有异步验证时为必需),其他参数可以被覆盖。

当然,你也可以使用自定义的表单受控组件,只需指定 `value``onChange`

@@ -146,13 +152,6 @@ return (

### API

#### `FormControl` 参数

| 名称 | 类型 | 必需 | 默认值 | 描述 |
| :--- | :--- | :--- | :--- | :--- |
| values | Object | false | | `values` 集合 |
| classNames | Object | false | {} | 其 key 值包含 `static`,`success`,`error` 三种类名 |

#### Form params

| 名称 | 类型 | 返回值 | setState | 描述 |
@@ -35,8 +35,8 @@ Rules and messages like this:
```js
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) | validateFromServer',
messages: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters. | | The email already exists.',
},
hobby: {
rules: 'requiredField(phone) | selectLimit(2)',
@@ -64,42 +64,49 @@ const methods = {
The BasicForm like this:

```js
const BasicForm = () => (
<div className="form-group">
<Text
name="email"
placeholder="Please input your email"
delay={100} // Asynchronous validation
/>
<Message className="valid-error-message" name="email" />
<Text name="phone" />
</div>
);
```

Export the module:

```js
export default formConnect(schemas, methods)(BasicForm);
```

Finally, sets the initialized value:

```js
<BasicForm
classNames={{
static: 'form-control',
success: 'valid-success',
error: 'valid-error',
}}
values={this.state.formValues}
/>
@formConnect(schemas, methods)
export default class BasicForm extends React.Component {
static propTypes = {
formControl: PropTypes.object,
};
constructor(props) {
super(props);
props.formControl.init({
email: '',
phone: '',
}, {
static: 'form-control',
success: 'valid-success',
error: 'valid-error',
});
}
handleSubmit = async () => {
const { formControl } = this.props;
if (await formControl.validate()) {
// Submit.
}
};
render() {
return (
<div className="form-group">
<Text
name="email"
placeholder="Please input your email"
delay={100} // Asynchronous validation
/>
<Message className="valid-error-message" name="email" />
<Text name="phone" />
<button onClick={this.handleSubmit}>提交</button>
</div>
);
}
}
```

* The values like this { email: '', hobby: ['2'] }
* classNames and values can be initialized in `BasicForm` use `init`

Validate methods can refer to [validate-framework-utils](https://github.com/MinJieLiu/validate-framework-utils)

### Form components
@@ -137,13 +144,6 @@ return (

### API

#### FormControl params

| name | type | required | default | description |
| :--- | :--- | :--- | :--- | :--- |
| values | Object | false | | Key-value pairs for `name` and` value` |
| classNames | Object | false | {} | Its `key` value contains` static`, `success`,` error` |

#### Form params

| name | type | return | setState | description |
@@ -164,8 +164,6 @@ return (
| removeSchemas | function | this | true | Remove one or more validation rules, If there is no name, it will all be removed |
| formDidChange | function | | | Callback |

You can either pass in `values` as an argument, or call the `init` method when the form is initialized.

You can invoke the `changeValues` method to simulate a form change event.

### Update log

Some generated files are not rendered by default. Learn more.

Large diffs are not rendered by default.

@@ -1,6 +1,6 @@
{
"name": "react-validate-framework",
"version": "0.15.5",
"version": "0.15.6",
"description": "React validation framework.",
"main": "lib/index.js",
"scripts": {
@@ -58,13 +58,12 @@ export default (schemas, methods) => FormComponent => (
fields: {},
};

// Init
if (values) {
this.init(values);
}
if (classNames) {
this.initClassNames(classNames);
}
if (values) {
this.init(values);
}

// Initializes the validation component and customizes the validation method
this.validator = new Validator();

0 comments on commit 0eea141

Please sign in to comment.
You can’t perform that action at this time.