input[type="file"]图片验证blur时结果反复切换问题求助

你遇到的合法输入触发blur时反复返回true/false的问题，根源在正则表达式的全局匹配标志g。当使用g标志时，RegExp对象会维护lastIndex属性记录下一次匹配的起始位置：第一次调用test()返回true后，lastIndex会被设为字符串末尾；第二次调用时从末尾开始匹配，找不到符合内容就返回false，同时lastIndex重置为0；第三次调用又会返回true，如此循环。

另外你的场景里m（多行匹配）标志完全没必要，文件名不会是多行文本，可直接移除。

方案1：修正正则表达式 #

移除g和m标志，同时优化正则逻辑，确保完整匹配文件后缀，还能避免空文件误判：

// Image Validator
const ImageExp = /\.(jpe?g|png)$/i; // i标志忽略大小写，适配不同后缀写法

function ValidaImagem(x) {
  // 先判断是否选中文件
  if (!x.value) {
    console.log(false);
    x.style.background = "#F00";
    return false;
  }
  if (ImageExp.test(x.value)) {
    console.log(true);
    x.style.background = "#0F0";
    return true;
  } else {
    console.log(false);
    x.style.background = "#F00";
    return false;
  }
}

// 事件监听简化，用this替代重复DOM查询
document.getElementById("Photo").addEventListener("blur", function() {
  ValidaImagem(this);
})
document.getElementById("Submit-btn").addEventListener("click", function() {
  ValidaImagem(document.getElementById("Photo"))
})

方案2：用字符串方法替代正则（更直观） #

如果只是验证后缀，用endsWith方法更易懂，完全避开正则的坑：

function ValidaImagem(x) {
  if (!x.value) {
    console.log(false);
    x.style.background = "#F00";
    return false;
  }
  const allowedExts = ['.jpg', '.jpeg', '.png'];
  const lowerFileName = x.value.toLowerCase();
  const isValid = allowedExts.some(ext => lowerFileName.endsWith(ext));

  if (isValid) {
    console.log(true);
    x.style.background = "#0F0";
    return true;
  } else {
    console.log(false);
    x.style.background = "#F00";
    return false;
  }
}

// 事件监听部分同上
document.getElementById("Photo").addEventListener("blur", function() {
  ValidaImagem(this);
})
document.getElementById("Submit-btn").addEventListener("click", function() {
  ValidaImagem(document.getElementById("Photo"))
})

• 用CSS类控制样式，比如定义.valid { background: #0F0; }和.invalid { background: #F00; }，通过classList.add/remove切换，比直接修改style更易维护。
• 可以结合input的change事件提前验证，不用等blur触发，提升用户体验。

内容的提问来源于stack exchange，提问作者Gabriel Sousa A. Rodrigues