目次
ReactとMaterial-UIを用いたフォームバリデーション
ReactとMaterial-UIを使用してフォームフィールドのバリデーションを行う方法について解説します。
今回はメールアドレスの入力フィールドに対して、適切なフォーマットのバリデーションを行う例を紹介します。
基本的な構成
バリデーションを行うためには、以下のステップに従います。
- Stateの設定: ユーザーの入力とバリデーション結果を追跡するためのstateを設定します。
- バリデーション関数の作成: 入力された値をチェックする関数を作成します。
- イベントハンドラの設定: 入力の変更ごとにバリデーションを実行します。
- エラーメッセージの表示: バリデーションの結果に基づいて、エラーメッセージを表示します。
コード例
以下のコードは、メールアドレスのバリデーションを行うシンプルなReactコンポーネントの例です。
import React, { useState } from 'react'; import TextField from '@mui/material/TextField'; function EmailInput() { const [email, setEmail] = useState(''); const [error, setError] = useState(false); const [helperText, setHelperText] = useState(''); // メールアドレスのフォーマットをチェックする関数 const validateEmail = (email) => { const re = /^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email.toLowerCase()); }; // テキストフィールドの値が変更された時に実行されるハンドラ const handleChange = (event) => { const { value } = event.target; setEmail(value); if (validateEmail(value)) { setError(false); setHelperText(''); } else { setError(true); setHelperText('有効なメールアドレスを入力してください。<br>'); } }; return ( <TextField error={error} helperText={helperText} label="メールアドレス" variant="outlined" value={email} onChange={handleChange} /> ); } export default EmailInput;
このコードは、ユーザーがメールアドレスを入力するたびに、そのフォーマットが正しいかどうかをチェックします。
フォーマットが正しくない場合には、エラーメッセージが表示されます。
まとめ
この記事では、ReactとMaterial-UIを使用してフォームフィールドのバリデーションを行う基本的な方法を紹介しました。
この基本的な概念は、さまざまな種類のバリデーションロジックに応用することが可能です。