antd form表單驗證失去焦點時驗證和重置驗證狀態

1.失去焦點時驗證

                <Col span={12}>
                    <Form.Item
                      label="賬號"
                      labelCol={{ span: 5 }}
                      wrapperCol={{ span: 16 }}
                    >
                      {isAdd ? (
                        getFieldDecorator('bank_account', {
                          rules: [
                            {
                              required: Number(invoice_type) === 2 ? true : false,
                              validator: (rule, value, callback) => {
                                if (rule.required && !value) {
                                  callback('請填寫開戶賬號！')
                                } else if (
                                  (rule.required || value) &&
                                  /[\u4e00-\u9fa5]|\s/g.test(
                                    value
                                  )
                                ) {
                                  callback('不允許出現中文字符，不能出現空格')
                                }
                                callback()
                              },
                            },
                          ],
                          validateTrigger: 'onBlur'
                        })(<Input placeholder="不允許出現中文字符，不能出現空格" />)
                      ) : (
                        <span>
                          {invoiceDetail && invoiceDetail.bank_account
                            ? invoiceDetail.bank_account
                            : '-'}
                        </span>
                      )}
                    </Form.Item>
                  </Col>

 

2.有時我們需要重置驗證狀態，使用場景如下：

當開發票的時候，發票有兩種類型，普票和專票，當選擇普票的時候，其他信息可填可不填，當選專票時，電話等信息必填。此時我們選擇專票，沒有填寫電話信息，點提交，會報請輸入電話號碼，這是我們改選普票，但沒有重新驗證，此時頁面還是展示着請填寫電話，我們可以在選擇普票時，獲取填寫的電話號碼，再把電話內容重置，此時效驗狀態也重置了，再把電話內容賦值給輸入框即可。

const content = this.props.form.getFieldsValue(['register_tel')
this.props.form.resetFields(['register_tel')
this.props.form.setFieldsValue(content)