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