JavaScript oninput驗證1一次

Question

我有2個輸入字段，長度和寬度。我正在使用實時驗證和計算而沒有提交按鈕。我被困在1個問題上，當我輸入長度「len」它立即驗證寬度以及。或者如果我首先輸入寬度，它也驗證len。我希望他們僅在輸入特定字段時進行驗證。

對於len和width輸入文本字段，我在HTML中都有ininput =「Validate（）」。所以oninput for len在用戶甚至嘗試輸入寬度之前自動檢查寬度驗證。

無論如何，只有1驗證失敗後打破或停止，所以他們都不是總是驗證？或者我需要使用2個獨立的函數進行oninput？

當兩個驗證都通過時，我需要將變量傳遞給Calculate（len，width）;進行最後的計算和顯示。

function Validate() 
{ 
    // user input 
    var len = parseFloat(document.getElementById("len").value); 
    var width = parseFloat(document.getElementById("width").value); 

    var lenValid; 
    var widthValid; 

    // validate 
    if (isNaN(len) || len <= 0 || len > 1000) 
    { 
     document.getElementById("len_error").innerHTML = "<br>" + "Must be between 0 and 1000"; 
     document.getElementById("len").focus(); 
     lenValid = false; 
    } 
    else 
    { 
     document.getElementById("len_error").innerHTML = ""; 
     lenValid = true; 
    } 

    if (isNaN(width) || width <= 0 || width > 1000) 
    { 
     document.getElementById("width_error").innerHTML = "<br>" + "Must be between 0 and 1000"; 
     document.getElementById("width").focus(); 
     widthValid = false; 
    } 
    else 
    { 
     document.getElementById("width_error").innerHTML = ""; 
     widthValid = true; 
    } 

    // process calculations 
    if (lenValid && widthValid) 
     Calculate(len, width); 
} 

Answer 1

您可以通過以下方式優化代碼。

function Validate(lw) 
{ 
    // user input 
    var len = parseFloat(document.getElementById("len").value); 
    var width = parseFloat(document.getElementById("width").value); 

    // validate 
    if (len <= 0 || len > 1000 || isNaN(len)) 
     document.getElementById("len_error").innerHTML = "<br>" + "Must be between 0 and 1000"; 
    else 
     document.getElementById("len_error").innerHTML = ""; 
    if (width <= 0 || width > 1000 || isNaN(width)) 
     document.getElementById("width_error").innerHTML = "<br>" + "Must be between 0 and 1000"; 
    else 
     document.getElementById("width_error").innerHTML = ""; 

    if (document.getElementById("len_error").innerHTML || document.getElementById("width_error").innerHTML) 
    { 
     document.getElementById("area").value = ""; 
     document.getElementById("perimeter").value = ""; 
     document.getElementById("diagonal").value = ""; 
     document.getElementById(lw).focus(); 
    } 
    else 
     Calculate(len, width); 
}