El mejor refactor para manejar la validación de formularios de campos de correo electrónico de jQuery múltiples

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

Pregunta

¿Cuál es la mejor manera de refactorizar el código adjunto para dar cabida a varias direcciones de correo electrónico?

El HTML/jQuery adjunto está completo y funciona para la primera dirección de correo electrónico.Puedo configurar los otros dos copiando/pegando y cambiando el código.Pero me gustaría simplemente refactorizar el código existente para manejar múltiples campos de direcciones de correo electrónico.

<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>
¿Fue útil?

Solución

En lugar de utilizar ID para los campos de su correo electrónico, puede asignarles una clase a cada uno:

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

Luego, en lugar de seleccionar $("#Email_Address_Status_Icon_1"), puede seleccionar $("input.email"), lo que le daría un conjunto jQuery envuelto de todos los elementos de entrada de la clase de correo electrónico.

Finalmente, en lugar de referirse explícitamente al ícono de estado con una identificación, podrías simplemente decir:

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

'this' sería el campo de correo electrónico, por lo que 'this.next()' le daría su próximo hermano.Aplicamos el selector "span" encima solo para asegurarnos de que estamos obteniendo lo que pretendemos.$(this).next() funcionaría de la misma manera.

De esta manera, te refieres al ícono de estado de manera relativa.

¡Espero que esto ayude!

Otros consejos

¡Gracias!Aquí está la refactorización completa con los cambios sugeridos.

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

Yo lo haría :

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

Luego agregue class='validateEmail' a todas sus entradas de correo electrónico.

Alternativamente, busque en Complemento de validación de formularios Lo he usado mucho y es muy flexible y agradable de usar.Te ahorra reinventarte...

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top