Çoklu JQuery E-posta Alan Form Doğrulama İşlemi için En İyi Refactor

Birden çok e-posta adresini barındırmak için eklenmiş kodu yeniden yönlendirmenin en iyi yolu nedir?Çoklu JQuery E-posta Alan Form Doğrulama İşlemi için En İyi Refactor

Ekli HTML/jQuery tamamlandı ve ilk e-posta adresi için çalışıyor. Diğer ikisini de kopyalayıp yapıştırarak ve kodu değiştirerek kurabilirim. Ancak birden çok e-posta adresi alanını işlemek için mevcut kodu yeniden düzenlemeyi tercih ediyorum. Bunun yerine, e-posta alanları için kimliklerini kullanarak

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

kaynak

2008-09-16 Brian Boatright

, onlara her bir sınıf verebilir: Sonra

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

yerine $ ("# Email_Address_Status_Icon_1") seçmek yerine, siz "($ seçebilirsiniz input.email "), size sınıf e-postasının tüm girdi öğelerinin jQuery sarılmış kümesini verir.

Son olarak, bunun yerine bir kimliğe sahip açıkça durum simgesinin atıfta yerine, basitçe söyleyebiliriz:

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

'Bu e-posta alanını, yani 'this.next()' size verecekti olurdu sonraki kardeşleri. Niyet etmeyi amaçladığımızdan emin olmak için "açık" seçiciyi uygularız. $ (this) .next() aynı şekilde çalışır.

Bu sayede durum simgesine göreceli olarak başvurursunuz.

Bu yardımcı olur umarız!

kaynak

2008-09-16 03:23:08 Pandincus

Teşekkürler! Önerilen değişikliklerinizi içeren tamamlanmış refaktör. Ben yapacağını

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

kaynak

2008-09-16 03:49:03

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

Sonra sınıf eklemek = tüm e-posta girişlerine 'validateEmail'.

Alternatif olarak Form Validation Plugin'a bakın, bunu çok kullandım ve çok esnek ve kullanımı güzel. Yeniden icat etmenizi sağlar ...

kaynak

2008-09-16 04:00:41 Geoff

Çoklu JQuery E-posta Alan Form Doğrulama İşlemi için En İyi Refactor

cevap

İlgili konular