JavaScript表单验证首次校验后失效问题求助

一、第一个函数无法清除无效输入的问题 #

你在casing_val里犯了个基础错误：把x赋值成了输入框的文本值（字符串类型），而不是输入框的DOM元素本身。所以执行x.value = ""只是给一个字符串变量加了个无用属性，根本不会清空输入框。

修复方法：先获取输入框的DOM对象，再操作它的value属性，同时建议把输入值转成数字再比较（避免字符串比较的逻辑错误，比如"100"会被判定为小于"99"）。

二、其余函数无响应的问题 #

firstscreen_val函数完全没被触发，因为你没给对应的输入框绑定任何事件（比如onchange）。只有casing_diam_mm输入框加了onchange=casing_val()，另外两个筛管相关的输入框没有绑定触发校验的事件，浏览器自然不知道什么时候去执行这个函数。

修复方法：给需要校验的输入框添加onchange事件，绑定firstscreen_val函数，同时同样处理数值转义的问题。

修正后的JavaScript代码 #

function casing_val() {
  // 先获取DOM元素，再分别取值
  const casingInput = document.getElementById("casing_diam_mm");
  const holeInput = document.getElementById("hole_diam_mm");
  const x = parseFloat(casingInput.value);
  const y = parseFloat(holeInput.value);
  
  // 先判断是否为有效数字，再做比较
  if (!isNaN(x) && !isNaN(y) && x > y) {
    casingInput.value = "";
    alert("套管直径必须小于钻孔直径，请重新输入。");
  }
}

function firstscreen_val() {
  const screenTopInput = document.getElementById("screen1_top_dbg");
  const screenBotInput = document.getElementById("screen1_bot_dbg");
  const depthInput = document.getElementById("depth_dbg");
  
  const st1 = parseFloat(screenTopInput.value);
  const sb1 = parseFloat(screenBotInput.value);
  const z = parseFloat(depthInput.value);

  // 校验有效数字后再判断逻辑
  if (!isNaN(st1) && !isNaN(sb1) && sb1 < st1) {
    alert("筛管底部必须低于顶部，请重新输入。");
  }
  if (!isNaN(st1) && !isNaN(z) && st1 > z) {
    alert("筛管顶部必须低于总深度，请重新输入。");
  }
}

修正后的HTML代码（添加事件绑定） #

<div class="form-group">
  <label for="hole_diam_mm" class="sr-only">钻孔直径(mm)</label>
  <input type="text" name="hole_diam_mm" id="hole_diam_mm" tabindex="4" class="form-control" placeholder="钻孔直径(mm)" value="<?php echo $hole_diam_mm?>">
</div>
<div class="form-group">
  <label for="casing_diam_mm" class="sr-only">套管直径(mm)</label>
  <input onchange="casing_val()" type="text" name="casing_diam_mm" id="casing_diam_mm" tabindex="4" class="form-control" placeholder="套管直径(mm)" value="<?php echo $casing_diam_mm ?>">
</div>
<div class="form-group">
  <label for="screen1_top_dbg" class="sr-only">第一根筛管顶部</label>
  <!-- 绑定校验事件 -->
  <input onchange="firstscreen_val()" type="text" name="screen1_top_dbg" id="screen1_top_dbg" tabindex="5" class="form-control" placeholder="第一根筛管顶部" value="<?php echo $screen1_top_dbg ?>">
</div>
<div class="form-group">
  <label for="screen1_bot_dbg" class="sr-only">第一根筛管底部</label>
  <!-- 绑定校验事件 -->
  <input onchange="firstscreen_val()" type="text" name="screen1_bot_dbg" id="screen1_bot_dbg" tabindex="6" class="form-control" placeholder="第一根筛管底部" value="<?php echo $screen1_bot_dbg ?>">
</div>

内容的提问来源于stack exchange，提问作者nick_hydro