Question

目前我有这个React Bootstrap表单，我可以单独验证表单字段：

<RB.Form horizontal>
  <RB.FormGroup
    controlId="cidInputName"
    validationState={this.getNameValidationState()}
  >
    <RB.ControlLabel>Name/Label</RB.ControlLabel>
    <RB.FormControl
      type="text"
      value={this.state.name}
      placeholder="Enter text"
      onChange={this.handleNameChange}
    />
    <RB.FormControl.Feedback />
    <RB.HelpBlock>Any name that you wanna use</RB.HelpBlock>
  </RB.FormGroup>

  <RB.FormGroup
    controlId="cidInputMonth"
    validationState={this.getMonthValidationState()}
  >
    <RB.ControlLabel>Month (1-12)</RB.ControlLabel>
    <RB.FormControl
      type="text"
      value={this.state.month}
      placeholder="Enter month number"
      onChange={this.handleMonthChange}
    />
    <RB.FormControl.Feedback />
    <RB.HelpBlock>Must be a number from 1 to 12 only</RB.HelpBlock>
  </RB.FormGroup>

  <RB.FormGroup
    controlId="cidInputDay"
    validationState={this.getDayValidationState()}
  >
    <RB.ControlLabel>Day (1-31)</RB.ControlLabel>
    <RB.FormControl
      type="text"
      value={this.state.day}
      placeholder="Enter day number"
      onChange={this.handleDayChange}
    />
    <RB.FormControl.Feedback />
    <RB.HelpBlock>Must be a number from 1 to 31 only</RB.HelpBlock>
  </RB.FormGroup>

</RB.Form>

当每个表单字段都有一个有效输入时，每个FormGroup的validationState都应该有'success'作为其值。

我该如何检查？如何检查所有输入有效的整个表单以及'success' - ful？

检查validationState中使用的每个函数是否为反模式？

e.g。

if(this.getNameValidationState() == true && this.getMonthValidationState() == true .....etc...)

React Bootstrap表单验证

0 个答案: