Best Refactor für die Verarbeitung mehrerer jQuery-E-Mail-Feldformvalidierung

Was ist der beste Weg, um den angehängten Code umzuformatieren, um mehrere E-Mail-Adressen aufzunehmen?Best Refactor für die Verarbeitung mehrerer jQuery-E-Mail-Feldformvalidierung

Die angehängte HTML/jQuery ist abgeschlossen und funktioniert für die erste E-Mail-Adresse. Ich kann die anderen beiden durch Kopieren/Einfügen und Ändern des Codes einrichten. Aber ich möchte den vorhandenen Code einfach umgestalten, um mehrere E-Mail-Adressfelder zu bearbeiten.

<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>

Quelle

2008-09-16 Brian Boatright

Statt IDs für Ihre E-Mail-Felder verwenden, können Sie sie jeweils eine Klasse geben:

<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>

dann statt $ auszuwählen ("# Email_Address_Status_Icon_1"), können Sie wählen $ (“ input.email "), die Ihnen einen jQuery-Wrapped-Satz aller Eingabeelemente der Klassen-E-Mail liefern würde.

Schließlich statt Bezugnahme auf das Statussymbol explizit mit einer ID, könnte man einfach sagen:

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

‚dies‘ würde das E-Mail-Feld sein, so ‚this.next()‘ Sie würde sein nächstes Geschwister. Wir wenden den "span" -Wähler zusätzlich an, um sicher zu sein, dass wir das bekommen, was wir beabsichtigen. $ (this) .next() würde genauso funktionieren.

Auf diese Weise beziehen Sie sich relativ auf das Statussymbol.

Hoffe, das hilft!

Quelle

2008-09-16 03:23:08 Pandincus

Danke! Hier ist der fertige Refactor mit Ihren vorgeschlagenen Änderungen.

<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>

Quelle

2008-09-16 03:49:03

ich tun würde:

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

Dann Klasse hinzufügen = 'validateEmail' auf alle Ihre E-Mail-Eingänge.

Alternativ schauen Sie in Form Validation Plugin Ich habe dies oft verwendet und es ist sehr flexibel und schön zu bedienen. Rettet Sie neu erfinden ...

Quelle

2008-09-16 04:00:41 Geoff

Best Refactor für die Verarbeitung mehrerer jQuery-E-Mail-Feldformvalidierung

Antwort

Verwandte Themen