zl-form

Form组件

使用代码示例：

<div style={{width: '80%', border: '1px solid #d4d4d4', marginBottom: '16px', padding: '8px'}}>
    <Form layout='vertical' onSubmit={e => this.onSubmit(e)}>
        <FormItem label={'手机号'} require={true} colon={true}>
            {getFieldDecorator('phone', {
                initialValue: '18895462994',
                rules: [
                    { required: true, message: '必填' },
                    { max: 18, message: '请勿输入大于10的'},
                    { min: 2, message: '请勿输入小于2的'},
                    {
                        pattern: new RegExp('^1\\d{10}$'),
                        message: '请输入正确格式的手机号'
                    }
                ]
            })(
                <Input placeHolder={'请输入你的手机号'}/>
            )}
        </FormItem>
        <FormItem label={'姓名'} require={true} colon={true}>
            {getFieldDecorator('name', {
                initialValue: '王安妮',
            })(
                <Select placeHolder="请选择你的姓名">
                    <OptionItem itemKey="王安妮" itemValue="王安妮">王安妮</OptionItem>
                    <OptionItem itemKey="何佳欢" itemValue="何佳欢">何佳欢</OptionItem>
                    <OptionItem itemKey="蒋英浩" itemValue="蒋英浩">蒋英浩</OptionItem>
                    <OptionItem itemKey="韦丹" itemValue="韦丹">韦丹</OptionItem>
                </Select>
            )}
        </FormItem>
        <FormItem label={'是否是女生'} require={true} colon={true}>
            {getFieldDecorator('isWoman', {
                initialValue: true
            })(
                <CheckBox defaultValue={true} type={"single"}/>
            )}
        </FormItem>
        <FormItem>
            <Button htmlType='submit' type='primary'>提交</Button>
        </FormItem>
    </Form>
</div>

<div style={{width: '80%', border: '1px solid #d4d4d4', marginBottom: '16px', padding: '8px'}}>
    <Form layout='horizontal'>
        <FormItem label={'姓名'} require={true} colon={true}>
            {getFieldDecorator('name', {
                initialValue: '安妮'
            })(
                <Input placeHolder={'请输入你的名字'}/>
            )}
        </FormItem>
        <FormItem label={'性别'} require={true} colon={true}>
            {getFieldDecorator('name', {
                initialValue: '我是女生啦啦啦'
            })(
                <Input placeHolder={'请输入你的性别'}/>
            )}
        </FormItem>
    </Form>
</div>

<div style={{width: '80%', border: '1px solid #d4d4d4', marginBottom: '16px', padding: '8px'}}>
    <Form layout='inline'>
        <FormItem label={'姓名'} require={true} colon={true}>
            {getFieldDecorator('name', {
                initialValue: '安妮'
            })(
                <Input placeHolder={'请输入你的名字'}/>
            )}
        </FormItem>
        <FormItem label={'请选择你的性别'} require={true} colon={true}>
            {getFieldDecorator('name', {
                initialValue: '我是女生啦啦啦'
            })(
                <Input placeHolder={'请输入你的性别'}/>
            )}
        </FormItem>
    </Form>
</div>

Form

参数	说明	类型
form	经 Form.create() 包装过的组件会自带 this.props.form 属性	object
layout	表单布局,默认inline	'horizontal'，'vertical'，'inline'
onSubmit	数据验证成功后回调事件	Function(e:Event)

Form.Item

参数	说明	类型
form	经 Form.create() 包装过的组件会自带 this.props.form 属性	object
required	是否必填	boolean
label	label 标签的文本	string
colon	配合 label 属性使用，表示是否显示 label 后面的冒号	boolean