jQueryでフォーム入力をチェックする

正規表現（jquery）を利用した入力チェックを紹介します。
正規表現は、文字が一致しているのか、していないかを判定する機能です。

応用としてフォームで入力された文字が条件と一致、不一致をチェックし、
ユーザーに正しい入力を促す方法です。

if文（条件文）を主に使っていきます。
if文についてはこちらを参考にしてください。

【Javascriptの条件文】
http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html

今回、紹介する例は、チェックするタイミングを入力後に設定します（フォーカスを外したとき）。

$("input[name='hoge']").blur(function(){
　　if(条件){
　　//実行内容
　　}
});

【入力が空の場合】

$("input[name='hoge']").blur(function(){
  if($(this).val() == ""){
  //実行内容
  }
});

・必須項目は送信した際にもチェックを行う

$("input[type='submit']").click(function(){
  if($(“input[name='hoge']").val() == ""){
  //実行内容
  }
});

・必須項目は送信した際にもチェックを行うの例

$("input[name='hoge']").blur(function(){
　　if($(this).val() == ""){
   alert('空です')
　　} else if(!$(this).val().match(/^[0-9]+$/)) {
   alert('半角数字を入力してください')
　　}
});

【名前】

$("input[name='hoge']").blur(function(){
  if(!$(this).val().match(/^[ぁ-んァ-ヶー一-龠 　\r\n\t]+$/)){
　　//実行内容
  }
});

※ふりがな、カタカナ、ー、漢字、全角半角スペースの許可

【フリガナ】

$("input[name='hoge']").blur(function(){
  if(!$(this).val().match(/^[ァ-ロワヲンー 　\r\n\t]*$/)){
  //実行内容
  }
});

※カタカナ、ー、全角半角スペースを許可

【メールアドレス】

$("input[name='hoge']").blur(function(){
  if(!$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
  //実行内容
  }
});

※アルファベット、@、.、_、-を許可。
※入力形式が@が無い場合、@から始まるなどメールアドレスの形式では無い場合も拒否。

【電話番号】

・数字のみ許可。

$("input[name='hoge']").blur(function(){
  if(!$(this).val().match(/^[0-9]+$/)){
  //事項内容
  }
});

・ハイフンも含める場合。

$("input[name='hoge']").blur(function(){
  if(!$(this).val().match(/^[0-9\-]+$/)){
  //事項内容
  }
});

・ハイフンを強制的に削除。

$("input[name='hoge']").blur(function(){
  $hyphen = $(this).val().replace(/[━.*‐.*―.*－.*\–.*ー.*\-]/gi,''); $(this).val($hyphen)
  if(!$(this).val().match(/^[0-9]+$/)){
  //事項内容
  }
});

【お問い合わせなど】

$("textarea[name='hoge']").blur(function(){
  if($(this).val().match(/[<(.*)>.*<\/\1>]/)){
  alert('HTMLコードが含まれます。')
  }
});

※HTMLコードを拒否。

【その他】
スペースのみは拒否。

$("input[name='hoge']").blur(function(){
  if($(this).val().match(/^[ 　\r\n\t]*$/)){
  //実行内容
  }
});

※「\n」は、改行コード、「\r」は、復帰コード、「\t」は、タブコードです。

「実行内容」箇所にエラーメッセージや入力完了マークなど出力する記述を書いてください。

以下、正規表現について解説しているサイト

参考URL
【正規表現の構文】
http://msdn.microsoft.com/ja-jp/library/cc392020.aspx
【正規表現（RegExp）】
http://www.tohoho-web.com/js/regexp.htm