aftermathを実行する前にすべての条件を確認する方法

Question

ライブ検証機能を開発中です。問題は、関数の条件の余波が最後の部分が満たされる前に実行されることです。入場確認インジケータは条件が満たされるまで緑色に変わらないはずですが、そうではありません。

3番目の条件が満たされると、インジケータが緑色に変わります。すべての条件が満たされるまでは、そうしてはいけません。どのように私はこの問題を解決することができるかに関する任意の提案。

私のコードは以下のようになります。

$(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配列ではなく、文字列を作成します。ユーザーがuser@foo.cと入力した場合、userXは.cになります。文字列に一致させるものはないので、これはindexOf()と一致します。これを行うと、userXが空文字列かどうかを確認する必要がなくなります。

私は、コードにいくつかの他の単純化を行った。

1. 代わりに、最初と最後の文字を得るための、ちょうど適切な制限に対する@の位置をテストします。
2. の後に+ 0の必要はありません。
3. $(this).val()を呼び出したままにしないでください。変数に入れてください。
4. ユーザー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>