Javascript函数应用验证问题

javascript function app validation issue

本文关键字:问题 验证 应用 函数 Javascript      更新时间:2023-09-26

我有一个我做的功能的麻烦。我正在为一家公司建立一个网站,需要一个尺寸应用程序,这样客户就可以输入测量并查看他们需要购买的尺寸模型。我已经建立了大小的应用程序,它的工作很好,但我有验证的麻烦。我想完成两件事:

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

}

"else"块会引起问题,因此最好消除它们。:)

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; }块。

如果你在按钮上使用onclick事件,事件将在表单提交之前启动,为什么不使用onsubmit表单事件代替onclick事件呢?

在数字输入中,你现在可以使用最小和最大属性