フォーム入力で文字のみを受け付ける方法

2024-02-09 23:07 フォーム入力バリデーション文字のみ

  1. JavaScriptを使用した正規表現によるバリデーション: フォームの入力値をJavaScriptで検証する方法の1つは、正規表現を使用することです。以下は、文字のみを受け付けるための正規表現パターンの例です。

    // HTMLフォームの入力要素
var inputElement = document.getElementById("input");
// 入力値の検証
inputElement.addEventListener("input", function(event) {
 var inputValue = event.target.value;
 var pattern = /^[A-Za-z]+$/; // 英字のみを許容する正規表現パターン
 if (!pattern.test(inputValue)) {
   event.target.setCustomValidity("文字のみを入力してください。");
 } else {
   event.target.setCustomValidity("");
 }
});

    上記の例では、イベントリスナーを使用してフォームの入力値を監視し、正規表現パターンに一致しない場合にエラーメッセージを設定しています。

  2. HTML5のパターン属性を使用したバリデーション: もう1つの方法は、HTML5のパターン属性を使用することです。以下は、パターン属性を使用して文字のみを受け付ける入力フィールドの例です。

    <input type="text" pattern="[A-Za-z]+" title="文字のみを入力してください。">

    パターン属性は、正規表現パターンを指定します。入力フィールドの値がパターンに一致しない場合、ブラウザは自動的にエラーメッセージを表示します。

これらは、フォーム入力で文字のみを受け付けるための単純な方法のいくつかです。どちらの方法も利点と制限があるため、使用環境や要件に応じて最適な方法を選択してください。