为何HTML中正则表达式^re\-\d{6}$无法正常生效？

核心触发逻辑问题 #

HTML5原生表单验证默认只有在表单提交时才会触发，不是输入内容不对就立刻弹提示。如果只是输入错误内容但没点提交按钮，浏览器不会主动弹出错误提示。

必须满足的前提条件 #

• 输入框必须放在<form>标签里面，原生验证依赖表单容器，单独的输入框没法触发验证机制。
• 确认用的是支持HTML5的现代浏览器（老旧浏览器可能不支持原生表单验证）。

正则表达式是没问题的 #

你写的^re\-\d{6}$完全符合需求，能准确匹配re-开头加6位数字的格式（比如re-123456），不需要调整。

测试验证的正确步骤 #

把输入框放进表单里，加个提交按钮，测试流程就对了：

<form>
  <label for="receipt">Receipt number *</label>
  <input name="receipt" id="receipt" 
          placeholder="re-nnnnnn" required="required" 
          pattern="^re\-\d{6}$" />
  <button type="submit">提交</button>
</form>

输入不符合格式的内容（比如re-123），点击提交按钮，浏览器就会弹出原生错误提示了。

可选：实现实时输入验证 #

如果想要输入过程中就提示错误，可以用JS监听输入事件手动触发验证：

const receiptInput = document.getElementById('receipt');
receiptInput.addEventListener('input', function() {
  this.reportValidity();
});

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