feat: rename name to id

components/form/FormItem.jsx

@@ -22,7 +22,7 @@ class FormItem extends React.Component {
     const context = this.context;
     const props = this.props;
     if (props.help === undefined && context.form) {
-      return (context.form.getFieldError(props.name) || []).join(', ');
+      return (context.form.getFieldError(props.id) || []).join(', ');
     }
 
     return props.help;
@@ -42,7 +42,7 @@ class FormItem extends React.Component {
 
   getValidateStatus() {
     const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
-    const field = this.props.name;
+    const field = this.props.id;
 
     if (isFieldValidating(field)) {
       return 'validating';
@@ -119,10 +119,10 @@ class FormItem extends React.Component {
     const context = this.context;
     const props = this.props;
     let children = props.children;
-    if (context.form && props.name && props.options) {
+    if (context.form && props.id && props.options) {
       children = React.cloneElement(
         React.Children.only(children),
-        context.form.getFieldProps(props.name, props.options)
+        context.form.getFieldProps(props.id, props.options)
       );
     }
     return [
@@ -190,7 +190,7 @@ FormItem.propTypes = {
   hasFeedback: React.PropTypes.bool,
   wrapperCol: React.PropTypes.object,
   className: React.PropTypes.string,
-  name: React.PropTypes.string,
+  id: React.PropTypes.string,
   options: React.PropTypes.object,
   children: React.PropTypes.node,
 };

components/form/demo/validate-basic.md

@@ -77,17 +77,16 @@ class BasicDemo extends React.Component {
   }
 
   render() {
-    const { isFieldValidating, getFieldError, getFieldProps } = this.props.form;
+    const { isFieldValidating, getFieldError } = this.props.form;
 
     return (
       <Form horizontal form={this.props.form}>
         <FormItem
           label="用户名："
-          id="name"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
           hasFeedback
-          name="name"
+          id="name"
           options={{
             rules: [
               {required: true, min: 5, message: '用户名至少为 5 个字符'},
@@ -95,16 +94,15 @@ class BasicDemo extends React.Component {
             ],
           }}
           help={isFieldValidating('name') ? '正在校验中..' : (getFieldError('name') || []).join(', ')}>
-          <Input id="name" placeholder="实时校验，输入 JasonWood 看看" />
+          <Input placeholder="实时校验，输入 JasonWood 看看" />
         </FormItem>
 
         <FormItem
           label="邮箱："
-          id="email"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
           hasFeedback
-          name="email"
+          id="email"
           options={{
             validate: [{
               rules: [
@@ -118,37 +116,32 @@ class BasicDemo extends React.Component {
               trigger: ['onBlur', 'onChange'],
             }]
           }}>
-          <Input type="email" id="email" placeholder="onBlur 与 onChange 相结合" />
+          <Input type="email" placeholder="onBlur 与 onChange 相结合" />
         </FormItem>
 
         <FormItem
           label="密码："
-          id="password"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
-          validateStatus={this.getValidateStatus('passwd')}
           hasFeedback
-          help={(getFieldError('passwd') || []).join(', ')}
-          required>
-          <Input {...getFieldProps('passwd', {
+          id="passwd"
+          options={{
             rules: [
               { required: true, whitespace: true, message: '请填写密码' },
               { validator: this.checkPass.bind(this) },
             ],
-          })} id="password" type="password" autoComplete="off"
+          }}>
+          <Input type="password" autoComplete="off"
             onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}/>
         </FormItem>
 
         <FormItem
           label="确认密码："
-          id="password2"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
-          validateStatus={this.getValidateStatus('rePasswd')}
           hasFeedback
-          help={(getFieldError('rePasswd') || []).join(', ')}
-          required>
-          <Input {...getFieldProps('rePasswd', {
+          id="rePasswd"
+          options={{
             rules: [{
               required: true,
               whitespace: true,
@@ -156,23 +149,22 @@ class BasicDemo extends React.Component {
             }, {
               validator: this.checkPass2.bind(this),
             }],
-          })} id="password2" type="password" autoComplete="off" placeholder="两次输入密码保持一致"
+          }}>
+          <Input type="password" autoComplete="off" placeholder="两次输入密码保持一致"
             onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
         </FormItem>
 
         <FormItem
           label="备注："
-          id="textarea"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
-          validateStatus={this.getValidateStatus('textarea')}
-          help={(getFieldError('textarea') || []).join(', ')}
-          required>
-          <Input {...getFieldProps('textarea', {
+          id="textarea"
+          options={{
             rules: [
               {required: true, message: '真的不打算写点什么吗？'},
             ],
-          })} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
+          }}>
+          <Input type="textarea" placeholder="随便写" id="textarea" name="textarea" />
         </FormItem>
 
         <FormItem wrapperCol={{span: 12, offset: 7}} >

components/form/demo/validate-customized.md

@@ -127,17 +127,16 @@ let Demo = React.createClass({
           <Col span="18">
             <FormItem
               label="密码："
-              id="confirmPass"
               labelCol={{span: 6}}
               wrapperCol={{span: 18}}
-              name="pass"
+              id="pass"
               options={{
                 rules: [
                   {required: true, whitespace: true, message: '请填写密码'},
                   {validator: this.checkPass}
                 ]
               }}>
-              <Input id="confirmPass" type="password"
+              <Input type="password"
                 onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                 autoComplete="off"/>
             </FormItem>
@@ -151,10 +150,9 @@ let Demo = React.createClass({
           <Col span="18">
             <FormItem
               label="确认密码："
-              id="confirmPass2"
               labelCol={{span: 6}}
               wrapperCol={{span: 18}}
-              name="rePass"
+              id="rePass"
               options={{
                 rules: [{
                   required: true,
@@ -164,7 +162,7 @@ let Demo = React.createClass({
                   validator: this.checkPass2,
                 }],
               }}>
-              <Input id="confirmPass2" type="password"
+              <Input type="password"
                 onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                 autoComplete="off" />
             </FormItem>

components/form/demo/validate-other.md

@@ -54,10 +54,9 @@ let Demo = React.createClass({
       <Form horizontal form={this.props.form}>
         <FormItem
           label="国籍："
-          id="select"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
-          name="select"
+          id="select"
           options={{
             rules: [
               { required: true, message: '请选择您的国籍' }
@@ -76,7 +75,7 @@ let Demo = React.createClass({
           label="喜欢的颜色："
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
-          name="multiSelect"
+          id="multiSelect"
           options={{
             rules: [
               { required: true, message: '请选择您喜欢的颜色', type: 'array' },
@@ -93,10 +92,9 @@ let Demo = React.createClass({
 
         <FormItem
           label="性别："
-          id="radio"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
-          name="radio"
+          id="radio"
           options={{
             rules: [
               { required: true, message: '请选择您的性别' }
@@ -110,10 +108,9 @@ let Demo = React.createClass({
 
         <FormItem
           label="生日："
-          id="birthday"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
-          name="birthday"
+          id="birthday"
           options={{
             rules: [
               {
@@ -130,11 +127,10 @@ let Demo = React.createClass({
 
         <FormItem
           label="8~12间的质数："
-          id="primeNumber"
           labelCol={{span: 7}}
           wrapperCol={{span: 12}}
           hasFeedback
-          name="primeNumber"
+          id="primeNumber"
           options={{
             rules: [{ validator: this.checkPrime }],
           }}>