HTML怎么用正则表达式校验重复输入的文本-html教程-PHP中文网

pattern 属性无法校验“两次输入一致”，因其仅对当前字段做正则匹配，不感知其他字段值；跨字段比对需用 javascript 监听 blur 或 submit 事件，配合 trim() 和 setcustomvalidity() 实现，并须后端兜底校验。

html怎么用正则表达式校验重复输入的文本

pattern 属性无法校验重复输入的文本——它只做单字段格式匹配，不感知其他字段值。

为什么 pattern 不能用于“两次输入一致”类校验

HTML 的 pattern 是纯字符串正则匹配，运行时只拿到当前 <input> 的 value，完全不知道另一个输入框里填了什么。所谓“密码与确认密码一致”，本质是跨字段比对，属于状态依赖逻辑，浏览器原生不支持。

pattern 只在 submit 时触发，且仅作用于本字段
即使把两个字段都写成 pattern=".*"，也毫无意义——它不读取另一字段的值
试图用 JS 动态改 pattern 值（比如拼接另一个字段内容）会失败：浏览器只在初始解析或 setCustomValidity() 时检查 pattern，不会监听 value 变化重跑正则

必须用 JavaScript 监听并手动比对

核心思路是：监听一个字段的 input 或 blur 事件，读取两个字段的 value，做字符串全等判断，并用 setCustomValidity() 控制校验状态。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

推荐监听 blur：避免输入中途频繁报错，用户体验更稳
必须同时监听两个字段的 blur，否则切换焦点后状态不同步
比对前建议先 .trim()，防止空格干扰
调用 setCustomValidity('') 清除错误，否则表单会一直卡住提交

示例代码：

const pwd = document.querySelector('input[name="password"]');
const pwd2 = document.querySelector('input[name="confirm_password"]');

function checkMatch() {
  if (pwd.value.trim() !== pwd2.value.trim()) {
    pwd2.setCustomValidity('两次输入的密码不一致');
  } else {
    pwd2.setCustomValidity('');
  }
}

pwd2.addEventListener('blur', checkMatch);
pwd.addEventListener('blur', checkMatch);