
jQueryでフォーム入力をチェックする
正規表現(jquery)を利用した入力チェックを紹介します。
正規表現は、文字が一致しているのか、していないかを判定する機能です。
応用としてフォームで入力された文字が条件と一致、不一致をチェックし、
ユーザーに正しい入力を促す方法です。
if文(条件文)を主に使っていきます。
if文についてはこちらを参考にしてください。
【Javascriptの条件文】
http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html
今回、紹介する例は、チェックするタイミングを入力後に設定します(フォーカスを外したとき)。
1 2 3 4 5 | $( "input[name='hoge']" ).blur( function (){ if (条件){ //実行内容 } }); |
【入力が空の場合】
1 2 3 4 5 | $( "input[name='hoge']" ).blur( function (){ if ($( this ).val() == "" ){ //実行内容 } }); |
・必須項目は送信した際にもチェックを行う
1 2 3 4 5 | $( "input[type='submit']" ).click( function (){ if ($(“input[name= 'hoge' ] ").val() == " "){ //実行内容 } }); |
・必須項目は送信した際にもチェックを行うの例
1 2 3 4 5 6 7 | $( "input[name='hoge']" ).blur( function (){ if ($( this ).val() == "" ){ alert( '空です' ) } else if (!$( this ).val().match(/^[0-9]+$/)) { alert( '半角数字を入力してください' ) } }); |
【名前】
1 2 3 4 5 | $( "input[name='hoge']" ).blur( function (){ if (!$( this ).val().match(/^[ぁ-んァ-ヶー一-龠 \r\n\t]+$/)){ //実行内容 } }); |
※ふりがな、カタカナ、ー、漢字、全角半角スペースの許可
【フリガナ】
1 2 3 4 5 | $( "input[name='hoge']" ).blur( function (){ if (!$( this ).val().match(/^[ァ-ロワヲンー \r\n\t]*$/)){ //実行内容 } }); |
※カタカナ、ー、全角半角スペースを許可
【メールアドレス】
1 2 3 4 5 | $( "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\._-]+)+$/)){ //実行内容 } }); |
※アルファベット、@、.、_、-を許可。
※入力形式が@が無い場合、@から始まるなどメールアドレスの形式では無い場合も拒否。
【電話番号】
・数字のみ許可。
1 2 3 4 5 | $( "input[name='hoge']" ).blur( function (){ if (!$( this ).val().match(/^[0-9]+$/)){ //事項内容 } }); |
・ハイフンも含める場合。
1 2 3 4 5 | $( "input[name='hoge']" ).blur( function (){ if (!$( this ).val().match(/^[0-9\-]+$/)){ //事項内容 } }); |
・ハイフンを強制的に削除。
1 2 3 4 5 6 | $( "input[name='hoge']" ).blur( function (){ $hyphen = $( this ).val().replace(/[━.*‐.*―.*-.*\–.*ー.*\-]/gi, '' ); $( this ).val($hyphen) if (!$( this ).val().match(/^[0-9]+$/)){ //事項内容 } }); |
【お問い合わせなど】
1 2 3 4 5 | $( "textarea[name='hoge']" ).blur( function (){ if ($( this ).val().match(/[<(.*)>.*<\/\1>]/)){ alert( 'HTMLコードが含まれます。' ) } }); |
※HTMLコードを拒否。
【その他】
スペースのみは拒否。
1 2 3 4 5 | $( "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