JavaScript 表单验证在第一次检查后失败

Question

第一个功能适用于警报框，但它不会清除无效输入。其他函数写得一模一样，但浏览器对它们没有反应。

注意它们都有唯一的 ID。

function casing_val() {
  let x = document.getElementById("casing_diam_mm").value;
  let y = document.getElementById("hole_diam_mm").value;
  if (x > y) {
    x.value = "";
    alert("casing diameter must be less than hole diameter. Try again.");
  }
}

function firstscreen_val() {
  let st1 = document.getElementById("screen1_top_dbg").value;
  let sb1 = document.getElementById("screen1_bot_dbg").value;

  let z = document.getElementById("depth_dbg").value;
  if (sb1 < st1) {
    alert("Bottom of screen must be lower than the top. Try again.");
  }
  if (st1 > z) {
    alert("Top of screen must be above the total depth. Try again.");
  }
}

<label for="hole_diam_mm" class="sr-only">Hole diameter (mm)</label>
<input type="text" name="hole_diam_mm" id="hole_diam_mm" tabindex="4" class="form-control" placeholder="Hole diameter (mm)" value="<?php echo $hole_diam_mm?>">
</div>
<div class="form-group">
  <label for="casing_diam_mm" class="sr-only">Casing diameter (mm)</label>
  <input onchange=casing_val() type="text" name="casing_diam_mm" id="casing_diam_mm" tabindex="4" class="form-control" placeholder="Casing diameter (mm)" value="<?php echo $casing_diam_mm ?>">
</div>
<div class="form-group">
  <label for="screen1_top_dbg" class="sr-only">Top of first screen</label>
  <input type="text" name="screen1_top_dbg" id="screen1_top_dbg" tabindex="5" class="form-control" placeholder="Top of first screen" value="<?php echo $screen1_top_dbg ?>">
</div>
<div class="form-group">
  <label for="screen1_bot_dbg" class="sr-only">Bottom of first screen</label>
  <input type="text" name="screen1_bot_dbg" id="screen1_bot_dbg" tabindex="6" class="form-control" placeholder="Bottom of first screen" value="<?php echo $screen1_bot_dbg ?>">
</div>

Answer 1

文本输入未被清除的原因是因为您将 x 设置为元素的值而不是元素本身。另外，在检查一个是否大于另一个之前，您应该使用 parseFloat() 将字符串值转换为数值

您可以通过将元素存储在变量中然后使用该变量来设置值来解决此问题，而无需过多更改代码。

function casing_val() {
  // Set the element variables
  let xElement = document.getElementById("casing_diam_mm");
  let yElement = document.getElementById("hole_diam_mm");
  
  let x = parseFloat(xElement.value); // parseFloat converts string to floating number
  let y =  parseFloat(yElement.value);

  if (x > y) {
    xElement.value = ""; // use the element variable to set the value
    alert("casing diameter must be less than hole diameter. Try again.");
  }
}

您提供的代码不完整，但我怀疑其他函数可能无法触发的原因可能是因为您的输入可能没有附加 onchange 事件。