React-Antd4的Form表單校驗

之前很少用react做項目，最近入職新公司，用的react，在自己的摸索過程中，慢慢會記錄一些使用方法。今天簡單記錄一下使用antd 4.0版本的Form表單校驗，直接代碼。

 

需要購買阿里雲產品和服務的，點擊此鏈接領取優惠券紅包，優惠購買哦，領取后一個月內有效：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

1、代碼：

import React, {Component} from 'react'
import { Form, Input, Row, Col, Select, Button } from 'antd'

class FormDemo extends Component {
  constructor(props){
    super(props)
  }

  formRef = React.createRef()

  componentDidMount(){
    const leftMenu = document.getElementById('left_menu')
    leftMenu.style.minWidth = '0px'
    leftMenu.style.maxWidth = '0px'
  }

  submit =()=>{　　// 點擊提交時,做最后的校驗
    const form = this.formRef.current
    form.validateFields().then((values)=>{　　// 如果全部字段通過校驗，會走then方法，里面可以打印出表單所有字段（一個object）
      console.log('成功')
      console.log(values)
    }).catch((errInfo)=>{　　// 如果有字段沒聽過校驗，會走catch，里面可以打印所有校驗失敗的信息
      console.log('失敗')
　　　 console.log(errInfo)
    })
  }

  render(){
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    }
    return (
      <div>
        <h3>表單校驗-demo</h3>
        <div>
          <Form ref={this.formRef} 
            {...layout}
            // onFinish={this.onFinish}
            style={{width: '600px',margin:'0 auto'}}
          >
            <Row gutter={24}>
              <Col span={24} key="select1">
                <Form.Item label="下拉框1" name="select1"
                  rules={[{ required: true, message: '請輸入用戶名!' },
                  ]}
                >
                  <Select
                    mode="multiple"
                    showSearch
                    placeholder="下拉框1"
                    // onChange={this.handleChangeSchool}
                    style={{ width: '100%' }}
                  >
                    <Option key='1' value='11'>aa</Option>
                    <Option key='2' value='22'>bb</Option>
                    <Option key='3' value='33'>cc</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24} key="text1">
                <Form.Item label="密碼" name="text1"
                  rules={[
                    {required: true, message: '請輸入密碼!' },
                    {min: 6, message: '密碼至少6位!' },
                    {max: 10,message: '密碼最長10位!'},
                  ]}
                >
                  <Input placeholder="text1" />
                </Form.Item>
              </Col>
              <Col span={24} key="text2">
                <Form.Item label="確認密碼" name="text2"
                  rules={[
                    {required: true, message: '請輸入text1!' },
                    // {min: 6, message: '確認密碼至少6位!' },
                    // {max: 10,message: '確認密碼最長10位!'},
                    {
                      validator: (_, value) =>{
                        const form = this.formRef.current
                        let text1 = form.getFieldValue('text1')
                        if(value && (value.length < 6 ||  value.length > 10)) {
                          return Promise.reject('text1必須是6~10位')
                        }else if(text1 != value){
                          return Promise.reject('兩次密碼不一致')
                        }else {
                          return Promise.resolve()
                        }
                      }
                    }
                  ]}
                >
                  <Input placeholder="text2" />
                </Form.Item>
              </Col>
              <Col span={24} key="text3">
                <Form.Item label="文本框3" name="text3">
                  <Input type="number" placeholder="text3" />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ textAlign: 'right' }}>
                <Button type="primary" onClick={this.submit} style={{ marginRight: '8px' }}>提交</Button>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    )
  }
}


export default FormDemo

 

2、校驗效果