mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
docs: add demo for registration, ref: #3594
This commit is contained in:
Benjy Cui
parent
90fbd4da51
commit
6cd841ef31
@ -1,88 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 典型表单
|
||||
en-US: Horizontal form
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
|
||||
|
||||
## en-US
|
||||
|
||||
How to use `Form.create` to get and update values of form.
|
||||
|
||||
````jsx
|
||||
import { Form, Input, Button, Checkbox, Radio, Tooltip, Icon } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
let Demo = React.createClass({
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
console.log('Received values of form:', this.props.form.getFieldsValue());
|
||||
},
|
||||
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
};
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="User name"
|
||||
>
|
||||
<p className="ant-form-text" id="userName" name="userName">Big eye minion</p>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Password"
|
||||
>
|
||||
{getFieldDecorator('pass', { initialValue: '' })(
|
||||
<Input type="password" placeholder="Please input the password" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Gender"
|
||||
>
|
||||
{getFieldDecorator('gender', { initialValue: 'female' })(
|
||||
<RadioGroup>
|
||||
<Radio value="male">male</Radio>
|
||||
<Radio value="female">female</Radio>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="remarks"
|
||||
help="Please input something"
|
||||
>
|
||||
{getFieldDecorator('remark', { initialValue: '' })(
|
||||
<Input type="textarea" placeholder="Please input something" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={<span>Sold myself <Tooltip title="I come for Qiu Xiang"><Icon type="question-circle-o" /></Tooltip></span>}
|
||||
>
|
||||
{getFieldDecorator('agreement', { initialValue: false, valuePropName: 'checked' })(
|
||||
<Checkbox>agree</Checkbox>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
|
||||
<Button type="primary" htmlType="submit">OK</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
Demo = Form.create()(Demo);
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
@ -1,105 +0,0 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 输入框组合
|
||||
en-US: Input group
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
各类输入框的组合展现。
|
||||
|
||||
## en-US
|
||||
|
||||
Input group of different type input controls.
|
||||
|
||||
````jsx
|
||||
import { Form, Input, Select, Col } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const InputGroup = Input.Group;
|
||||
const Option = Select.Option;
|
||||
|
||||
const selectAfter = (
|
||||
<Select defaultValue=".com" style={{ width: 70 }}>
|
||||
<Option value=".com">.com</Option>
|
||||
<Option value=".jp">.jp</Option>
|
||||
<Option value=".cn">.cn</Option>
|
||||
<Option value=".org">.org</Option>
|
||||
</Select>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
label="Input control"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
>
|
||||
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Input control"
|
||||
labelCol={{ span: 6 }}
|
||||
validateStatus="success"
|
||||
wrapperCol={{ span: 16 }}
|
||||
>
|
||||
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Select input control"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
>
|
||||
<Input addonAfter={selectAfter} placeholder="www.mysite" id="site4" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Identity number"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
>
|
||||
<InputGroup>
|
||||
<Col span="6">
|
||||
<Input id="certNo1" />
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="certNo2" />
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="certNo3" />
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="certNo4" />
|
||||
</Col>
|
||||
</InputGroup>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Tel"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
>
|
||||
<InputGroup>
|
||||
<Col span="4">
|
||||
<Input id="tel1" defaultValue="086" />
|
||||
</Col>
|
||||
<Col span="2">
|
||||
<p className="ant-form-split">--</p>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="tel1" />
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="tel2" />
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="tel3" />
|
||||
</Col>
|
||||
</InputGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
||||
, mountNode);
|
||||
````
|
||||
220
components/form/demo/register.md
Normal file
220
components/form/demo/register.md
Normal file
@ -0,0 +1,220 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 注册新用户
|
||||
en-US: Registration
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用户填写必须的信息以注册新用户。
|
||||
|
||||
## en-US
|
||||
|
||||
Fill in this form to create a new account for you.
|
||||
|
||||
````jsx
|
||||
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
|
||||
const residences = [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}];
|
||||
|
||||
const RegistrationForm = Form.create()(React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
passwordDirty: false,
|
||||
};
|
||||
},
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Received values of form: ', values);
|
||||
});
|
||||
},
|
||||
handlePasswordBlur(e) {
|
||||
const value = e.target.value;
|
||||
this.setState({ passwordDirty: this.state.passwordDirty || !!value });
|
||||
},
|
||||
checkPassowrd(rule, value, callback) {
|
||||
const form = this.props.form;
|
||||
if (value && value !== form.getFieldValue('password')) {
|
||||
callback('Two passwords that you enter is inconsistent!');
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
checkConfirm(rule, value, callback) {
|
||||
const form = this.props.form;
|
||||
if (value && this.state.passwordDirty) {
|
||||
form.validateFields(['confirm'], { force: true });
|
||||
}
|
||||
|
||||
callback();
|
||||
},
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
};
|
||||
const prefixSelector = getFieldDecorator('prefix', {
|
||||
initialValue: '86',
|
||||
})(
|
||||
<Select className="icp-selector">
|
||||
<Option value="86">+86</Option>
|
||||
</Select>
|
||||
);
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="E-mail"
|
||||
>
|
||||
{getFieldDecorator('email', {
|
||||
rules: [{
|
||||
type: 'email', message: 'The input is not valid E-mail!',
|
||||
}, {
|
||||
required: true, message: 'Please input your E-mail!',
|
||||
}],
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Password"
|
||||
>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [{
|
||||
required: true, message: 'Please input your password!',
|
||||
}, {
|
||||
validator: this.checkConfirm,
|
||||
}],
|
||||
})(
|
||||
<Input type="password" onBlur={this.handlePasswordBlur} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Confirm Password"
|
||||
>
|
||||
{getFieldDecorator('confirm', {
|
||||
rules: [{
|
||||
required: true, message: 'Please confirm your password!',
|
||||
}, {
|
||||
validator: this.checkPassowrd,
|
||||
}],
|
||||
})(
|
||||
<Input type="password" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={(
|
||||
<span>
|
||||
Nickname
|
||||
<Tooltip title="What do you want other to call you?">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
{getFieldDecorator('nickname', {
|
||||
rules: [{ required: true, message: 'Please input your nickname!' }],
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Habitual Residence"
|
||||
>
|
||||
{getFieldDecorator('residence', {
|
||||
initialValue: ['zhejiang', 'hangzhou', 'xihu'],
|
||||
rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
|
||||
})(
|
||||
<Cascader options={residences} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Phone Number"
|
||||
>
|
||||
{getFieldDecorator('phone', {
|
||||
rules: [{ required: true, message: 'Please input your phone number!' }],
|
||||
})(
|
||||
<Input addonBefore={prefixSelector} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Captcha"
|
||||
>
|
||||
<Row gutter={8}>
|
||||
<Col span={12}>
|
||||
{getFieldDecorator('captcha', {
|
||||
rules: [{ required: true, message: 'Please input the captcha you got!' }],
|
||||
})(
|
||||
<Input size="large" />
|
||||
)}
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Button size="large">Get captcha</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Row>
|
||||
<Col span={14} offset={6}>
|
||||
<p>
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
})(
|
||||
<Checkbox>I had read the <a>agreement</a></Checkbox>
|
||||
)}
|
||||
</p>
|
||||
<Button type="primary" htmlType="submit">Register</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
ReactDOM.render(<RegistrationForm />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-form-demo-register .icp-selector {
|
||||
width: 60px;
|
||||
}
|
||||
````
|
||||
Loading…
Reference in New Issue
Block a user