moriya

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

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら