複数のjQuery電子メールフィールドフォーム検証を処理する最も良いリファクタ

複数の電子メールアドレスに対応するために添付コードをリファクタリングする最良の方法は何ですか？複数のjQuery電子メールフィールドフォーム検証を処理する最も良いリファクタ

添付のHTML/jQueryは完成しており、最初のメールアドレスで動作します。私はコピー/貼り付けとコードの変更によって他の2つをセットアップすることができます。しかし、私は複数の電子メールアドレスフィールドを扱うために既存のコードをリファクタリングするだけです。代わりにあなたの電子メールフィールドのIDを使用しての

<html> 
<head> 
    <script src="includes/jquery/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script language="javascript"> 
     $(document).ready(function() { 
      var validateUsername = $('#Email_Address_Status_Icon_1'); 

      $('#Email_Address_1').keyup(function() { 
       var t = this; 
       if (this.value != this.lastValue) { 
        if (this.timer) clearTimeout(this.timer); 
        validateUsername.removeClass('error').html('Validating Email'); 

        this.timer = setTimeout(function() { 
         if (IsEmail(t.value)) { 
          validateUsername.html('Valid Email'); 
         } else { 
          validateUsername.html('Not a valid Email'); 
         }; 
        }, 200); 

        this.lastValue = this.value; 
       } 
      }); 
     }); 

     function IsEmail(email) { 
      var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
      if (regex.test(email)) return true; 
      else return false; 
     } 
    </script> 
</head> 
<body> 
    <div> 
     <label for="Email_Address_1">Friend #1</label></div> 
     <input type="text" ID="Email_Address_1"> 
     <span id="Email_Address_Status_Icon_1"></span> 
    </div> 
    <div> 
     <label for="Email_Address_2">Friend #2</label></div> 
    <input type="text" id="Email_Address_2"> 
     <span id="Email_Address_Status_Icon_2"></span> 
    </div> 
    <div> 
     <label for="Email_Address_3">Friend #3</label></div> 
    <input type="text" id="Email_Address_3"> 
     <span id="Email_Address_Status_Icon_3"></span> 
    </div> 
    </form> 
</body> 
</html>

出典

2008-09-16 Brian Boatright

、あなたは彼らに、各クラス与えることができます。そして、

<div> 
    <label for="Email_Address_1">Friend #1</label></div> 
    <input type="text" class="email"> 
    <span></span> 
</div> 
<div> 
    <label for="Email_Address_2">Friend #2</label></div> 
    <input type="text" class="email"> 
    <span></span> 
</div> 
<div> 
    <label for="Email_Address_3">Friend #3</label></div> 
    <input type="text" class="email"> 
    <span></span> 
</div>

、代わりに$（ "＃Email_Address_Status_Icon_1"）を選択すると、あなたは「（$を選択することができますinput.email "）、これはクラス電子メールのすべての入力要素のjQueryラップセットを提供します。

最後に、代わりにidを持つ明示的にステータスアイコンを参照する、あなたは、単に言うことができる：

$(this).next("span").removeClass('error').html('Validating Email');

「これは」電子メールのフィールドになりますので、「this.next（）は、」あなたを与えるだろう次の兄弟です。私たちは、私たちが意図していることを確実にするために、「スパン」セレクタをその上に適用します。 $（this）.next（）も同じように動作します。

このようにして、ステータスアイコンを相対的に参照しています。

希望すると便利です。

出典

2008-09-16 03:23:08 Pandincus

ありがとうございます！完成したリファクタがあなたの提案された変更点を示しています。

私はどうなる

<script language="javascript"> 
     $(document).ready(function() { 
      $('#Email_Address_1').keyup(function(){Update_Email_Validate_Status(this)}); 
      $('#Email_Address_2').keyup(function() { Update_Email_Validate_Status(this)}); 
      $('#Email_Address_3').keyup(function() { Update_Email_Validate_Status(this)});    
     }); 

     function Update_Email_Validate_Status(field) { 
      var t = field; 
      if (t.value != t.lastValue) { 
       if (t.timer) clearTimeout(t.timer); 
       $(t).next("span").removeClass('error').html('Validating Email'); 

       t.timer = setTimeout(function() { 
        if (IsEmail(t.value)) { 
         $(t).next("span").removeClass('error').html('Valid Email'); 
        } else { 
        $(t).next("span").removeClass('error').html('Not a valid Email'); 
        }; 
       }, 200); 

       t.lastValue = t.value; 
      } 
     } 

     function IsEmail(email) { 
      var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
      if (regex.test(email)) return true; 
      else return false; 
     } 
    </script>

出典

2008-09-16 03:49:03

：

$(document).ready(function() { 
     $('.validateEmail').keyup(function(){Update_Email_Validate_Status(this)});    
    });

その後、すべての電子メールの入力に= 'validateEmail' クラスを追加します。

また、Form Validation Pluginを調べてみましたが、私はこれを多く使用しており、非常に柔軟で使いやすいです。再発明を保存します...

出典

2008-09-16 04:00:41 Geoff

複数のjQuery電子メールフィールドフォーム検証を処理する最も良いリファクタ

答えて

関連する問題