2016-08-25 12 views
0

入力タイプの電子メールについて、この簡単なコードがあります。ユーザーがボタンをクリックしたときに電子メールの検証についての参考資料があります。ここで参照http://stackoverflow.com/questions/46155/validate-email-address-in-javascriptスパムタグ内に電子メールを表示してメッセージを表示

HTMLコード

<html> 
<body> 
    <div class="form-group"> 
     <input class="form-control" placeholder="Email" name="email" id="email" type="email" required> 
     <span id="checkEmail"></span> 
    </div> 
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
<html> 

だ私は、イベント機能をからkeyup使用spanタグのID =「のcheckEmail」のメッセージを検証し、表示するためのスクリプトを試してみましたが、動作していないよう。私の構文は間違っていますか?助けてください。

そのスクリプト

<script> 
//Email Regular Expression function 
function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return re.test(email); 
} 

//Email Validate function 
function validate() { 
    $("#email").keyup(function() { 

     var email = $("#email").val(); 
     if (validateEmail(email)) { 
      $("#checkEmail").text(email + " is valid :)"); 
      $("#checkEmail").css("color", "green"); 
     } else { 
      $("#checkEmail").text(email + " is not valid :("); 
      $("#checkEmail").css("color", "red"); 
     } 
    }); 

    //UPDATE 
    $(document).ready(function() { 
    $("#checkEmail").keyup(validate); 
    }); 
    } 
</script> 
+0

リンクメイトを確認してください。 –

+0

には、2つの異なるjqueryライブラリがリンクされています。 1つを保つ。 –

答えて

2

あなたのコードは、私の作品、私が行うために必要なすべては、実際にイベントをバインドするために、文書のロードのどこにでも

validate(); 

を呼び出すことです。

(あなたが検証機能の外結合を移動する場合がありますを意味し、再結合しないように、それはいつでもあなたがクリック/関数を使用する)

編集: 私はあなたのためのフィドルを用意しています https://jsfiddle.net/caz9o53e/

+0

このサークルにJSFIDDLEを提供できますか? –

+0

私の編集を参照してください:-) –

+0

JSFIDDLEさんのところで、それは実際に動作します。しかし、私のファイルにそれをテストします。うまくいかないだろう。どうして? JavaScript 1.0では動作しません –

1

私はあなたがこのフィドルリンクを使用することができると思い、作業を行います。

http://jsfiddle.net/o6d86xtw/1/

HTML

<label for="email" id="email">Hey!</label> 
<input id="email" name="email" type="email" class="required" /> 
<span class="msg error">You shall not pass!</span> 
<span class="msg success">You can pass!</span> 

jQueryの

var component = { 
    input : $('input[name="email"]'), 
    mensage : { 
     fields : $('.msg'), 
     success : $('.success'), 
     error : $('.error') 
    } 
}, 
    regex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/; 

component.input.blur(function() { 
    component.mensage.fields.hide(); 
    regex.test(component.input.val()) ? component.mensage.success.show() : component.mensage.error.show(); 
}); 

注:私は誰か他の人のフィドルをフォーク。

+0

しかし、 'java.the.hutt @ gmail.com'は有効なメールです –

+0

@A.Wolff Regexは彼の問題ではありません。彼は彼が望む正規表現を使うことができます。とにかくこれを削除していて、意味がありません。 –

+0

あなたは正しいです、本当に正規表現から電子メールを検証する方法はありません –

関連する問題