JavaScript每次oninput验证1个

JavaScript oninput validation 1 at a time

本文关键字：1个 验证 oninput 每次 JavaScript      更新时间：2023-09-26

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

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

无论如何，在1个验证失败后中断或停止，因此它们并不总是被验证?或者我需要为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);
}

您可以通过以下方式优化代码。

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);
}
相关文章：