反應中的即時輸入字段驗證

Question

我在 React 中有一些輸入字段，我想對它們進行即時驗證：

1. 驗證 Email 地址格式是否正確。 如果沒有，請在 Email 地址輸入字段旁邊顯示錯誤。

2. 驗證 Email 地址並驗證 Email 地址匹配。 如果不是，請在“驗證 Email 地址”輸入字段旁邊顯示錯誤。

3. 驗證名稱不為空。

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>
  );
}
}

Answer 1

您可以創建一個句柄 function 來處理字段更改，然后您可以管理您的驗證。 這是使用 Email 和驗證 Email 字段完成的快速示例。 您可以對字段“名稱”采用相同的方法。

另外，請查看受控組件文檔。 它將指導您更好地了解如何做到這一點。 一旦你理解得很好，你就可以尋找一個幫助庫，比如formik 。