フォームの値をチェックする方法
フォームに入力できる値を制限したい時があります。
本ページでは、フォームの値をチェックする方法を説明します。
HTMLでチェックする
HTMLでは、フォームに入力した値をデフォルトでチェックできることがあります。
上記は、<input type="number">と記述しているだけですが、数字以外が入力できなくなったり、数字以外が入力されていてフォーカスを外すと値が消えたりします。
typeによって、入力できる値が変わります。詳細は、「input要素」をご参照ください。
なお、この方法はブラウザの対応状況によって、チェックされないことがあります。
入力を必須にする
以下のように、required属性を使うと、入力が必須になります。
<form>
<input type="text" name="input1" required>
<input type="submit" value="実行">
</form>
もし、値を入力せずに実行しても、「このフィールドを入力してください。」などと表示されて、実行できません。
required属性は、select要素(セレクトボックス)でも使えます。
JavaScriptを利用して値をチェックする
以下は、テキストボックスに入力した後、「実行」ボタンをクリックすると、半角英字が入力されていれば表示領域にその英字が表示されます。半角英字以外が入力されていると、「英字を入力してください」と表示されます。
表示領域
JavaScriptを利用して値をチェックする時は、正規表現を使います。
<form name="form1"> <input type="text" name="input1"> <input type="button" id="test1" value="実行"> </form> <p id="test2">表示領域</p> <script> function func1() { let y = document.form1.input1.value; const z = document.querySelector("#test2"); if ( /[^a-z]/i.test(y) ) { z.textContent = "英字を入力してください"; } else { z.textContent = y; } } const x = document.querySelector("#test1"); x.addEventListener("click",func1); </script>
if文の中で使っているのが、正規表現です。正規表現を使うと、英字かどうかのチェックだけでなく、さまざまな入力チェックができます。詳細は、「正規表現の使い方」をご参照ください。
リアルタイムに値をチェックする
入力途中でリアルタイムにチェックして、半角英字以外が入力できないようにもできます。以下は、実行例です。
半角英字以外は、入力できないと思います。これは、以下のようにしています。
<input type="text" id="test1">
<script>
function func1() {
x.value = x.value.replace(/[^a-z]+/ig,"");
}
const x = document.querySelector("#test1");
x.addEventListener("input",func1);
</script>
input要素で入力があるたびに、英字かを正規表現でチェックして、英字でなければ""で入力値を消しています。
次のページ「フォームコントロールの数を取得」