ReactJS - 如何验证输入字段

Question

我正在使用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>

Answer 1

你试过这个吗：https://availity.github.io/availity-reactstrap-validation/？做得很好。

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

Availity-Reactstrap-validation用一些不错的函数(如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>

请确保已导入所有库。