ant Design 自定義表單驗證規則

如果你不想最後送出表單的時候才給出使用者錯誤的提示，那麼你可以這麼寫

這個例子是驗證你輸入的新密碼是否一緻的問題

<Row>
            <Col span={24}>
              <FormItem {...formItemLayout} label={'新密碼'}>
                {getFieldDecorator('newPassword', {
                  initialValue: currentUserdata.newPassword || '',
                  rules: [
                    {
                      required: true,
                      whitespace: true,
                      max: 11,
                      message: formatMessage({id: 'validation.userName.required'}),
                    }
                  ],
                })(<Input placeholder={"請輸入新密碼"}/>)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem {...formItemLayout} label={'确認新密碼'}>
                {getFieldDecorator('newPsw', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      whitespace: true,
                      max: 11,
                      message: formatMessage({id: 'validation.userName.required'}),
                    },
                    {validator: this.checkConfirm}      //在這裡加入驗證規則
                  ],
                })(<Input placeholder={"請确認新密碼"}/>)}
              </FormItem>
            </Col>
          </Row>
           

checkConfirm = (rule, value, callback) => {
    const {form} = this.props;
    const newPsw = form.getFieldValue('newPassword');
    if (newPsw != value) {
      callback('新密碼不一緻!');
    }
    else {
      callback();
    }
  }
           

這樣就可以實作立即驗證了