javascript函数应用验证问题答案

【问题标题】：javascript function app validation issuejavascript函数应用验证问题
【发布时间】：2014-06-13 23:42:19
【问题描述】：

我在使用我创建的函数时遇到了问题。我正在建立一个网站的公司需要一个 sizer 应用程序，以便客户可以输入测量值并查看他们需要购买的尺寸型号。我已经构建了 sizer 应用程序，它工作正常，但我在验证时遇到了问题。我正在尝试完成两件事：

我需要确保所有三个字段都输入了一个值，所以如果一个字段留空，则需要显示错误消息并且函数将停止。
我需要确保输入的所有数据都是大于零的数字，否则会显示错误消息并且函数将停止。

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

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.';

    }

}

【问题讨论】：

这是一个 JSFiddle 与您的代码：jsfiddle.net/zwNn4 您有什么具体问题？
如果我将输入留空，它将给出错误消息和答案。相反，我希望在没有答案的情况下显示错误消息。

标签： javascript forms function validation

【解决方案1】：

“其他”块会导致问题，因此最好将它们消除。 :)

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 { errors = false; } 块。

【讨论】：

我听取了您的建议并使用了以下代码。它似乎正在工作，但我仍然有一个问题。如果我在其中一个输入字段中输入文本，则错误消息将显示为空白输入的错误消息。
if ((w.value === "") || (d.value === "") || (h.value === "")) { document.getElementById( "triccAns").innerHTML = '抱歉，您将字段留空。请填写所有字段，然后点击“提交”； }else ((isNaN(w.value)) || (isNaN(d.value)) || (isNaN(h.value))) { document.getElementById("triccAns").innerHTML = '对不起，你需要在上面的字段中输入一个有效的数字'; }
哦，是的。好的，所以我删除了将错误设置回 false 的“else”块。您不需要它们，因为您立即将错误设置为 false。响应已更新。不错的电话。

【解决方案2】：

如果你在按钮上使用onclick事件，该事件会在表单提交之前启动，为什么不使用onsubmit表单事件来代替onclick事件呢？

在数字输入中，您现在可以使用 min 和 max 属性

【讨论】：

当我使用 onsubmit 时，我需要如何更改 js？我尝试了 onsubmit，它清除了输入并且不输出响应
你需要把
并在收到错误时返回 false，或者在一切正常时返回 true，同时删除按钮中的 onclick 事件。如果您只想将脚本用于 html5 浏览器，那么编写所需的 max 和 min 属性就足够了，请确保您在 html 中使用和标签文件
@CharC 你想提交表单吗？还是仅在浏览器中用于根据测量显示正确的模型。
当他们输入他们的测量结果时，它会返回一个答案，这样他们就可以看到他们需要哪种型号。然后他们可以在下拉列表中选择模型并购买。如果我只使用 onclick 而不是 onsubmit 那我需要担心验证吗？
由于您没有提交表单，我认为在按钮上使用 onclick 事件就可以了。关于验证，这不仅是为了数据完整性，也是为了帮助用户，所以我认为验证是必要的。