Wie überprüft man alle Bedingungen vor der Ausführung von Nachwirkungen

Question

Ich arbeite an einer Live-Validierungsfunktion. Das Problem besteht darin, dass die Folgen der Bedingungen in der Funktion ausgeführt werden, bevor der letzte Teil erfüllt wird. Der Indikator für die Eintrittsvalidierung sollte erst grün werden, wenn die Bedingungen erfüllt sind. Dies ist jedoch nicht der Fall.

Die Anzeige wird grün, wenn die dritte Bedingung erfüllt ist. Es sollte nicht, bis alle Bedingungen erfüllt sind. Irgendwelche Vorschläge, wie ich dieses Problem lösen kann.

Mein Code sieht wie folgt aus.

$(function() { 
 

 
    // Pre-define extensions 
 
    var xTension = ".com .net .edu"; 
 

 
    $("input").keyup(function() { 
 

 
    // Check the position of "@" symbol 
 
    var firstLetter = $(this).val().slice(0, 1); 
 
    var lastLetter = $(this).val().slice(-1); 
 
    var userXs = "No"; 
 

 
    // User provided extension 
 
    var userX = $(this).val(); 
 
    userX = userX.substr(userX.indexOf(".") + 0); 
 

 
    if (xTension.indexOf(userX) > -1) { 
 
     if (userX != "") { 
 
     userXs = "Yes"; 
 
     } else { 
 
     userXs = "No"; 
 
     } 
 
    } else { 
 
     userXs = "No"; 
 
    }; 
 

 
    if ($(this).val().indexOf("@") > -1 && (firstLetter != "@") && (lastLetter != "@") && (userXs != "No")) { 
 
     $("#input-status").removeClass("red").addClass("green"); 
 
    } else { 
 
     $("#input-status").removeClass("green").addClass("red"); 
 
    } 
 
    }); 
 
});

.rack { 
 
    width: 250px; 
 
    margin: 0 auto; 
 
} 
 

 
#input-status { 
 
    width: 1px; 
 
    height: 3px; 
 
    with: 0; 
 
    display: inline-block; 
 
    transition: all 2s; 
 
} 
 

 
input { 
 
    width: 230px; 
 
    height: 30px; 
 
    text-align: center; 
 
} 
 

 
#input-status.green, 
 
#input-status.red { 
 
    width: 235px; 
 
    background: darkGreen; 
 
    transition: all 2s; 
 
} 
 

 
#input-status.red { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="rack"> 
 

 
    <h1>Live Validat.ion</h1> 
 

 
    <input type="text" placeholder="Enter email address"> 
 
    <div id="input-status"> 
 

 
    </div> 
 
</div>

Answer 1

xTension ein Array Stellen, kein String. Wenn der Benutzer user@foo.c eintippt, wird userX.c sein und dies wird von indexOf() mit der Zeichenfolge verglichen werden, da es nichts gibt, das es zwingt, ganze Wörter zu finden. Wenn Sie dies tun, müssen Sie nicht mehr überprüfen, ob userX eine leere Zeichenfolge ist.

Ich habe ein paar andere Vereinfachungen am Code vorgenommen:

1. Statt die erste und letzte Zeichen des Erhaltens, gerade testen Sie die Position von @ gegen entsprechende Grenzen.
2. Keine Notwendigkeit für + 0 nach indexOf().
3. Rufen Sie nicht weiter $(this).val(), setzen Sie es in eine Variable.
4. Benutzer eine boolesche Variable für userXs.

$(function() { 
 

 
    // Pre-define extensions 
 
    var xTension = [".com", ".net", ".edu"]; 
 

 
    $("input").keyup(function() { 
 
    var val = $(this).val(); 
 

 
    // User provided extension 
 
    userX = val.substr(val.indexOf(".")); 
 

 
    userXs = xTension.indexOf(userX) > -1; 
 
    atPos = val.indexOf("@"); 
 
    if (atPos > 0 && atPos < val.length - 1 && userXs) { 
 
     $("#input-status").removeClass("red").addClass("green"); 
 
    } else { 
 
     $("#input-status").removeClass("green").addClass("red"); 
 
    } 
 
    }); 
 
});

.rack { 
 
    width: 250px; 
 
    margin: 0 auto; 
 
} 
 

 
#input-status { 
 
    width: 1px; 
 
    height: 3px; 
 
    with: 0; 
 
    display: inline-block; 
 
    transition: all 2s; 
 
} 
 

 
input { 
 
    width: 230px; 
 
    height: 30px; 
 
    text-align: center; 
 
} 
 

 
#input-status.green, 
 
#input-status.red { 
 
    width: 235px; 
 
    background: darkGreen; 
 
    transition: all 2s; 
 
} 
 

 
#input-status.red { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="rack"> 
 

 
    <h1>Live Validat.ion</h1> 
 

 
    <input type="text" placeholder="Enter email address"> 
 
    <div id="input-status"> 
 

 
    </div> 
 
</div>