JavaScript【 サンプル 】14 ～ 入力チェック

JavaScript の記述方法のサンプルを紹介します。
今回は、入力チェックを行う際のサンプルを紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．英数字チェック

　
画面で入力された文字が英数字のみであるかどうかをチェックします。
英数字や英数字以外の文字を入力して OK ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
function checkStr(){
  const str = document.getElementById("dat").value;
  if (str.match(/[^0-9 ０-９ a-z ａ-ｚ A-Z Ａ-Ｚ]/g)){
    alert("英数字以外が含まれています\n（" + str.match(/[^0-9 ０-９ a-z ａ-ｚ A-Z Ａ-Ｚ]/g) + "）");
  } else {
    alert("入力OKです！");
  }
}
</script>

<div style="background-color : #CCC;">
  <div style="display:inline-flex; align-items: center;">
    <input id="dat" type="text" placeholder="こちらに入力して下さい">　
    <input type="button" value="OK" onclick="checkStr()">
  </div>
</div>

　
「 /[^0-9 ０-９ a-z ａ-ｚ A-Z Ａ-Ｚ]/g 」として 全角の英数字も OK としています。

半角数値のみ入力可能とする場合は match メソッドの引数に「 /[^0-9]/g 」を指定します。
同様に、半角英字の小文字のみ入力可能とする場合は match メソッドの引数に「 /[^a-z]/g 」 を指定します。

※match メソッドや正規表現については、JavaScript【 match 】 ～ 文字列のマッチと正規表現をご参照下さい。

▲目次へ戻る

２．メールアドレスチェック

　
画面で入力された内容がメールアドレスのパターンに合致しているかどうかをチェックします。
任意の文字を入力して OK ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
function checkMail(){
  const str = document.getElementById("dat").value;
  if(str.match(/^([a-z0-9_\.\-])+@([a-z0-9_\.\-])+[^.]$/i)){
    alert("入力OKです！");
  }else{
    alert("メールアドレスの形式が不正です！");
  }
}
</script>

<div style="background-color : #CCC;">
  <div style="display:inline-flex; align-items: center;">
    <input id="dat" type="text" placeholder="こちらに入力して下さい">　
    <input type="button" value="OK" onclick="checkMail()">
  </div>
</div>

　
「 /^([a-z0-9_\.\-])+@([a-z0-9_\.\-])+[^.]$/i 」として 半角英数字と記号「 – 」「 _ 」「 . 」を入力可とする他、「 @ 」が含まれる点と 末尾がドット（ . ）でない点 をチェックしています。

※match メソッドや正規表現については、JavaScript【 match 】 ～ 文字列のマッチと正規表現をご参照下さい。

▲目次へ戻る

３．必須入力チェック

　
必須入力項目が入力されているかどうかをチェックします。
任意の文字を入力して、又は 未入力で OK ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
function checkData(){
  const str = document.getElementById("dat").value;
  if(str.trim().length > 0){
    alert("入力OKです！");
  }else{
    alert("入力して下さい！");
  }
}
</script>

<div style="background-color : #CCC;">
  <div style="display:inline-flex; align-items: center;">
    <input id="dat" type="text" placeholder="こちらに入力して下さい">　
    <input type="button" value="OK" onclick="checkData()">
  </div>
</div>

　
trim メソッドで空白を除去した後、length メソッドを使用して 文字数が 1 以上あるかどうかをチェックしています。

▲目次へ戻る

４．文字数チェック

　
画面で入力する文字数に制限がある場合の文字数チェックを行います。
10 文字以内の文字列や 10 文字を超える文字列を入力して OK ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
function checkLen(){
  const str = document.getElementById("dat").value;
  if(str.length > 10){
    alert("10 文字以内で入力して下さい！");
  }else{
    alert("入力OKです！");
  }
}
</script>

<div style="background-color:#CCC;">
  10 文字以内で入力して下さい。
  <div style="display:inline-flex; align-items: center;">
    <input id="dat" type="text" placeholder="こちらに入力して下さい">　
    <input type="button" value="OK" onclick="checkLen()">
  </div>
</div>

　
length メソッドを使用して 文字数が 10 以下かどうかをチェックしています。
空白を文字数にカウントしない場合は、「 str.trim().length 」のように trim メソッドで空白を除去した後の文字数を取得します。

▲目次へ戻る