Question

我有2个输入字段，长度和宽度。我正在使用实时验证和计算，没有提交按钮。我被困在1个问题上，当我输入长度“len”时，它立即验证宽度。或者如果我先输入宽度，它也会验证len。我希望它们仅在输入特定字段时进行验证。

对于len和width输入文本字段，我在HTML中输入了oninput =“Validate（）”。因此，len的oninput会在用户尝试输入宽度之前自动检查宽度验证。

无论如何只有一个验证失败后才会中断或停止，所以它们都不会一直被验证？或者我是否需要使用2个独立的函数进行输入？

当两个验证都通过I时，需要将变量传递给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);
}

JavaScript oninput验证一次1个

1 个答案: