Melhor refatorador para lidar com validação de formulário de campo de e-mail jQuery múltiplo

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

Pergunta

Qual é a melhor maneira de refatorar o código anexado para acomodar vários endereços de e-mail?

O HTML/jQuery anexado está completo e funciona para o primeiro endereço de e-mail.Posso configurar os outros dois copiando/colando e alterando o código.Mas eu gostaria apenas de refatorar o código existente para lidar com vários campos de endereço de e-mail.

<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>
Foi útil?

Solução

Em vez de usar IDs para seus campos de e-mail, você pode atribuir uma classe a cada um deles:

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

Então, em vez de selecionar $("#Email_Address_Status_Icon_1"), você pode selecionar $("input.email"), o que forneceria um conjunto jQuery agrupado de todos os elementos de entrada da classe email.

Finalmente, em vez de se referir explicitamente ao ícone de status com um ID, você poderia simplesmente dizer:

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

'this' seria o campo de email, então 'this.next()' daria a você seu próximo irmão.Aplicamos o seletor "span" em cima disso apenas para ter certeza de que estamos conseguindo o que pretendemos.$(this).next() funcionaria da mesma maneira.

Dessa forma, você está se referindo ao ícone de status de maneira relativa.

Espero que isto ajude!

Outras dicas

Obrigado!Aqui está o refatorador completo com as alterações sugeridas.

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

Eu faria :

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

Em seguida, adicione class='validateEmail' a todas as suas entradas de email.

Alternativamente, procure Plug-in de validação de formulário Eu usei muito isso e é muito flexível e agradável de usar.Evita que você reinvente...

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top