React フォームの検証

Irakli Tchigladze 2022年1月24日

React React Form

現代では、企業はさまざまな目的でデータを保存、維持、分析しています。

ユーザーデータベースの維持、レポートの生成など、データの役割を誇張することはできません。したがって、データは構造化され、適切に編成されている必要があります。

React を搭載した Web アプリケーションは、フォーム検証を使用して、ユーザー入力が標準の規則に従っていることを確認する必要があります。このようにして、ユーザージャーニーを促進し、整理された方法でデータを収集できます。

データ検証が不十分だと悪意のある攻撃につながる可能性もあるため、適切なソリューションを実装すると、アプリケーションの安全性も向上します。

React フォームの検証

適切な React アプリケーションの場合、フォームの検証は不可欠な機能です。たとえば、メールには@記号と有効なサフィックスが含まれており、他の基準を満たしている必要があります。

`onChange` イベント

React でフォーム検証を実装する最も効率的な方法は、onChange イベントをリッスンし、コンポーネントの状態でユーザー入力を維持することです。まず、入力を制御する必要があるため、検証する 2つのフィールド（たとえば、名前と電子メール）がある場合は、次の空の値で状態を初期化する必要があります。

constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}

クラスコンポーネントを作成するときは、constructor() 関数で状態を初期化する必要があります。errorMessages プロパティがあると便利です。このプロパティにメッセージを保存して、入力した値の何が問題になっているのかをユーザーに伝えることができます。

フォーム検証の最初のステップは、onChange イベントリスナーを使用して <input> 要素を設定することです。入力フィールドの変更は、状態にも自動的に反映されます。

render() メソッドは次のようになります。

render() {
    return (
    <form>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    </form>
    )
  }

これは素晴らしいスタートです。それでも、フォーム検証の条件を設定し、エラーメッセージを生成する必要があります。そのために、カスタムの validate() 関数を作成します。

簡単にするために、2つの基本的なルールを設定します。名前は 2 文字より長く、電子メールの値には@を含める必要があります。これで、アプリケーション全体が次のようになります。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}
  render() {
    console.log(this.state)
    const validate = () => {
      let inputFields = this.state.inputFields
      let errors = {}
      let validityStatus = true
      if (inputFields["name"].length <= 2){
        validityStatus = false
        errors["name"] = "The name should contain more than two symbols"
      }
      if (inputFields["email"].indexOf("@") === -1 ){
        validityStatus = false
        errors["email"] = "The email should contain @"
      }
      this.setState({errorMessages: errors})
      return validityStatus
    }
    const handleSubmit = (e) => {
      e.preventDefault();
      if (validate()){
        alert("form complete")
      }
      else {
        alert("errors")
      }
    }
    return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <br />
    <button type="submit">Submit</button>
    </form>
    )
  }
}

フォームが送信されると、validate() 関数はフィールドに入力された値をチェックし、すべての条件が満たされている場合は true を返し、満たされていない場合は false を返します。チェックが終了すると、handleSubmit() 関数は form complete または errors のいずれかを警告します。

この関数には、各テキストフィールドの警告メッセージを格納するローカルの errors 変数も含まれています。チェックが完了すると、変数を参照して errorMessages 状態プロパティを更新します。

さらに便利なように、各フィールドの下に、そのフィールドのエラーメッセージを表示するテキストを追加できます。次に例を示します。

return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <p style={{color: "red"}}>{this.state.errorMessages.name}</p>
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <p style={{color: "red"}}>{this.state.errorMessages.email}</p>
    <br />
    <button type="submit">Submit</button>
    </form>
    )

このように、errorMessages 状態プロパティの警告メッセージを使用して、ユーザーがエラーを修正するのに役立つマイナーな警告をユーザーに提供できます。

著者： Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React フォームの検証

onChange イベント

関連記事 - React Form

`onChange` イベント