mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
更新 form demo.
This commit is contained in:
SimaQ
parent
8f72f6cdcf
commit
7b675f0721
@ -1,6 +1,6 @@
|
||||
# 禁用状态
|
||||
|
||||
- order: 2
|
||||
- order: 7
|
||||
|
||||
1) 单独为输入控件设置 `disabled` 属性；
|
||||
|
||||
@ -9,45 +9,42 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Button = antd.Button;
|
||||
var Checkbox = antd.Checkbox;
|
||||
var Radio = antd.Radio;
|
||||
var RadioGroup = antd.Radio.Group;
|
||||
import {Row, Col, Button, Input, Form} from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<Form.Item
|
||||
label="单独禁用输入框："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12">
|
||||
<Form.Input type="text" defaultValue="我是禁用的" disabled />
|
||||
</Form.Item>
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
label="单独禁用输入框："
|
||||
labelCol={{span:5}}
|
||||
wrapperCol={{span:12}}>
|
||||
<Input defaultValue="我是禁用的" disabled />
|
||||
</FormItem>
|
||||
|
||||
<fieldset disabled>
|
||||
<legend>禁用的 fieldset</legend>
|
||||
<Form.Item
|
||||
id="userName"
|
||||
label="用户名："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
required={true} >
|
||||
<Form.Input type="static" value="大眼萌 minion" id="userName" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
id="password"
|
||||
label="密码："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
required={true} >
|
||||
<Form.Input type="password" defaultValue="123456" id="password" />
|
||||
</Form.Item>
|
||||
<div className="row">
|
||||
<div className="col-12 col-offset-5">
|
||||
<Form.Input type="submit" className="ant-btn ant-btn-primary" defaultValue="确 定" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</Form>
|
||||
<fieldset disabled>
|
||||
<legend>禁用的 fieldset</legend>
|
||||
<FormItem
|
||||
id="userName"
|
||||
label="用户名："
|
||||
labelCol={{span:5}}
|
||||
wrapperCol={{span:12}}
|
||||
required={true} >
|
||||
<p className="ant-form-text">大眼萌 minion</p>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
id="password"
|
||||
label="密码："
|
||||
labelCol={{span:5}}
|
||||
wrapperCol={{span:12}}
|
||||
required={true} >
|
||||
<Input type="password" defaultValue="123456" id="password" />
|
||||
</FormItem>
|
||||
<Row>
|
||||
<Col span="12" offset="5">
|
||||
<Button htmlType="submit" type="primary">确定</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</fieldset>
|
||||
</Form>
|
||||
, document.getElementById('components-form-demo-disabled'));
|
||||
````
|
||||
|
||||
@ -9,89 +9,87 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
var Checkbox = antd.Checkbox;
|
||||
var Radio = antd.Radio;
|
||||
var RadioGroup = antd.Radio.Group;
|
||||
import {Form, Input, Select, Checkbox, Radio} from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
function handleSelectChange(value) {
|
||||
console.log('selected ' + value);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<Form.Item
|
||||
id="control-input"
|
||||
label="输入框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14">
|
||||
<Form.Input type="text" id="control-input" placeholder="Please enter..." />
|
||||
</Form.Item>
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
id="control-input"
|
||||
label="输入框："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}>
|
||||
<Input id="control-input" placeholder="Please enter..." />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
id="control-textarea"
|
||||
label="文本域："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14">
|
||||
<Form.Input type="textarea" id="control-textarea"/>
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
id="control-textarea"
|
||||
label="文本域："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}>
|
||||
<Input type="textarea" id="control-textarea"/>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
id="select"
|
||||
label="Select 选择器："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14">
|
||||
<Select id="select" size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
id="select"
|
||||
label="Select 选择器："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}>
|
||||
<Select id="select" size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
< Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="Checkbox 多选框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-18" >
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox />选项一
|
||||
</label>
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox />选项二
|
||||
</label>
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox disabled={true} />选项三（不可选）
|
||||
</label>
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
label="Checkbox 多选框："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 18}} >
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox />选项一
|
||||
</label>
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox />选项二
|
||||
</label>
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox disabled={true} />选项三（不可选）
|
||||
</label>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="Checkbox 多选框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-18" >
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项一
|
||||
</label>
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项二
|
||||
</label>
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项三
|
||||
</label>
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
label="Checkbox 多选框："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 18}} >
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项一
|
||||
</label>
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项二
|
||||
</label>
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项三
|
||||
</label>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="Radio 单选框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-18" >
|
||||
<RadioGroup value="b">
|
||||
<Radio value="a">A</Radio>
|
||||
<Radio value="b">B</Radio>
|
||||
<Radio value="c">C</Radio>
|
||||
<Radio value="d">D</Radio>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<FormItem
|
||||
label="Radio 单选框："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 18}} >
|
||||
<RadioGroup value="b">
|
||||
<Radio value="a">A</Radio>
|
||||
<Radio value="b">B</Radio>
|
||||
<Radio value="c">C</Radio>
|
||||
<Radio value="d">D</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
, document.getElementById('components-form-demo-form-controls'));
|
||||
````
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 水平排列的表单
|
||||
|
||||
- order: 0
|
||||
- order: 2
|
||||
|
||||
示例展示了如何通过使用 `Form.ValueMixin` 来获取和更新表单提交的数值。
|
||||
|
||||
@ -9,15 +9,11 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Button = antd.Button;
|
||||
var Checkbox = antd.Checkbox;
|
||||
var Radio = antd.Radio;
|
||||
var RadioGroup = antd.Radio.Group;
|
||||
var Button = antd.Button;
|
||||
var message = antd.message;
|
||||
import {Form, Input, Button, Checkbox, Radio, Row, Col, Message} from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
var Demo = React.createClass({
|
||||
const Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
getInitialState() {
|
||||
@ -34,7 +30,7 @@ var Demo = React.createClass({
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
|
||||
Message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
|
||||
if (typeof v === 'undefined') {
|
||||
return '';
|
||||
}
|
||||
@ -43,58 +39,58 @@ var Demo = React.createClass({
|
||||
},
|
||||
|
||||
render() {
|
||||
var formData = this.state.formData;
|
||||
const formData = this.state.formData;
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit}>
|
||||
<Form.Item
|
||||
id="userName"
|
||||
<FormItem
|
||||
label="用户名："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-6"
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 6}}
|
||||
required={true} >
|
||||
<Form.Input type="static" value="大眼萌 minion" id="userName" name="userName" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
id="password"
|
||||
label="密码："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}
|
||||
required={true} >
|
||||
<Form.Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
<Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="您的性别："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}
|
||||
required={true} >
|
||||
<RadioGroup value="male" name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
|
||||
<Radio value="male">男的</Radio>
|
||||
<Radio value="female">女的</Radio>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
</FormItem>
|
||||
<FormItem
|
||||
id="remark"
|
||||
label="备注："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}
|
||||
required={true}
|
||||
help="随便写点什么" >
|
||||
<Form.Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
wrapperClassName="col-14 col-offset-6" >
|
||||
<Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
wrapperCol={{span: 14, offset: 6}} >
|
||||
<label>
|
||||
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 同意
|
||||
</label>
|
||||
</Form.Item>
|
||||
<div className="row">
|
||||
<div className="col-16 col-offset-6">
|
||||
</FormItem>
|
||||
<Row>
|
||||
<Col span="16" offset="6">
|
||||
<Button type="primary" htmlType="submit">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<Demo />, document.getElementById('components-form-demo-horizontal-form'));
|
||||
````
|
||||
|
||||
@ -5,12 +5,10 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Checkbox = antd.Checkbox;
|
||||
var Button = antd.Button;
|
||||
var message = antd.message;
|
||||
import {Form, Input, Button, Checkbox, Message} from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
|
||||
var Demo = React.createClass({
|
||||
const Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
getInitialState() {
|
||||
@ -25,34 +23,34 @@ var Demo = React.createClass({
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
|
||||
Message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
|
||||
if (typeof v === 'undefined') {
|
||||
return '';
|
||||
}
|
||||
return v;
|
||||
}));
|
||||
}));
|
||||
},
|
||||
|
||||
render() {
|
||||
var formData = this.state.formData;
|
||||
const formData = this.state.formData;
|
||||
return (
|
||||
<Form inline onSubmit={this.handleSubmit}>
|
||||
<Form.Item
|
||||
<FormItem
|
||||
id="userName"
|
||||
label="账户：">
|
||||
<Form.Input type="text" placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
<Input placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
id="password"
|
||||
label="密码：">
|
||||
<Form.Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 记住我
|
||||
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 记住我
|
||||
</label>
|
||||
</Form.Item>
|
||||
<Form.Input type="submit" className="ant-btn ant-btn-primary" defaultValue="登 录" />
|
||||
</FormItem>
|
||||
<Button type="primary" htmlType="submit">登录</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
95
components/form/demo/input-group.md
Normal file
95
components/form/demo/input-group.md
Normal file
@ -0,0 +1,95 @@
|
||||
# Input 输入框组合集
|
||||
|
||||
- order: 4
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import {Form, Input, Select, Row, Col} from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const InputGroup = Input.Group;
|
||||
const Option = Select.Option;
|
||||
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
label="标签输入框："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 16}}>
|
||||
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1"/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="标签输入框："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 16}}>
|
||||
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2"/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="select 标签输入框："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 16}}>
|
||||
<InputGroup>
|
||||
<Input id="site4" placeholder="www.mysite" />
|
||||
<div className="ant-input-group-wrap">
|
||||
<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>
|
||||
</div>
|
||||
</InputGroup>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="输入身份证："
|
||||
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="电话号码："
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 16}}>
|
||||
<Row>
|
||||
<Col span="4">
|
||||
<Input id="tel1" value="086" />
|
||||
</Col>
|
||||
<Col span="2">
|
||||
<p className="ant-form-split">--</p>
|
||||
</Col>
|
||||
<Col span="18">
|
||||
<InputGroup>
|
||||
<Col span="8">
|
||||
<Input id="tel1" />
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<Input id="tel2" />
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<Input id="tel3" />
|
||||
</Col>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
||||
, document.getElementById('components-form-demo-input-group'));
|
||||
````
|
||||
31
components/form/demo/input.md
Normal file
31
components/form/demo/input.md
Normal file
@ -0,0 +1,31 @@
|
||||
# Input 输入框
|
||||
|
||||
- order: 0
|
||||
|
||||
我们为 `<Input />` 输入框定义了三种尺寸（大、默认、小），具体使用详见 [API]()。
|
||||
|
||||
注意： 在表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import {Row, Col, Input} from 'antd';
|
||||
const InputGroup = Input.Group;
|
||||
|
||||
ReactDOM.render(
|
||||
<Row>
|
||||
<InputGroup>
|
||||
<Col span="6">
|
||||
<Input id="largeInput" size="large" placeholder="大尺寸" />
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="defaultInput" placeholder="默认尺寸" />
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Input id="smallInput" placeholder="小尺寸" size="small" />
|
||||
</Col>
|
||||
</InputGroup>
|
||||
</Row>
|
||||
, document.getElementById('components-form-demo-input'));
|
||||
````
|
||||
@ -1,24 +1,15 @@
|
||||
# 表单组合
|
||||
|
||||
- order: 7
|
||||
- order: 5
|
||||
|
||||
集中营，展示和表单相关的其他 ant-design 组件。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
var InputNumber = antd.InputNumber;
|
||||
var Datepicker = antd.Datepicker;
|
||||
var Switch = antd.Switch;
|
||||
var Menu = antd.Menu;
|
||||
var Dropdown = antd.Dropdown;
|
||||
var Slider = antd.Slider;
|
||||
var Icon = antd.Icon;
|
||||
var Button = antd.Button;
|
||||
var message = antd.message;
|
||||
import {Form, Input, Select, InputNumber, Datepicker, Switch, Menu, Dropdown, Slider, Icon, Button, Message, Row, Col} from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
|
||||
var Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
@ -51,46 +42,46 @@ var Demo = React.createClass({
|
||||
var formData = this.state.formData;
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit} >
|
||||
<Form.Item
|
||||
<FormItem
|
||||
label="InputNumber 数字输入框："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 10}}
|
||||
required={true} >
|
||||
<InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
|
||||
<span className="ant-form-text"> 台机器</span>
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
<FormItem
|
||||
label="我是标题："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 10}}
|
||||
required={true} >
|
||||
<Form.Input type="static" id="static" name="static" onChange={this.setValue.bind(this, 'static')} value="唧唧复唧唧木兰当户织呀" />
|
||||
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
|
||||
<p className="ant-form-text">
|
||||
<a href="javascript:;">链接文字</a>
|
||||
</p>
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
<FormItem
|
||||
label="Switch 开关："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 10}}
|
||||
required={true} >
|
||||
<Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} />
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
<FormItem
|
||||
label="Slider 滑动输入条："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 10}}
|
||||
required={true}>
|
||||
<Slider marks={["A","B","C","D","E","F","G"]} name="slider" onChange={this.setValue.bind(this, 'slider')} />
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
<FormItem
|
||||
label="Select 选择器："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-16"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 16}}
|
||||
required={true}>
|
||||
<Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
|
||||
<Option value="jack">jack</Option>
|
||||
@ -98,27 +89,27 @@ var Demo = React.createClass({
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
<FormItem
|
||||
label="Datepicker 日期选择框："
|
||||
labelClassName="col-8"
|
||||
labelCol={{span: 8}}
|
||||
required={true}>
|
||||
<div className="col-6">
|
||||
<Col span="6">
|
||||
<Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
|
||||
</div>
|
||||
<div className="col-1">
|
||||
</Col>
|
||||
<Col span="1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Datepicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
|
||||
</div>
|
||||
</Form.Item>
|
||||
<div className="row">
|
||||
<div className="col-16 col-offset-8">
|
||||
</Col>
|
||||
</FormItem>
|
||||
<Row>
|
||||
<Col span="16" offset="8">
|
||||
<Button type="primary" htmlType="submit">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,95 +1,95 @@
|
||||
# 校验提示
|
||||
|
||||
- order: 4
|
||||
- order: 6
|
||||
|
||||
我们为表单控件定义了三种校验状态，为 `<Form.Item>` 定义 `validateStatus` 属性即可。
|
||||
我们为表单控件定义了三种校验状态，为 `<FormItem>` 定义 `validateStatus` 属性即可。
|
||||
|
||||
validateStatus: ['success', 'warning', 'error', 'validating']。
|
||||
|
||||
另外为输入框添加反馈图标，设置 `<Form.Item>` 的 `hasFeedback` 属性值为 `true` 即可。
|
||||
另外为输入框添加反馈图标，设置 `<FormItem>` 的 `hasFeedback` 属性值为 `true` 即可。
|
||||
|
||||
**注意**: 反馈图标只对 `<Form.Input>` 有效。
|
||||
**注意**: 反馈图标只对 `<Input />` 有效。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Datepicker = antd.Datepicker;
|
||||
import {Form, Input, Datepicker, Row, Col} from "antd";
|
||||
const FormItem = Form.Item;
|
||||
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<Form.Item
|
||||
label="失败校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
validateStatus="error"
|
||||
help="请输入数字和字母组合">
|
||||
<Form.Input type="text" value="无效选择" id="error" />
|
||||
</Form.Item>
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
label="失败校验："
|
||||
labelCol={{span: 5}}
|
||||
wrapperCol={{span: 12}}
|
||||
validateStatus="error"
|
||||
help="请输入数字和字母组合">
|
||||
<Input value="无效选择" id="error" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="警告校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
validateStatus="warning">
|
||||
<Form.Input type="text" value="前方高能预警" id="warning" />
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
label="警告校验："
|
||||
labelCol={{span: 5}}
|
||||
wrapperCol={{span: 12}}
|
||||
validateStatus="warning">
|
||||
<Input value="前方高能预警" id="warning" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="校验中："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="validating"
|
||||
help="信息审核中...">
|
||||
<Form.Input type="text" value="我是被校验的内容" id="validating" />
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
label="校验中："
|
||||
labelCol={{span: 5}}
|
||||
wrapperCol={{span: 12}}
|
||||
hasFeedback={true}
|
||||
validateStatus="validating"
|
||||
help="信息审核中...">
|
||||
<Input value="我是被校验的内容" id="validating" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="成功校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="success">
|
||||
<Form.Input type="text" value="我是正文" id="success" />
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
label="成功校验："
|
||||
labelCol={{span: 5}}
|
||||
wrapperCol={{span: 12}}
|
||||
hasFeedback={true}
|
||||
validateStatus="success">
|
||||
<Input value="我是正文" id="success" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="警告校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="warning">
|
||||
<Form.Input type="text" value="前方高能预警" id="warning" />
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
label="警告校验："
|
||||
labelCol={{span: 5}}
|
||||
wrapperCol={{span: 12}}
|
||||
hasFeedback={true}
|
||||
validateStatus="warning">
|
||||
<Input value="前方高能预警" id="warning" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="失败校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="error"
|
||||
help="请输入数字和字母组合">
|
||||
<Form.Input type="text" value="无效选择" id="error" />
|
||||
</Form.Item>
|
||||
<FormItem
|
||||
label="失败校验："
|
||||
labelCol={{span: 5}}
|
||||
wrapperCol={{span: 12}}
|
||||
hasFeedback={true}
|
||||
validateStatus="error"
|
||||
help="请输入数字和字母组合">
|
||||
<Input value="无效选择" id="error" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label="Datepicker 失败："
|
||||
labelClassName="col-5"
|
||||
validateStatus="error">
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
<div className="col-1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
<div className="col-19 col-offset-5">
|
||||
<p className="ant-form-explain">请输入正确选项</p>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<FormItem
|
||||
label="Datepicker 失败："
|
||||
labelCol={{span: 5}}
|
||||
validateStatus="error">
|
||||
<Col span="6">
|
||||
<Datepicker />
|
||||
</Col>
|
||||
<Col span="1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Datepicker />
|
||||
</Col>
|
||||
<Col span="19" offset="5">
|
||||
<p className="ant-form-explain">请输入正确选项</p>
|
||||
</Col>
|
||||
</FormItem>
|
||||
</Form>
|
||||
, document.getElementById('components-form-demo-validate'));
|
||||
````
|
||||
|
||||
Loading…
Reference in New Issue
Block a user