【ホームページ作成】JavaScriptで入力文字制限！(入力チェック)

今回のソースのまとめ

最後に、今回ご紹介した「入力文字チェック・入力制限」のソースをまとめて掲載しておきます。

<script type="text/javascript">

/* ふりがなチェック */
function FuriganaCheck() {
   var str = document.iform.FuriganaText.value;
   if( str.match( /[^ぁ-んァ-ン　\s]+/ ) ) {
      alert("ふりがなは、「ひらがな」・「カタカナ」のみで入力して下さい。");
      return 1;
   }
   return 0;
}

/* 半角英文字チェック */
function AlphabetCheck() {
   var str = document.iform.EnglishText.value;
   if( str.match( /[^A-Za-z\s.-]+/ ) ) {
      alert("英語名は、半角英文字のみで入力して下さい。");
      return 1;
   }
   return 0;
}

/* 半角数字チェック */
function NumberCheck() {
   var str = document.iform.AgeText.value;
   if( str.match( /[^0-9]+/ ) ) {
      alert("年齢は、半角数字のみで入力して下さい。");
      return 1;
   }
   return 0;
}

/* 全部チェック */
function AllCheck() {
   var check = 0;
   check += FuriganaCheck();
   check += AlphabetCheck();
   check += NumberCheck();
   if( check > 0 ) {
      return false;
   }
   return check;
}

</script>

<form name="iform" action="abc.cgi" method="post">
     
         
             
   
             
お名前
             
<input type="text" name="NameText" size="20"><br>
         
         
             
ふりがな
             
<input type="text" name="FuriganaText" size="30" onblur="FuriganaCheck();"><br>
         
         
             
英語名
             
<input type="text" name="EnglishText" size="30" onblur="AlphabetCheck();"><br>
         
         
             
年齢
             
<input type="text" name="AgeText" size="10" onblur="NumberCheck();">歳<br>
         
         
             
<input type="submit" value="送信" onClick="return AllCheck();">
         
     
 
</form>

このソースを表示すると、次のように見えます。

おわりに

今回は、フォームから入力される文字を、CGIなどに渡す前にチェックする方法をご紹介致しました。 ぜひ、メール送信フォームやアンケートフォームなどのチェックにご活用下さい。

【関連記事】

• フォームの大きさを揃えたい
• JavaScriptでパスワード認証
• JavaScriptでページ更新日を表示
• フォームの背景や文字を装飾する