Fatal编程技术网
  • javascript/
  • Javascript 在HTML表单上显示错误消息，然后在用户更正错误后删除此消息

Javascript 在HTML表单上显示错误消息，然后在用户更正错误后删除此消息

javascript html forms validation

Javascript 在HTML表单上显示错误消息，然后在用户更正错误后删除此消息,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我正在尝试使用HTML5和基本JavaScript构建一个简单的应用程序。我有它的工作，但我有困难做一件简单的事情（至少在我使用的其他语言中是简单的）。这是我目前的代码： <!DOCTYPE html> <html> <head> <title>JS Test</title> <meta charset="utf-8" /> </head&

我正在尝试使用HTML5和基本JavaScript构建一个简单的应用程序。我有它的工作，但我有困难做一件简单的事情（至少在我使用的其他语言中是简单的）。这是我目前的代码：

<!DOCTYPE html>
<html>
        <head>
            <title>JS Test</title>
            <meta charset="utf-8" />
        </head>

        <script>
            function isTrackValid(track_a, track_b) {
                if(track_a > 200.0 || track_a < 0.0) {
                    return "Number must be between 0 BPM and 200 BPM";
                }
                if(track_b > 200.0 || track_b < 0.0) {
                    return "Number must be between 0 BPM and 200 BPM";
                }
                return "";
            }

            function calculate(track_a, track_b) {
                if(track_a > track_b) {
                    return ((track_a - track_b) / track_a) * 100;
                } else if(track_a < track_b) {
                    return ((track_a - track_b) / track_b) * 100;
                } else {
                    return 0.0;
                }
            }

            function main() {
                track_a = input_a.valueAsNumber;
                track_b = input_b.valueAsNumber;

                var message = isTrackValid(track_a, track_b);
                if(message !== "") {
                    $('#error_message').text(message);
                } else {
                    var result = calculate(track_a, track_b);
                    return result.toFixed(2);
                }
            }
        </script>
        <body>
            <header>
                <h1>JS Test</h1>
            </header>
            <form onsubmit="return false" oninput="o.value=eval(main());">
                Track A: <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A"><br/>
                Track B: <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B"><br/>
                <br />
                <div id="error_message"></div>
                Output: <output name="o" step="0.01" for="a b"></output>
            </form>
        </body>
</html>


JS测试
函数isTrackValid（磁道a、磁道b）{
如果（轨迹a>200.0 | |轨迹a<0.0）{
return“编号必须介于0到200 BPM之间”；
}
如果（轨迹b>200.0 | |轨迹b<0.0）{
return“编号必须介于0到200 BPM之间”；
}
返回“”；
}
函数计算（轨道a、轨道b）{
如果（轨迹a>轨迹b）{
返回（（a轨道-b轨道）/a轨道）*100；
}否则如果（轨道a<轨道b）{
返回（（a轨道-b轨道）/b轨道）*100；
}否则{
返回0.0；
}
}
函数main（）{
轨道a=输入值a.valueAsNumber；
轨道\ b=输入\ b.valueAsNumber；
var消息=isTrackValid（磁道a、磁道b）；
如果（消息！==“”）{
$（“#错误消息”）。文本（消息）；
}否则{
var结果=计算（轨道a、轨道b）；
返回结果。toFixed（2）；
}
}
JS测试
曲目A:

曲目B:



输出：
我想要的是，如果用户输入一个介于0和200之间的数字，我的
就会显示出来。此
输出将根据上面的javascript计算出正确答案。如果用户输入一个负数，或者一个大于200的数字，那么我希望将错误输入到
字段中

对于当前代码（以及因StackOverflow上的应答而产生的
），当发生错误时，它将超出
输出
。然而，当用户输入一个有效的数字时，这个错误会一直存在，并且永远不会消失

我想知道我是否能消除这个错误？或者如果它无效，我可以做些什么让它转到
Output

如果值有效，则不会删除
错误
消息。另外请注意，您可以使用
[type=number]
元素上的
JavaScript事件绑定来绑定事件，而不是使用
eval

试试这个：



函数isTrackValid（磁道a、磁道b）{
如果（轨迹a>200.0 | |轨迹a<0.0）{
return“编号必须介于0到200 BPM之间”；
}
如果（轨迹b>200.0 | |轨迹b<0.0）{
return“编号必须介于0到200 BPM之间”；
}
返回“”；
}
函数计算（轨道a、轨道b）{
如果（轨迹a>轨迹b）{
返回（（a轨道-b轨道）/a轨道）*100；
}否则如果（轨道a<轨道b）{
返回（（a轨道-b轨道）/b轨道）*100；
}否则{
返回0.0；
}
}
函数main（）{
轨道a=输入值a.valueAsNumber；
轨道\ b=输入\ b.valueAsNumber；
var消息=isTrackValid（磁道a、磁道b）；
如果（消息！==“”）{
$（“#错误消息”）。文本（消息）；
}否则{
$（“#错误消息”）。文本（消息）；
var结果=计算（轨道a、轨道b）；
返回结果。toFixed（2）；
}
}
var elems=document.querySelectorAll（'[type=“number”]'）；
[]forEach.call（元素、函数（元素）{
元素addEventListener（“输入”，主）；
});


轨道A：

轨道B：




输出：

@GopsAB通过JSFiddle执行此操作似乎没有显示任何错误：您是否包含了jquery for$（'#error_message'）。text（message）；quo@Alex您在使用
JQuery
？如果是这样的话，你还加了吗？@Niklesh:o我甚至不知道那是JQuery。我最初问了一个关于StackOverflow的问题，关于只用javascript处理错误。我知道当时（现在可能没有）HTML命令。所以我要说那应该是一个DIV（即：）。然后，您可以显示/隐藏DIV，也可以在不想看到它时将其移动到-5000、-5000之类的位置。此外，还需要将z索引设置为零（0）以外的其他值，而零（0）是其他所有内容所在的层。（即：z-index:1将覆盖网页的其余部分。）