反应中的即时输入字段验证答案

【问题标题】：Instant input field validation in react反应中的即时输入字段验证
【发布时间】：2020-04-13 21:14:25
【问题描述】：

我在 React 中有一些输入字段，我想为它们做即时验证：

验证电子邮件地址的格式是否正确。如果没有，请在电子邮件地址输入字段旁边显示错误。
验证电子邮件地址和验证电子邮件地址匹配。如果不是，请在“验证电子邮件地址”输入字段旁边显示错误。
验证名称不为空。

export default class DOB extends Component {
constructor() {
  super();
  this.state = {
    Year: "",
    Month: "",
    Day: "",
    YearFocused: false,
    MonthFocused: false,
    DayFocused: false,
    Valid: true
  };
}

render() {
  return (
    <div>
      <p>
        Email Address:
        <input type="text" value="" />
      </p>
      <p>
        Verify Email Address:
        <input type="text" value="" />
      </p>
      <p>
        Name:
        <input type="text" value="" />
      </p>
      <p>
        DOB (YYYY MM DD):
        <input className="Year" type="text" />
        <input className="Month" type="text" />
        <input className="Day" type="text" />
      </p>
      <p>
        <button>Submit</button>
      </p>
    </div>
  );
}
}

【问题讨论】：

我在这里没有看到验证代码的尝试。你被困在哪里了？

标签： javascript reactjs validation

【解决方案1】：

您可以创建一个处理字段更改的句柄函数，然后您可以管理您的验证。这是一个快速的example done with the Email and Verify Email fields。您可以对字段“名称”采用相同的方法。

另外，请查看Controlled Components 文档。它将指导您更好地了解如何做到这一点。一旦你明白了，你可以寻找一个帮助库，比如formik。

【讨论】：