能否动态设置表单Confirm Email输入的pattern属性匹配Email输入值？

可行性说明 #

动态设置pattern属性完全可行，浏览器会实时读取该属性进行表单验证，只要在用户输入时同步更新即可。

核心注意点：转义正则特殊字符 #

邮箱地址里可能包含.、+、@这类正则元字符，直接当作正则字符串会导致匹配逻辑出错，必须先对这些字符进行转义。

正则转义函数 #

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

原生JavaScript（ES6）实现代码 #

// 获取表单输入元素
const emailInput = document.getElementById('email');
const confirmEmailInput = document.getElementById('confirm-email');

// 定义更新确认框pattern的逻辑
const updateConfirmPattern = () => {
  const emailValue = emailInput.value.trim();
  if (emailValue) {
    // 转义后生成精确匹配的正则，^和$确保完全一致
    const escapedEmail = escapeRegExp(emailValue);
    confirmEmailInput.pattern = `^${escapedEmail}$`;
    // 可选：更新提示文本，明确告知用户匹配要求
    confirmEmailInput.title = `请输入与上方完全一致的邮箱：${emailValue}`;
  } else {
    // 邮箱为空时移除pattern，避免无效验证
    confirmEmailInput.removeAttribute('pattern');
    confirmEmailInput.title = '';
  }
};

// 绑定事件监听
emailInput.addEventListener('keyup', updateConfirmPattern);
emailInput.addEventListener('focusout', updateConfirmPattern);

TypeScript实现代码 #

// 获取DOM元素并添加类型断言
const emailInput = document.getElementById('email') as HTMLInputElement;
const confirmEmailInput = document.getElementById('confirm-email') as HTMLInputElement;

// 正则转义函数
const escapeRegExp = (str: string): string => {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

// 更新确认框pattern的逻辑
const updateConfirmPattern = (): void => {
  const emailValue = emailInput.value.trim();
  if (emailValue) {
    const escapedEmail = escapeRegExp(emailValue);
    confirmEmailInput.pattern = `^${escapedEmail}$`;
    confirmEmailInput.title = `请输入与上方完全一致的邮箱：${emailValue}`;
  } else {
    confirmEmailInput.removeAttribute('pattern');
    confirmEmailInput.title = '';
  }
};

// 绑定事件监听
emailInput.addEventListener('keyup', updateConfirmPattern);
emailInput.addEventListener('focusout', updateConfirmPattern);

补充说明 #

• 使用^和$锚点，确保确认邮箱与输入邮箱完全匹配，避免出现部分匹配的错误情况。
• 同时绑定keyup和focusout事件，覆盖实时输入和粘贴后切换焦点的场景。
• 当邮箱输入框清空时，移除pattern属性，防止确认框被强制要求匹配空字符串。

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