ReactJS-如何验证输入字段

时间:2019-10-20 18:30:02

标签: reactjs required requiredfieldvalidator required-field

我正在使用reactstrap组件。 有多个输入。 如何将某些字段设置为“必填”。 也就是说,用户无法通过空闲。该如何限制?

<Row>
   <Col xs="2">customer name</Col>
   <Col xs="6">
        <Input
        required
        maxLength={"20"}
        type={"text"}
        placeholder={"customer name"}
        name={"customerName"}
        defaultValue={this.state.customerName}
        onChange={this.handleChange}
        />
   </Col>
</Row>

1 个答案:

答案 0 :(得分:0)

您尝试过以下一项吗:https://availity.github.io/availity-reactstrap-validation/?做得很好。

很抱歉在这里写,但似乎没有足够的声誉来回答。

available-reactstrap-validation通过一些不错的功能(如验证)扩展了reactstrap形式。

为了在标签的左侧和输入的右侧,您可以像这样混合它们:

<AvForm onValidSubmit={handleValidSubmit} onInvalidSubmit={handleInvalidSubmit}>
        <FormGroup row>
            <Label for="name" sm={2}>Name</Label>
            <Col sm={10}>
                <AvField name="name"  type="text" required />
            </Col>
        </FormGroup>

    </AvForm>

确保已导入所有库。