提交 d07b73fe 编写于 作者: G Gray Choi 提交者: Benjy Cui

docs: translation of form (#2555)

上级 57f08259
---
order: 10
title: 高级搜索
title:
zh-CN: 高级搜索
en-US: Advanced search
---
## zh-CN
三列栅格式的表单排列方式,常用于数据表格的高级搜索。
有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。
## en-US
Three columns layout is othen used to advanced searching of data table.
Because label width is not definite, you need to adjust the custom stlye case by case.
````jsx
import { Form, Input, Row, Col, Button, DatePicker } from 'antd';
const FormItem = Form.Item;
......@@ -16,78 +26,78 @@ ReactDOM.render(
<Row gutter={16}>
<Col sm={8}>
<FormItem
label="搜索名称"
label="Search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" />
<Input placeholder="Please input the search name" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
label="Long search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
label="Search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" />
<Input placeholder="Please input the search name" size="default" />
</FormItem>
</Col>
<Col sm={8}>
<FormItem
label="搜索名称"
label="Search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" />
<Input placeholder="Please input the search name" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
label="Long search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
label="Search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" />
<Input placeholder="Please input the search name" size="default" />
</FormItem>
</Col>
<Col sm={8}>
<FormItem
label="搜索名称"
label="Search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" />
<Input placeholder="Please input the search name" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
label="Long search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
label="Search name"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" />
<Input placeholder="Please input the search name" size="default" />
</FormItem>
</Col>
</Row>
<Row>
<Col span={12} offset={12} style={{ textAlign: 'right' }}>
<Button type="primary" htmlType="submit">搜索</Button>
<Button>清除条件</Button>
<Button type="primary" htmlType="submit">Search</Button>
<Button>Clear</Button>
</Col>
</Row>
</Form>
......@@ -95,7 +105,7 @@ ReactDOM.render(
````
````css
/* 定制样式 */
/* custom style */
.ant-advanced-search-form {
padding: 16px 8px;
......@@ -104,7 +114,7 @@ ReactDOM.render(
border-radius: 6px;
}
/* 由于输入标签长度不确定,所以需要微调使之看上去居中 */
/* becasue the label width is not definite, you need to adjust it to center by yourself */
.ant-advanced-search-form > .ant-row {
position: relative;
left: -6px;
......
---
order: 15
title: 动态增减表单项
title:
zh-CN: 动态增减表单项
en-US: Dynamic form item
---
## zh-CN
动态增加、减少表单项。
## en-US
Dynamically add or remove form items.
````jsx
import { Form, Input, Button } from 'antd';
......@@ -56,16 +64,16 @@ let Demo = React.createClass({
const formItems = getFieldValue('keys').map((k) => {
return (
<Form.Item {...formItemLayout} label={`好朋友${k}:`} key={k}>
<Form.Item {...formItemLayout} label={`good friend${k}:`} key={k}>
<Input {...getFieldProps(`name${k}`, {
rules: [{
required: true,
whitespace: true,
message: '你好友的名字捏!',
message: "Your good friend's name",
}],
})} style={{ width: '80%', marginRight: 8 }}
/>
<Button onClick={() => this.remove(k)}>删除</Button>
<Button onClick={() => this.remove(k)}>remove</Button>
</Form.Item>
);
});
......@@ -73,8 +81,8 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
{formItems}
<Form.Item wrapperCol={{ span: 18, offset: 6 }}>
<Button onClick={this.add} style={{ marginRight: 8 }}>新增好朋友</Button>
<Button type="primary" onClick={this.submit}>提交</Button>
<Button onClick={this.add} style={{ marginRight: 8 }}>add good friend</Button>
<Button type="primary" onClick={this.submit}>submit</Button>
</Form.Item>
</Form>
);
......
---
order: 3
title: 表单控件
title:
zh-CN: 表单控件
en-US: Form controls
---
## zh-CN
展示所有支持的表单控件。
`注`: 输入框:只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
## en-US
A list off all the controls that can be used with form.
`PS`: Input control: Only if set correct type for it, then it will be set correct style
````jsx
import { Form, Input, Select, Checkbox, Radio } from 'antd';
const FormItem = Form.Item;
......@@ -21,7 +31,7 @@ ReactDOM.render(
<Form horizontal>
<FormItem
id="control-input"
label="输入框"
label="input control"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
......@@ -30,7 +40,7 @@ ReactDOM.render(
<FormItem
id="control-textarea"
label="文本域"
label="text area"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
......@@ -39,7 +49,7 @@ ReactDOM.render(
<FormItem
id="select"
label="Select 选择器"
label="Select box"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
......@@ -52,27 +62,27 @@ ReactDOM.render(
</FormItem>
<FormItem
label="Checkbox 多选框"
label="Checkbox"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
<Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
<Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
<Checkbox className="ant-checkbox-vertical" disabled>选项三(不可选)</Checkbox>
<Checkbox className="ant-checkbox-vertical">item 1</Checkbox>
<Checkbox className="ant-checkbox-vertical">item 2</Checkbox>
<Checkbox className="ant-checkbox-vertical" disabled>item 3 (disabled)</Checkbox>
</FormItem>
<FormItem
label="Checkbox 多选框"
label="Checkbox"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
<Checkbox className="ant-checkbox-inline">选项一</Checkbox>
<Checkbox className="ant-checkbox-inline">选项二</Checkbox>
<Checkbox className="ant-checkbox-inline">选项三</Checkbox>
<Checkbox className="ant-checkbox-inline">item 1</Checkbox>
<Checkbox className="ant-checkbox-inline">item 2</Checkbox>
<Checkbox className="ant-checkbox-inline">item 3</Checkbox>
</FormItem>
<FormItem
label="Radio 单选框"
label="Radio"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
......
---
order: 14
title: 与 Modal 配合使用
title:
zh-CN: 与 Modal 配合使用
en-US: To use with modal
---
## zh-CN
在 Modal 中使用 Form,当点击 Modal 的确定时,调用 `this.props.form.getFieldsValue` 获取表单内的值。
## en-US
If you use Form in Modal, when to click the Modal, it will invoke `this.props.form.getFieldsValue` to get values of form.
````jsx
import { Button, Form, Input, Modal } from 'antd';
const createForm = Form.create;
......@@ -38,17 +46,17 @@ let Demo = React.createClass({
return (
<div>
<Button type="primary" onClick={this.showModal}>点击有惊喜</Button>
<Modal title="登录" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
<Modal title="login" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名"
label="User name"
>
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
label="Password"
>
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
</FormItem>
......
---
order: 2
title: 典型表单
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;
......@@ -13,7 +21,7 @@ const RadioGroup = Radio.Group;
let Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
console.log('收到表单值:', this.props.form.getFieldsValue());
console.log('Received values of form:', this.props.form.getFieldsValue());
},
render() {
......@@ -26,40 +34,40 @@ let Demo = React.createClass({
<Form horizontal onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="用户名"
label="User name"
>
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
<p className="ant-form-text" id="userName" name="userName">Big eye minion</p>
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
label="Password"
>
<Input type="password" {...getFieldProps('pass', { initialValue: '' })} placeholder="请输入密码" />
<Input type="password" {...getFieldProps('pass', { initialValue: '' })} placeholder="Please input the password" />
</FormItem>
<FormItem
{...formItemLayout}
label="您的性别"
label="Gender"
>
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
<Radio value="male">male</Radio>
<Radio value="female">female</Radio>
</RadioGroup>
</FormItem>
<FormItem
{...formItemLayout}
label="备注"
help="随便写点什么"
label="remarks"
help="Please input something"
>
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark', { initialValue: '' })} />
<Input type="textarea" placeholder="Please input something" {...getFieldProps('remark', { initialValue: '' })} />
</FormItem>
<FormItem
{...formItemLayout}
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
label={<span>Sold myself to Hua palace <Tooltip title="I come for Qiu Xiang"><Icon type="question-circle-o" /></Tooltip></span>}
>
<Checkbox {...getFieldProps('agreement', { initialValue: false, valuePropName: 'checked' })}>同意</Checkbox>
<Checkbox {...getFieldProps('agreement', { initialValue: false, valuePropName: 'checked' })}>agree</Checkbox>
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
<Button type="primary" htmlType="submit">确定</Button>
<Button type="primary" htmlType="submit">OK</Button>
</FormItem>
</Form>
);
......
---
order: 1
title: 平行排列
title:
zh-CN: 平行排列
en-US: Inline form
---
## zh-CN
行内排列,常用于登录界面。
## en-US
Inline form is often used for login.
````jsx
import { Form, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;
......@@ -12,7 +20,7 @@ const FormItem = Form.Item;
let Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
console.log('收到表单值:', this.props.form.getFieldsValue());
console.log('Received values of form:', this.props.form.getFieldsValue());
},
render() {
......@@ -20,23 +28,23 @@ let Demo = React.createClass({
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem
label="账户"
label="Account"
>
<Input placeholder="请输入账户名"
<Input placeholder="Please input the account"
{...getFieldProps('userName')}
/>
</FormItem>
<FormItem
label="密码"
label="Password"
>
<Input type="password" placeholder="请输入密码"
<Input type="password" placeholder="Please input the password"
{...getFieldProps('password')}
/>
</FormItem>
<FormItem>
<Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
<Checkbox {...getFieldProps('agreement')}>Remember me</Checkbox>
</FormItem>
<Button type="primary" htmlType="submit">登录</Button>
<Button type="primary" htmlType="submit">Submit</Button>
</Form>
);
},
......
---
order: 4
title: 输入框组合
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;
......@@ -23,7 +31,7 @@ const selectAfter = (
ReactDOM.render(
<Form horizontal>
<FormItem
label="标签输入框"
label="Input control"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
......@@ -31,7 +39,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="标签输入框"
label="Input control"
labelCol={{ span: 6 }}
validateStatus="success"
wrapperCol={{ span: 16 }}
......@@ -40,7 +48,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="select 标签输入框"
label="Select input control"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
......@@ -48,7 +56,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="输入身份证"
label="Please input your identity number"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
......@@ -69,7 +77,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="电话号码"
label="Tel"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
......
---
order: 5
title: 表单组合
title:
zh-CN: 表单组合
en-US: mix
---
## zh-CN
集中营,展示和表单相关的其他 ant-design 组件。
## en-US
A mix to demonstrate others ant-design component related to form.
````jsx
import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
Cascader, Slider, Button, Col, Upload, Icon } from 'antd';
......@@ -15,13 +23,13 @@ const RadioGroup = Radio.Group;
const areaData = [{
value: 'shanghai',
label: '上海',
label: 'Shanghai',
children: [{
value: 'shanghaishi',
label: '上海市',
label: 'Shanghai',
children: [{
value: 'pudongxinqu',
label: '浦东新区',
label: 'Pudong New District',
}],
}],
}];
......@@ -29,7 +37,7 @@ const areaData = [{
let Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
console.log('收到表单值:', this.props.form.getFieldsValue());
console.log('Received the values of form', this.props.form.getFieldsValue());
},
normFile(e) {
......@@ -44,29 +52,29 @@ let Demo = React.createClass({
return (
<Form horizontal onSubmit={this.handleSubmit} >
<FormItem
label="InputNumber 数字输入框"
label="InputNumber Control"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
<InputNumber min={1} max={10} style={{ width: 100 }}
{...getFieldProps('inputNumber', { initialValue: 3 })}
/>
<span className="ant-form-text"> 台机器</span>
<span className="ant-form-text"> machines</span>
</FormItem>
<FormItem
label="我是标题"
label="I'm the title"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
<p className="ant-form-text" id="static" name="static">O, wind, if winter comes, can spring be far behind?</p>
<p className="ant-form-text">
<a href="#">链接文字</a>
<a href="#">link</a>
</p>
</FormItem>
<FormItem
label="Switch 开关"
label="Switch"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
......@@ -75,7 +83,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="Slider 滑动输入条"
label="Slider"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
......@@ -84,7 +92,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="Select 选择器"
label="Select"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
......@@ -100,7 +108,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="级联选择"
label="Cascader"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
......@@ -110,7 +118,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="DatePicker 日期选择框"
label="DatePicker"
labelCol={{ span: 8 }}
required
>
......@@ -131,7 +139,7 @@ let Demo = React.createClass({
<FormItem
label="TimePicker 时间选择器"
label="TimePicker"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
......@@ -140,21 +148,21 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="选项"
label="Options"
labelCol={{ span: 8 }}
>
<RadioGroup {...getFieldProps('rg')}>
<RadioButton value="a">选项一</RadioButton>
<RadioButton value="b">选项二</RadioButton>
<RadioButton value="c">选项三</RadioButton>
<RadioButton value="a">item 1</RadioButton>
<RadioButton value="b">item 2</RadioButton>
<RadioButton value="c">item 3</RadioButton>
</RadioGroup>
</FormItem>
<FormItem
label="logo"
label="logo"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
help="提示信息要长长长长长长长长长长长长长长"
help="longgggggggggggggggggggggggggggggggggg"
>
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
{...getFieldProps('upload', {
......@@ -163,13 +171,13 @@ let Demo = React.createClass({
})}
>
<Button type="ghost">
<Icon type="upload" /> 点击上传
<Icon type="upload" /> Click to upload
</Button>
</Upload>
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 8 }} style={{ marginTop: 24 }}>
<Button type="primary" htmlType="submit">确定</Button>
<Button type="primary" htmlType="submit">OK</Button>
</FormItem>
</Form>
);
......
---
order: 11
title: 表单校验
title:
zh-CN: 表单校验
en-US: Basic validate
---
## zh-CN
基本的表单校验例子。
## en-US
Basic validatation for form.
````jsx
import { Button, Form, Input } from 'antd';
const createForm = Form.create;
......@@ -38,7 +46,7 @@ let BasicDemo = React.createClass({
} else {
setTimeout(() => {
if (value === 'JasonWood') {
callback([new Error('抱歉,该用户名已被占用。')]);
callback([new Error('Sorry, the user name is already in use.')]);
} else {
callback();
}
......@@ -57,7 +65,7 @@ let BasicDemo = React.createClass({
checkPass2(rule, value, callback) {
const { getFieldValue } = this.props.form;
if (value && value !== getFieldValue('passwd')) {
callback('两次输入密码不一致!');
callback('The two passwords you enter is inconsistent!');
} else {
callback();
}
......@@ -67,7 +75,7 @@ let BasicDemo = React.createClass({
const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
const nameProps = getFieldProps('name', {
rules: [
{ required: true, min: 5, message: '用户名至少为 5 个字符' },
{ required: true, min: 5, message: 'User name for at least 5 characters' },
{ validator: this.userExists },
],
});
......@@ -79,14 +87,14 @@ let BasicDemo = React.createClass({
trigger: 'onBlur',
}, {
rules: [
{ type: 'email', message: '请输入正确的邮箱地址' },
{ type: 'email', message: 'Please input the correct email' },
],
trigger: ['onBlur', 'onChange'],
}],
});
const passwdProps = getFieldProps('passwd', {
rules: [
{ required: true, whitespace: true, message: '请填写密码' },
{ required: true, whitespace: true, message: 'Please enter your password' },
{ validator: this.checkPass },
],
});
......@@ -94,14 +102,14 @@ let BasicDemo = React.createClass({
rules: [{
required: true,
whitespace: true,
message: '请再次输入密码',
message: 'Please confirm your password',
}, {
validator: this.checkPass2,
}],
});
const textareaProps = getFieldProps('textarea', {
rules: [
{ required: true, message: '真的不打算写点什么吗?' },
{ required: true, message: 'Really not supposed to write something?' },
],
});
const formItemLayout = {
......@@ -112,24 +120,24 @@ let BasicDemo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名"
label="User name"
hasFeedback
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
help={isFieldValidating('name') ? 'validating...' : (getFieldError('name') || []).join(', ')}
>
<Input {...nameProps} placeholder="实时校验,输入 JasonWood 看看" />
<Input {...nameProps} placeholder="Real-tiem validation, try to input JasonWood" />
</FormItem>
<FormItem
{...formItemLayout}
label="邮箱"
label="Email"
hasFeedback
>
<Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
<Input {...emailProps} type="email" placeholder="This control uses onBlur and onChange" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
label="Password"
hasFeedback
>
<Input {...passwdProps} type="password" autoComplete="off"
......@@ -139,25 +147,25 @@ let BasicDemo = React.createClass({
<FormItem
{...formItemLayout}
label="确认密码"
label="Confirm password"
hasFeedback
>
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="Two passwords that you enter must be consistent"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
</FormItem>
<FormItem
{...formItemLayout}
label="备注"
label="remark"
>
<Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
<Input {...textareaProps} type="textarea" placeholder="Please write something" id="textarea" name="textarea" />
</FormItem>
<FormItem wrapperCol={{ span: 12, offset: 7 }}>
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
<Button type="primary" onClick={this.handleSubmit}>OK</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重置</Button>
<Button type="ghost" onClick={this.handleReset}>Reset</Button>
</FormItem>
</Form>
);
......
---
order: 13
title: 自定义校验规则
title:
zh-CN: 自定义校验规则
en-US: Customized validation
---
## zh-CN
密码校验实例。
这里使用了 `this.props.form.validateFields` 方法,在对第一次输入的密码进行校验时会触发二次密码的校验。
## en-US
Customized validation for Password.
To use `this.props.form.validateFields` method, when validating first password you enter will trigger the seconcd password validation.
````jsx
import { Button, Form, Input, Row, Col } from 'antd';
import classNames from 'classnames';
......@@ -21,9 +31,9 @@ let Demo = React.createClass({
getInitialState() {
return {
dirty: false,
passBarShow: false, // 是否显示密码强度提示条
passBarShow: false, // Whether to display a tooltip of password strength
rePassBarShow: false,
passStrength: 'L', // 密码强度
passStrength: 'L', // Password strength
rePassStrength: 'L',
};
},
......@@ -42,7 +52,7 @@ let Demo = React.createClass({
getPassStrenth(value, type) {
if (value) {
let strength;
// 密码强度的校验规则自定义,这里只是做个简单的示例
// Customized the password strength, here is just a simple example
if (value.length < 6) {
strength = 'L';
} else if (value.length <= 9) {
......@@ -80,7 +90,7 @@ let Demo = React.createClass({
this.getPassStrenth(value, 'rePass');
if (value && value !== form.getFieldValue('pass')) {
callback('两次输入密码不一致!');
callback('Two passwords you enter is inconsistent!');
} else {
callback();
}
......@@ -95,9 +105,9 @@ let Demo = React.createClass({
'ant-pwd-strength-high': strength === 'H',
});
const level = {
L: '',
M: '',
H: '',
L: 'Low',
M: 'Middle',
H: 'High',
};
return (
......@@ -119,18 +129,18 @@ let Demo = React.createClass({
const passProps = getFieldProps('pass', {
rules: [
{ required: true, whitespace: true, message: '请填写密码' },
{ required: true, whitespace: true, message: 'Please enter your password' },
{ validator: this.checkPass },
],
onChange: (e) => {
console.log('你的密码就是这样被盗的:', e.target.value);
console.log('Your password is stolen in this way', e.target.value);
},
});
const rePassProps = getFieldProps('rePass', {
rules: [{
required: true,
whitespace: true,
message: '请再次输入密码',
message: 'Please confirm your password',
}, {
validator: this.checkPass2,
}],
......@@ -146,7 +156,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="密码"
label="Password"
>
<Input {...passProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
......@@ -167,7 +177,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="确认密码"
label="Confirm password"
>
<Input {...rePassProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
......
---
order: 12
title: 校验其他组件
title:
zh-CN: 校验其他组件
en-US: Others components related to validation
---
## zh-CN
提供以下组件表单域的校验:`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`,进行校验,可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。
## en-US
Provide validation for fllowing input filed: `Select` `Radio` `DatePicker` `InputNumber` `Cascader`. To use `validateFieldsAndScroll` with form validation, it will scroll the form to the failed input field which is not in visible area.
````jsx
import { Select, Radio, Checkbox, Button, DatePicker, TimePicker, InputNumber, Form, Cascader, Icon } from 'antd';
const Option = Select.Option;
......@@ -40,7 +48,7 @@ let Demo = React.createClass({
checkBirthday(rule, value, callback) {
if (value && value.getTime() >= Date.now()) {
callback(new Error('你不可能在未来出生吧!'));
callback(new Error("You can't be born in the future!"));
} else {
callback();
}
......@@ -48,7 +56,7 @@ let Demo = React.createClass({
checkPrime(rule, value, callback) {
if (value !== 11) {
callback(new Error('8~12之间的质数明明是11啊!'));
callback(new Error('The prime number between 8 to 12 is obiviously 11!'));
} else {
callback();
}
......@@ -57,26 +65,26 @@ let Demo = React.createClass({
render() {
const address = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhe Jiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hang Zhou',
}],
}];
const { getFieldProps } = this.props.form;
const selectProps = getFieldProps('select', {
rules: [
{ required: true, message: '请选择您的国籍' },
{ required: true, message: 'Please select your country' },
],
});
const multiSelectProps = getFieldProps('multiSelect', {
rules: [
{ required: true, message: '请选择您喜欢的颜色', type: 'array' },
{ required: true, message: 'Please select your favourite colors', type: 'array' },
],
});
const radioProps = getFieldProps('radio', {
rules: [
{ required: true, message: '请选择您的性别' },
{ required: true, message: 'Please select your gender' },
],
});
const birthdayProps = getFieldProps('birthday', {
......@@ -84,7 +92,7 @@ let Demo = React.createClass({
{
required: true,
type: 'date',
message: '你的生日是什么呢?',
message: 'When is your birthday?',
}, {
validator: this.checkBirthday,
},
......@@ -93,7 +101,7 @@ let Demo = React.createClass({
const timeProps = getFieldProps('time', {
getValueFromEvent: (value, timeString) => timeString,
rules: [
{ required: true, message: '请选择一个时间' },
{ required: true, message: 'Please select the time' },
],
});
const primeNumberProps = getFieldProps('primeNumber', {
......@@ -110,80 +118,80 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="国籍"
label="Country"
>
<Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
<Option value="china">中国</Option>
<Option value="use">美国</Option>
<Option value="japan">日本</Option>
<Option value="korean">韩国</Option>
<Option value="Thailand">泰国</Option>
<Select {...selectProps} placeholder="Please select a country" style={{ width: '100%' }}>
<Option value="china">China</Option>
<Option value="use">U.S.A</Option>
<Option value="japan">Japan</Option>
<Option value="korean">Korea</Option>
<Option value="Thailand">Thai</Option>
</Select>
</FormItem>
<FormItem
{...formItemLayout}
label="喜欢的颜色"
label="Favourite colors"
>
<Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
<Option value="yellow">黄色</Option>
<Option value="green">绿色</Option>
<Option value="blue">蓝色</Option>
<Select {...multiSelectProps} multiple placeholder="Please select favourite colors" style={{ width: '100%' }}>
<Option value="red">Red</Option>
<Option value="orange">Orange</Option>
<Option value="yellow">Yellow</Option>
<Option value="green">Green</Option>
<Option value="blue">Blue</Option>
</Select>
</FormItem>
<FormItem
{...formItemLayout}
label="性别"
label="Gender"
>
<RadioGroup {...radioProps}>
<Radio value="male"></Radio>
<Radio value="female"></Radio>
<Radio value="male">male</Radio>
<Radio value="female">female</Radio>
</RadioGroup>
<span><Icon type="info-circle-o" /> 暂不支持其它性别</span>
<span><Icon type="info-circle-o" /> Temporarily does not support ohter gender</span>
</FormItem>
<FormItem
{...formItemLayout}
label="兴趣爱好"
label="Hobby"
>
<Checkbox {...getFieldProps('eat', {
valuePropName: 'checked',
})}>吃饭饭</Checkbox>
})}>eat</Checkbox>
<Checkbox {...getFieldProps('sleep', {
valuePropName: 'checked',
})}>睡觉觉</Checkbox>
})}>sleeping</Checkbox>
<Checkbox {...getFieldProps('beat', {
valuePropName: 'checked',
})}>打豆豆</Checkbox>
})}>dozen doug</Checkbox>
</FormItem>
<FormItem
{...formItemLayout}
label="生日"
label="Birthday"
>
<DatePicker {...birthdayProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="选一个时间"
label="Select the time"
>
<TimePicker {...timeProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="8~12间的质数"
label="A prime number between 8 to 12"
>
<InputNumber {...primeNumberProps} min={8} max={12} />
</FormItem>
<FormItem
{...formItemLayout}
label="选择地址"
label="Please select address"
>
<Cascader {...addressProps} options={address} />
</FormItem>
......@@ -191,9 +199,9 @@ let Demo = React.createClass({
<FormItem
wrapperCol={{ span: 12, offset: 7 }}
>
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
<Button type="primary" onClick={this.handleSubmit}>OK</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重置</Button>
<Button type="ghost" onClick={this.handleReset}>Reset</Button>
</FormItem>
</Form>
);
......
---
order: 6
title: 校验提示
title:
zh-CN: 校验提示
en-US: Validation message
---
## zh-CN
我们为表单控件定义了三种校验状态,为 `<FormItem>` 定义 `validateStatus` 属性即可。
validateStatus: 'success', 'warning', 'error', 'validating'。
......@@ -11,6 +15,16 @@ validateStatus: 'success', 'warning', 'error', 'validating'。
**注意**: 反馈图标只对 `<Input />` 有效。
## en-US
We provide three kinds of validation status for form. You can use it just define `validateStatus` property on `<FormItem>`.
validateStatus: 'success', 'warning', 'error', 'validating'。
To set `hasFeedback` property to `true` enable to display feed icon of input control.
**PS**: Feed icon is just available for `<Input />`.
````jsx
import { Form, Input, DatePicker, Col } from 'antd';
const FormItem = Form.Item;
......@@ -18,73 +32,73 @@ const FormItem = Form.Item;
ReactDOM.render(
<Form horizontal>
<FormItem
label="失败校验"
label="Fail"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="error"
help="请输入数字和字母组合"
help="Please enter a combination of numbers and alphabets"
>
<Input defaultValue="无效选择" id="error" />
<Input defaultValue="unavailable choice" id="error" />
</FormItem>
<FormItem
label="警告校验"
label="Warning"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="warning"
>
<Input defaultValue="前方高能预警" id="warning" />
<Input defaultValue="Warning" id="warning" />
</FormItem>
<FormItem
label="校验中"
label="Validating"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="validating"
help="信息审核中..."
help="The information is being validated..."
>
<Input defaultValue="我是被校验的内容" id="validating" />
<Input defaultValue="I'm the content is being validated" id="validating" />
</FormItem>
<FormItem
label="成功校验"
label="Success"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="success"
>
<Input defaultValue="我是正文" id="success" />
<Input defaultValue="I'm the content" id="success" />
</FormItem>
<FormItem
label="警告校验"
label="Warning"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="warning"
>
<Input defaultValue="前方高能预警" id="warning" />
<Input defaultValue="Warning" id="warning" />
</FormItem>
<FormItem
label="失败校验"
label="Fail"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="error"
help="请输入数字和字母组合"
help="Please enter a combination of numbers and alphabets"
>
<Input defaultValue="无效选择" id="error" />
<Input defaultValue="unavailable choice" id="error" />
</FormItem>
<FormItem
label="行内校验"
label="inline"
labelCol={{ span: 5 }}
help
>
<Col span="6">
<FormItem validateStatus="error" help="请选择正确日期">
<FormItem validateStatus="error" help="Please select the correct date">
<DatePicker />
</FormItem>
</Col>
......
---
category: Components
type: Form Controls
cols: 1
english: Form
---
Forms are used to collect, validate and submit user input, forms contains form elements.
Forms elements are different types of checkboxes, radios, input elements, selectboxes, and more.
## Form
You can align controls of `form` use following methods:
- horizontal align:to horizontally align `label` tag with form control.
- inline align:to set the display property of form controls to `inline-block`.
## Form field
Form must contains form field, form field could be input elements, standard elements,
tag, selectboxes, textareas, and more.
We encapsulate form field in `<Form.Item />`.
```jsx
<Form.Item {...props}>
{children}
</Form.Item>
```
> PS:Standard form always use large size control。
## API
### Form
**more example [rc-form](http://react-component.github.io/form/)**
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|---------|
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0 | object | No
| horizontal | Horizontal align | boolean | false |
| inline | Inline align | boolean | false |
| onSubmit | Defines a function will be called if form data validation is successful | Function(e:Event) | |
| prefixCls | This is the css class name of form component,default value is ant-form,generally you don't need to set it by yourself | string | 'ant-form' |
### Form.create(options)
How to use:
```jsx
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
```
To set `options` as follows.
| Property | Description | Type |
|-----------|------------------------------------------|------------|
| onFieldsChange | Defines a function will called When the value of child of `Form.Item` changed, you can save filed value to Redux store in this function if you need. | Function(props, fields) |
| mapPropsToFields | Convert props to corresponding field value,you can read the values of Redux store in this function if you need | Function(props): Object{ fieldName: Object{ value } } |
If you the form has been decorated by `Form.create` then it has `this.props.form` property, `this.props.form` provides some APIs as follows:
| Property | Description | Type |
|-----------|------------------------------------------|------------|
| getFieldsValue | get specified fields' value, if you don't specify any parameters, you will get all fields' value. | Function([fieldNames: string[]]) |
| getFieldValue | get specified field's value | Function(fieldName: string) |
| setFieldsValue | set specified fields' value | Function(obj: object) |
| setFields | set specified fields' value and Error | Function(obj: object) |
| validateFields | validate specified fields and get theirs value and Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area | reference to `validateFields` |
| getFieldError | get specified field's Error | Function(name) |
| isFieldValidating | To check specified field is being validated | Function(name) |
| resetFields | reset specified fields' value and status, if you don't specify any parameters, it will reset all fields of form | Function([names: string[]]) |
| getFieldProps | two-way binding for form, please read below for details | |
### this.props.form.getFieldProps(id, options)
#### Special attention
Can't use `getFieldProps` in functional component: https://github.com/facebook/react/pull/6534
The return value of `getFieldProps` contains `id``value`(or any other props `valuePropName` that you specified),`ref`,`onChange`(or any other `trigger` `validateTrigger` that you specified), **shouldn't set same property again** in order to avoid conflict. If you concerntate on the details on return value, you can print them to console by `console.log`.
> Don't use `defaultValue` in form, please use `initialValue` instead of it.
#### getFieldProps options
| Property | Description | Type | Default |
|-----------|-----------------------------------------|-----|--------|
| options.id | The unique identity is required | string | |
| options.valuePropName | Props of children node, for exmaple, the prop of Switch is 'checked' | string | 'value' |
| options.initialValue | You can specify initial value, type, optional value of children node | | |
| options.trigger | When to collect the value of children node | string | 'onChange' |
| options.getValueFromEvent | To convert parameters of onChange to the value of control, for example, set value of DatePicker: `(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
| options.validateTrigger | When to validate the value of children node | string | 'onChange' |
| options.rules | validation rule,reference to [async-validator](https://github.com/yiminghe/async-validator) | array | |
| options.onXXX | Because `getFieldProps` will replace events like `onChange` (`trigger` `validateTrigger`, if you still wnat to bind these events, please set them in `options` | function | no |
| options.exclusive | Whether it is exclusive with other controls, particularly for Radio | boolean | false |
### Form.Item
> To put one child in Form.Item is recommended, if it has multiple children, `help` `required` `validateStatus` can't be generated automatically.
| Property | Description | Type | Optional | Default |
|-----------|------------------------------------------|-----------|-------|--------|
| label | Label text | string | | |
| labelCol | The lay out of label, you can set `span` `offset` to something like `{span: 3, offset: 12}` that same with `<Col>` | object | | |
| wrapperCol | To set layout for input controls, reference to labelCol | object | | |
| help | Prompt message, if you don't specify it, the prompt message will be generated by validation rule | string | | |
| extra | Provide extra prompt message, it is similar to help, if you need to display error message and prompt message in the same time, please use this | string | | |
| required | Whether it is required, if you don't specify it, it will be generated by validation rule| bool | | false |
| validateStatus | The validation status, if you don't specify it, it will be generated by validation rule | string | 'success' 'warning' 'error' 'validating' | |
| hasFeedback | To use this with validateStatus, display validation status icon, only use with Input component is recommended | bool | | false |
| prefixCls | This is the css class name of form component,default value is ant-form,generally you don't need to set it by yourself | string | | 'ant-form' |
<style>
.code-box-demo .ant-form-horizontal {
max-width: 540px;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册