求助：网页表单3个特定格式输入框的JavaScript正则验证

没问题，我帮你搞定这三个字段的正则验证！咱们先拆解每个字段的格式要求，对应写出精准的正则表达式，再给你一套完整的表单验证实现代码，直接套用就行~

针对你给出的三种格式，我整理了匹配规则和对应的正则：

• 格式1：NNNN.NN.NNNN（示例：1234.56.7890）
  要求是4位数字 + 点 + 2位数字 + 点 + 4位数字，正则为：

  /^\d{4}\.\d{2}\.\d{4}$/
  

  解释：^匹配字符串开头，\d{4}匹配4个数字，\.匹配实际的点号（因为点在正则里是特殊字符，要转义），\d{2}匹配2个数字，最后$匹配字符串结尾，确保整个输入完全符合格式。

• 格式2：NNN.N（示例：123.4）
  要求是3位数字 + 点 + 1位数字，正则为：

  /^\d{3}\.\d{1}$/
  

  解释：\d{3}匹配3个数字，\.匹配点号，\d{1}匹配1个数字，同样用^和$限制整个输入的格式。

• 格式3：NNNNNNN-NNN（示例：1234567-890）
  要求是7位数字 + 横杠 + 3位数字，正则为：

  /^\d{7}-\d{3}$/
  

  解释：\d{7}匹配7个数字，-匹配实际的横杠（横杠不是正则特殊字符，不用转义），\d{3}匹配3个数字，^和$确保没有多余字符。

下面是包含HTML表单和JavaScript验证逻辑的完整示例，你可以直接复制使用，或者根据自己的页面结构调整：

<form id="myForm">
  <div>
    <label for="field1">格式1（NNNN.NN.NNNN）：</label>
    <input type="text" id="field1" name="field1">
  </div>
  <div>
    <label for="field2">格式2（NNN.N）：</label>
    <input type="text" id="field2" name="field2">
  </div>
  <div>
    <label for="field3">格式3（NNNNNNN-NNN）：</label>
    <input type="text" id="field3" name="field3">
  </div>
  <button type="submit">提交表单</button>
</form>

// 获取表单元素
const form = document.getElementById('myForm');

// 表单提交时触发验证
form.addEventListener('submit', function(e) {
  // 阻止表单默认提交行为，先做验证
  e.preventDefault();

  // 获取三个输入框的值，去除前后空格
  const field1 = document.getElementById('field1').value.trim();
  const field2 = document.getElementById('field2').value.trim();
  const field3 = document.getElementById('field3').value.trim();

  // 定义正则规则
  const regex1 = /^\d{4}\.\d{2}\.\d{4}$/;
  const regex2 = /^\d{3}\.\d{1}$/;
  const regex3 = /^\d{7}-\d{3}$/;

  // 开始验证每个字段
  let isValid = true;
  let errorMsg = '';

  if (!regex1.test(field1)) {
    isValid = false;
    errorMsg += '字段1格式错误，需符合NNNN.NN.NNNN（如1234.56.7890）\n';
  }

  if (!regex2.test(field2)) {
    isValid = false;
    errorMsg += '字段2格式错误，需符合NNN.N（如123.4）\n';
  }

  if (!regex3.test(field3)) {
    isValid = false;
    errorMsg += '字段3格式错误，需符合NNNNNNN-NNN（如1234567-890）\n';
  }

  // 根据验证结果处理
  if (isValid) {
    // 验证通过，可以提交表单（这里可以换成你自己的提交逻辑，比如AJAX提交）
    alert('所有字段格式正确，表单即将提交！');
    form.submit(); // 恢复默认提交，或者执行自定义提交
  } else {
    // 验证失败，提示错误信息
    alert(errorMsg);
  }
});

• 代码里用了trim()去除输入值前后的空格，避免用户不小心输入空格导致验证失败，如果你不需要这个逻辑，可以直接去掉。
• 错误提示用了alert，你也可以改成把错误信息显示在页面上（比如在每个输入框下方添加错误提示元素），用户体验会更好。
• 如果需要实时验证（比如用户输入时就提示格式是否正确），可以给输入框添加input事件，调用同样的正则验证逻辑即可。

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