Migliori Refactoring per Gestire Più jQuery Campo Email di Validazione dei Form

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

Domanda

Qual è il modo migliore per il refactoring del codice allegato a gestire più indirizzi e-mail?

Allegato HTML/jQuery è completo e funziona per il primo indirizzo di posta elettronica.È possibile configurare le altre due da copia/incolla e cambiare il codice.Ma io vorrei solo il refactoring del codice esistente per gestire più indirizzo di posta elettronica campi.

<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>
È stato utile?

Soluzione

Invece di usare gli Id per la tua mail i campi, si può dare loro ogni classe:

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

Quindi, invece di selezionare $("#Email_Address_Status_Icon_1"), è possibile selezionare $("input.e-mail"), che darebbe un jQuery avvolto insieme di tutti gli elementi di input di classe-mail.

Infine, invece di fare riferimento all'icona di stato esplicitamente con un id, si potrebbe semplicemente dire:

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

questo sarebbe il campo email, cosi 'questo.next()' darebbe i suoi avanti di pari livello.Applichiamo il "span" selettore sulla cima di che, giusto per essere sicuri di ottenere quello che vogliamo.$(this).next() dovrebbe funzionare allo stesso modo.

In questo modo, si fa riferimento allo status icona in modo relativo.

Spero che questo aiuta!

Altri suggerimenti

Grazie!Ecco completato il refactoring con le modifiche suggerite.

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

Io farei :

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

Quindi aggiungere class='validateEmail' a tutti la tua email ingressi.

In alternativa, guardare in La Validazione Dei Form Plugin ho usato un sacco ed è molto flessibile e comodo da usare.Consente di risparmiare re-inventare...

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top