RF-Form: 轻松构建带验证的React表单

**zhaoyao91** · May 16, 2016, 9:47am

Hi，小伙伴们，很高兴发布rf-form。经过了多天的努力工作后，这个项目相比之前的项目有了巨大的提升。现在支持无限嵌套和成环的schema定义和表单结构了，并且表单可以被级联起来。欢迎使用并反馈使用过程中遇到的问题。欢迎提供任何帮助和支持。谢谢！

所有特点如下：

轻松构建带验证的React表单
基于schema
支持嵌套数据结构
支持成环的schema定义
支持表单级联
支持字段数组操作
支持顶级和独立的readOnly和disable属性控制
自动启动字段验证
在onSubmit中提供更多有用信息（校验摘要，校验细节）
支持扩展表单组件（wrapper、group、array、field）

基本用例如下：

import {Wrapper, Group, Array, fields} from 'rf-bootstrap3';
import Form from 'rf-form';

import React from 'react';
import ReactDOM from 'react-dom';

Form.defaultProps.buildOptions = {Wrapper, Group, Array, fields};

const schema = {
    age: {
        type: 'Number',
        label: 'Age',
        validate(v) {
            if (v < 18) return 'age must >= 18'
        }
    },
    account: {
        label: 'Account',
        group: {
            username: {
                type: 'Text',
                label: 'Username',
                validate(v) {
                    if (v === 'bob') return 'no bob!'
                },
                options: {
                    placeholder: 'input username'
                }
            },
            password: {
                type: 'Password',
                label: 'Password',
                validate(v) {
                    if (!v || v.length < 6) return 'password must have at least 6 bits.'
                }
            }
        }
    },
    friends: {
        label: 'Friends',
        validate(v) {
            if (v && v.length > 2) return 'too many friends!'
        },
        array: {
            group: {
                name: {
                    type: 'Text',
                    label: 'Name'
                }
            }
        }
    }
};

schema.friends.array.group.friends = schema.friends;

class TestPage extends React.Component {
    render() {
        return <Form {...{
            schema,
            onSubmit: (value, summary, validation)=> console.log({value, summary, validation})
        }}>
            <button className="btn btn-primary">Submit</button>
        </Form>
    }
}