React Js中的输入字段验证？

Question

我有一个名为data的变量（在实际应用程序中是 api），其中包含作为嵌套项的值。

从级别 1 开始，它的标题已经显示，然后它有一个名为sublevel的数组，其中包含多个项目。

从子级项目开始，我正在为 id、email、firstName、lastName 制作输入字段，这些字段已经完成，到目前为止一切都很好。

为了把问题说清楚，我已经停止了这一点。

现在我需要单独对每个字段进行验证（至少需要字段验证和 email 正则表达式）

注意：我无权添加/删除data object 中的任何值，因为在实际应用程序中它来自我无权访问的api 。

所以请帮助我如何处理每个单独字段的验证.. 通过 reactstrap 我生成的表单如下，

 const data = [ { "Id":22383, "title":"Title 1", "quantity":5, "price":12, "sublevel":[ { "confirm":3, "status":0, "email":"test12@gmail.com", "ccoId":"test12", "firstName":"test", "lastName":"user", "partId":22383 }, { "confirm":3, "status":0, "email":"", "ccoId":"", "firstName":"", "lastName":"", "partId":22383 }, { "confirm":3, "status":0, "email":"", "ccoId":"", "firstName":"", "lastName":"", "partId":22383 }, { "confirm":3, "status":0, "email":"", "ccoId":"", "firstName":"", "lastName":"", "partId":22383 }, { "confirm":3, "status":0, "email":"", "ccoId":"", "firstName":"", "lastName":"", "partId":22383 } ] }, { "Id":22383, "title":"Title 2", "quantity":1, "price":5, "sublevel":[ { "confirm":3, "status":0, "email":"test23@gmail.com", "ccoId":"test23", "firstName":"hello", "lastName":"world", "partId":22383 } ] } ] const {Component, Fragment} = React; const {Button, Collapse, Form, FormGroup, Input} = Reactstrap; class App extends Component { constructor(props) { super(props); this.state = { formData: [] }; } componentDidMount(){ } render() { return <div> { data.map((levelOne, i) => { return( <div key={i}> <h4> {levelOne.title} </h4> { levelOne.sublevel.map((subLevel, j) => { return( <div key={j}> <Form inline> <FormGroup> <Input name="id" maxLength="50" defaultValue={subLevel.ccoId} placeholder="ccoId" /> <Input name="email" type="email" defaultValue={subLevel.email} placeholder="Email" /> <Input name="firstName" maxLength="50" defaultValue={subLevel.firstName} placeholder="firstName" /> <Input name="lastName" maxLength="50" defaultValue={subLevel.lastName} placeholder="lastName" /> </FormGroup> </Form> </div> ) }) } </div> ) }) } <Button color="secondary" size="lg" disabled>Submit</Button> </div>; } } ReactDOM.render(<App />, document.getElementById("root"));

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script> <div id="root"></div>

我在其中停留了很长时间以对每个单独的输入元素进行验证，因此请帮助我。

提前非常感谢..

预期结果：

Answer 1

只需在每个字段的表单中使用“必填”关键字

example:
<input type="password" placeholder="Password" class="validate" required>

email 验证的正则表达式

    const emailRegex = RegExp(
    /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
  );