表单输入匹配指定编码时如何显示错误信息？求实现示例

当然可以实现！不管是用正则表达式配合原生JavaScript，还是借助jQuery，都能轻松满足你的需求。下面给你两种具体的实现方案，你可以根据项目的技术栈来选择~

方案一：原生JavaScript + 正则表达式 #

我们可以用正则表达式精准匹配那些禁止输入的编码，然后通过监听输入事件或表单提交事件来触发验证，并显示错误信息。

首先，先给页面添加一个错误提示元素（用来展示错误信息），再配合你的输入框：

<input type="text" name="prodcode" class="form-control"/>
<div id="error-message" style="color: red; display: none; margin-top: 8px;">该编码禁止输入，请更换其他编码</div>

然后编写JavaScript验证逻辑：

// 获取输入框和错误提示元素
const prodCodeInput = document.querySelector('input[name="prodcode"]');
const errorMsg = document.getElementById('error-message');

// 定义禁止的编码正则：精确匹配指定的编码
const forbiddenCodes = /^(JS01|PR03|HY79|FG36|VF42|HF23)$/;

// 实时监听输入，即时反馈验证结果
prodCodeInput.addEventListener('input', function() {
  const inputValue = this.value.trim(); // 去除前后空格，避免空格绕过验证
  
  if (forbiddenCodes.test(inputValue)) {
    errorMsg.style.display = 'block';
    this.classList.add('is-invalid'); // 给输入框添加错误样式（需要配合你的CSS）
  } else {
    errorMsg.style.display = 'none';
    this.classList.remove('is-invalid');
  }
});

// 表单提交时再次验证，防止用户绕过前端验证
document.querySelector('form').addEventListener('submit', function(e) {
  const inputValue = prodCodeInput.value.trim();
  if (forbiddenCodes.test(inputValue)) {
    e.preventDefault(); // 阻止表单提交
    errorMsg.style.display = 'block';
    prodCodeInput.classList.add('is-invalid');
    alert('请输入合法的编码'); // 可选：增强提示，也可以去掉
  }
});

说明： #

• 正则表达式/^(JS01|PR03|HY79|FG36|VF42|HF23)$/中的^和$确保输入内容完全匹配指定编码，避免出现包含这些编码的其他字符串被误判。
• trim()方法用来处理用户输入前后的空格，防止用户通过输入空格绕过验证。
• 实时监听input事件能让用户在输入过程中即时看到反馈，提升体验；表单提交时的二次验证则增加了安全性。

方案二：jQuery实现 #

如果你的项目已经引入了jQuery，下面的写法会更简洁：

同样先准备HTML结构：

<input type="text" name="prodcode" class="form-control"/>
<div id="error-message" style="color: red; display: none; margin-top: 8px;">该编码禁止输入，请更换其他编码</div>

然后编写jQuery代码：

$(function() {
  // 定义禁止的编码正则
  const forbiddenCodes = /^(JS01|PR03|HY79|FG36|VF42|HF23)$/;
  
  // 实时监听输入事件
  $('input[name="prodcode"]').on('input', function() {
    const inputVal = $(this).val().trim();
    if (forbiddenCodes.test(inputVal)) {
      $('#error-message').show();
      $(this).addClass('is-invalid');
    } else {
      $('#error-message').hide();
      $(this).removeClass('is-invalid');
    }
  });
  
  // 表单提交验证
  $('form').on('submit', function(e) {
    const inputVal = $('input[name="prodcode"]').val().trim();
    if (forbiddenCodes.test(inputVal)) {
      e.preventDefault();
      $('#error-message').show();
      $('input[name="prodcode"]').addClass('is-invalid');
      alert('请输入合法的编码');
    }
  });
});

说明： #

• jQuery的on()方法用来绑定事件，show()和hide()方法简化了错误提示元素的显示/隐藏操作。
• 逻辑和原生方案一致，只是写法更简洁，适合已经使用jQuery的项目。

提示：如果你的页面中有多个表单，记得给目标表单添加一个唯一的id或class，这样在选择表单时能精准定位，避免影响其他表单的提交逻辑。

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