여러 jQuery 전자 메일 필드 형식 유효성 검사를 처리하는 최고의 리 팩터

여러 전자 메일 주소를 수용하기 위해 첨부 된 코드를 리팩토링하는 가장 좋은 방법은 무엇입니까?여러 jQuery 전자 메일 필드 형식 유효성 검사를 처리하는 최고의 리 팩터

첨부 된 HTML/jQuery가 완성되어 첫 번째 이메일 주소로 작동합니다. 복사/붙여 넣기와 코드 변경으로 다른 두 가지를 설정할 수 있습니다. 하지만 여러 전자 메일 주소 필드를 처리하기 위해 기존 코드를 리팩터링하고 싶습니다. 대신 이메일 필드에 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()가'당신에게 줄 것 일 것입니다 그 다음 형제. 우리는 "span"selector를 적용하여 우리가 의도 한 바를 얻고 있는지 확인합니다. $ (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 전자 메일 필드 형식 유효성 검사를 처리하는 최고의 리 팩터

답변

관련 문제