javascript函数应用程序验证问题

Question

我在使用自己创建的函数时遇到了问题。我正在为一家公司建立一个网站，需要构建一个尺码应用程序，以便客户可以输入尺寸并查看他们需要购买的尺码型号。我已经构建了 sizer 应用程序并且工作正常，但我在验证时遇到了问题。我正在努力完成两件事:

1. 我需要确保所有三个字段都输入了值，因此如果某个字段留空，则需要显示错误消息并且该函数将停止。

2. 我需要确保输入的所有数据都是大于零的数字，如果不是，则会显示错误消息并且函数将停止。

我是 JS 的初学者，所以如果我还不太了解，请原谅我，但我觉得我就在那里。任何帮助将不胜感激!代码如下

HTML

    <div class="box">

        <h2>Calculate Your TRiCC Size</h2>

        <noscript><p>This Widget requires Javascript</p></noscript>

        <!-- FORM -->


        <form id='TriccSizerForm' method='post'>



            <!-- Height -->

            <label for='triccHeight'>Height in inches:</label>

            <input id='triccHeight' type='number' name='triccHeight' value="" required>



            <!-- Width -->


            <label for='triccWidth'>Width in inches:</label>

            <input id='triccWidth' type='number' name='triccWidth' value="" required>



            <!-- Depth -->


            <label for='triccDepth'>Depth in inches:</label>

            <input id='triccDepth' type='number' name='triccDepth' value="" required>




            <div id="mistake"> </div>

            <div id="error"> </div>



            <!-- Answer -->


            <div id="triccAns"> </div>


            <!-- Submit button -->


            <button type='submit' value='Calculate' onclick='triccSizer(); return false;'>Calculate</button>

        </form>

JS

function triccSizer() {





// Perform script



var h = document.getElementById("triccHeight");

var w = document.getElementById("triccWidth");

var d = document.getElementById("triccDepth");

var errors = false;


// validate

if (w.value === "") {

    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the width';

} else if (d.value === "") {

    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the depth';

} else if (h.value === "") {

    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the height';
} else {

    errors = false;
}



if (isNaN(w.value)) {

    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the width';

} else if (isNaN(d.value)) {

    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the depth';

} else if (isNaN(h.value)) {

    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the height';

} else {

    errors = false;
} 


// Get Model


if (errors == true) {

    document.getElementById("mistake").innerHTML = 'Sorry but you entered something inccorect into the form. Please try again.';

} else { 


    if ((w.value < 34) && (d.value < 35) && (h.value < 35)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 36A'; 

    else if ((w.value < 54) && (d.value < 35) && (h.value < 35)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 3656A Standard';

    else if ((w.value < 34) && (d.value < 54) && (h.value < 35)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 3656A Deep';

    else if ((w.value < 34) && (d.value < 35) && (h.value < 55)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 3656A Upright';

    else if ((w.value < 69) && (d.value < 35) && (h.value < 35)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 36A Extended';

    else if ((w.value < 89) && (d.value < 35) && (h.value < 35)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 3656A Short Extended';

    else if ((w.value < 109) && (d.value < 35) && (h.value < 35)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 3656A Extended';          

    else if ((w.value < 44) && (d.value < 45) && (h.value < 45)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 46A';

    else if ((w.value < 89) && (d.value < 45) && (h.value < 45)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 46A Extended';

    else if ((w.value < 54) && (d.value < 55) && (h.value < 55)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 56A';

    else if ((w.value < 109) && (d.value < 55) && (h.value < 55)) 
        document.getElementById("triccAns").innerHTML = 'Choose Model 56A Extended (You Must Contact Us For This Model and Pricing)';                   

    else 
        document.getElementById("triccAns").innerHTML = 'You need a customized TRiCC Protective Cover. Please call 224-698-7422 for assistance.';

    }

}

Answer 1

“else” block 会导致问题，所以最好消除它们。 :)

document.getElementById("mistake").innerHTML = ''; // empty previous error
document.getElementById("error").innerHTML = ''; 

// validate non blank
if (w.value === "") {
    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the width';

} else if (d.value === "") {
    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the depth';

} else if (h.value === "") {
    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the height';
}


// validate non zero
if (isNaN(w.value)) {
    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the width';

} else if (isNaN(d.value)) {
    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the depth';

} else if (isNaN(h.value)) {
    errors = true;
    document.getElementById("error").innerHTML = 'Sorry but you must enter a valid number greater than zero for the height';

代码中发生的情况是，在检查空白时会收到错误标志，但在单独检查非零时会清除该错误，该非零与任何“if”条件不匹配并执行 } else { 错误 = false; } block 。