여러 jQuery 이메일 필드 양식 유효성 검사를 처리하기 위한 최고의 리팩터링

StackOverflow https://stackoverflow.com/questions/69107

문제

여러 이메일 주소를 수용하도록 첨부된 코드를 리팩터링하는 가장 좋은 방법은 무엇입니까?

첨부된 HTML/jQuery는 완전하며 첫 번째 이메일 주소에서 작동합니다.코드를 복사/붙여넣기하고 변경하여 나머지 두 개를 설정할 수 있습니다.하지만 여러 이메일 주소 필드를 처리하기 위해 기존 코드를 리팩터링하고 싶습니다.

<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>
도움이 되었습니까?

해결책

이메일 필드에 ID를 사용하는 대신 각 필드에 클래스를 제공할 수 있습니다.

<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'는 이메일 필드이므로 'this.next()'는 다음 형제를 제공합니다.우리는 의도한 바를 얻고 있는지 확인하기 위해 그 위에 "스팬" 선택기를 적용합니다.$(this).next()도 같은 방식으로 작동합니다.

이렇게 하면 상태 아이콘을 상대적인 방식으로 참조하게 됩니다.

도움이 되었기를 바랍니다!

다른 팁

감사해요!제안된 변경 사항이 포함된 완료된 리팩터링은 다음과 같습니다.

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

나는 할것이다 :

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

그런 다음 모든 이메일 입력에 class='validateEmail'을 추가하세요.

또는 다음을 살펴보십시오. 양식 검증 플러그인 나는 이것을 많이 사용해 왔으며 매우 유연하고 사용하기 좋습니다.재발명을 절약할 수 있습니다...

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top