图像验证函数测试文件输入的value属性。但是，输入类型文件的值将给予文件名，而不是内容或文件类型。因此，正则表达式是根据文件名而不是文件类型来测试的。如果您始终信任用户正确标记他们的文件类型，这可能会起作用，但它不是万无一失的，也不会验证文件的实际内容。您可以通过更改Regex来匹配文件的MIME类型来解决此问题，如下所示：

const ImageExp = new RegExp(/image\/(jpe?g|png)/i)

使用此方法，您可以首先捕获提交的内容，然后根据file.type值进行匹配和测试。它将您的验证程序更改为：

function ValidaImagem(inputElement) {
   let file = inputElement.files[0]; 

   if (file && ImageExp.test(file.type)) {
      console.log(true);
      inputElement.style.background = "#0F0";
      return true;
   } else {
      console.log(false);
      inputElement.style.background = "#F00";
      return false;
   }
}

HTML和CSS中的其他内容都可以保持不变。
您可以在这里了解更多关于MIME类型的信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
请注意这一特定部分："Warning: Browsers use the MIME type, not the file extension, to determine how to process a URL, so it's important that web servers send the correct MIME type in the response's Content-Type header. If this is not correctly configured, browsers are likely to misinterpret the contents of files, sites will not work correctly, and downloaded files may be mishandled"

如果目标只是在选择了图像的情况下提交表单，那么只需像之前一样设置accept属性和required属性就足够了。

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('We have an image!');
});

input:valid {
  background-color: orange;
}

<form name="form01">
  <input type="file" accept="image/*" name="photo" required />
  <button type="submit">Submit</button>
</form>