Azure AD B2C标准SUSI用户流布局BUG：正则表达式无效

问题根源 #

1. 微软提供的原生pattern正则表达式存在两处问题：
   • HTML属性用单引号包裹，正则内的'字符导致属性提前截断，浏览器解析到不完整的正则规则
   • 正则字符类中的特殊字符未正确处理，触发"正则表达式的类中存在无效字符"报错
2. 原生验证逻辑异常，导致已输入内容时仍错误显示必填提示

解决步骤 #

1. 移除原生pattern属性 #

找到对应输入框元素（如邮箱/密码字段），删除自带的pattern属性，避免浏览器原生验证触发错误。

2. 自定义JS验证逻辑 #

编写修正后的正则表达式，通过JS实现验证，确保错误提示仅在输入无效时触发：

// 修正后的邮箱验证正则（适配JS语法，处理特殊字符）
const validEmailRegex = /^[a-zA-Z0-9!#$%&'^_`{}~-]+(?:\.[a-zA-Z0-9!#$%&'^_`{}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])$/;

// 获取目标输入框（根据实际DOM结构调整选择器）
const targetInput = document.querySelector('input[type="email"]');
// 获取错误提示元素（假设错误标签紧跟输入框）
const errorLabel = targetInput.nextElementSibling;

// 输入框失焦时触发验证
targetInput.addEventListener('blur', () => {
  const isInputValid = validEmailRegex.test(targetInput.value);
  if (!isInputValid) {
    targetInput.classList.add('error');
    errorLabel.style.display = 'block';
    errorLabel.textContent = '请输入有效的邮箱地址';
  } else {
    targetInput.classList.remove('error');
    errorLabel.style.display = 'none';
  }
});

// 表单提交时验证，阻止无效提交
document.querySelector('form').addEventListener('submit', (e) => {
  if (!validEmailRegex.test(targetInput.value)) {
    e.preventDefault();
    targetInput.classList.add('error');
    errorLabel.style.display = 'block';
    errorLabel.textContent = '请输入有效的邮箱地址';
  }
});

3. 适配密码字段（若问题出在密码） #

如果是密码字段的正则问题，替换为符合密码规则的正则即可，示例：

// 示例密码正则：至少8位，包含字母和数字
const validPasswordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d!#$%&'^_`{}~-]{8,}$/;

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