在开始之前,我想说,如果这个问题已经得到解答,请引导我找到适当的答案。
我的 Java 脚本函数存在问题,未返回预期值。我尝试使用它来验证数字范围的文本输入,如果输入超出该范围,则返回自定义错误消息。
这是我尝试验证的表单中的一个字段的 HTML:
<td><input name="bottomair" type="text" required id="bottomair"
size="3" onChange="bottomAirF()"></td>
<td class="noborder" id="bottomairerror"></td>
这是相关的 Javascript:
function bottomAirF() {
var x, text;
x = document.getElementById("bottomair");
if (isNaN(x) || x < 33 || x > 40) {
text = "Temp Out of Tolerance";
} else {
text = " ";
}
document.getElementById("bottomairerror").innerHTML = text;
}
我想要完成的是让函数检查输入的数字是否在 33 到 40 之间。如果该数字不在这两个数字之间,则代码应返回错误消息“Temp Out of Tolerance”但如果数字在 33 到 40 之间,则不应返回任何内容。就目前而言,任何数量(或缺少数量)都会返回错误消息。
此代码是根据W3School的比较功能修改的。
我已经尝试了我能想到的一切,但仍然无法正常工作,因此我们将不胜感激。
最佳答案
尽管所有发布的答案在技术上都是正确的,但我相信这个解决方案既不可维护也不可扩展。
您对静态元素 id 有严重依赖。
想象一下,如果将来您想添加更多这些 td
执行此类验证的系统,您要跟踪新添加的行吗?
虽然,从技术上讲,你可以,但从人类学上讲,它会让人精神疲惫,而类似的事情就否认了计算机和软件设计的初衷——自动化。
可以让您完成创造性任务并让计算机完成机械工作的东西。
出于这个哲学原因,我相信这段代码是一个更好的解决方案。
HTML - 删除 ID 并传递 this
表示当前元素(在本例中为输入)作为函数的参数。
<table>
<tr>
<td><input type="text" required size="3" onChange="bottomAirF(this)"></td>
<td class="noborder"></td>
</tr>
</table>
JS - 使用 DOM 访问器查找下一个 td
并更新它的 innerHTML
function bottomAirF(elem) {
var x, text;
x = +elem.value; // Prepended + sign will parse whatever follows to integer.
if (isNaN(x) || x < 33 || x > 40) {
text = "Temp Out of Tolerance";
} else {
text = " ";
}
elem.parentNode.nextElementSibling.innerHTML = text;
}
编辑:更新的要求
添加新的验证和条件。
假设您有 3 个需要验证的文本框。每个文本框都有不同的验证参数。
First 应该只接受 1 到 10 之间的值
第二个应该只接受 11 到 33 之间的值
第三个应该只接受 33 到 41 之间的值
因此更新后的代码将是(函数名称将更改为通用名称,例如 validate
)
请注意,input
上还有两个附加属性。元素即 val-min
和val-max
指定范围。
<table>
<tr>
<td><input type="text" required val-min="1" val-max="10" size="3" onChange="validate(this)"></td>
<td class="noborder"></td>
</tr>
<tr>
<td><input type="text" required val-min="11" val-max="33" size="3" onChange="validate(this)"></td>
<td class="noborder"></td>
</tr>
<tr>
<td><input type="text" required val-min="33" val-max="40" size="3" onChange="validate(this)"></td>
<td class="noborder"></td>
</tr>
</table>
JS代码
function validate(elem) {
var x, text;
x = +elem.value; // Prepended + sign will parse whatever follows to integer.
var min = elem.getAttribute('val-min');
var max = elem.getAttribute('val-max')
if (isNaN(x) || x < min || x > max) {
text = "Temp Out of Tolerance";
} else {
text = " ";
}
elem.parentNode.nextElementSibling.innerHTML = text;
}
关于JavaScript 返回错误结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33516127/