如何验证带有图像的 html 表单？答案

【问题标题】：How can I validate a html form with images?如何验证带有图像的 html 表单？
【发布时间】：2021-10-11 03:20:22
【问题描述】：

我尝试为输入字段着色并且成功了，但是当我尝试对图像进行着色时，浏览器不显示它。

用颜色验证（ok）

    input:required:invalid,
    input:focus:invalid
    {
      background-color:#ffb9b9;
    }

    input:required:valid
    {
      background-color:#adf3c9 ;
    }

我用图像试过这个，但它不起作用：

input:required:invalid,
input:focus:invalid
{
 background-image: url(/images/form_validation.png);
 background-position: right bottom;
 background-repeat: no-repeat;
}

input:required:valid
{
 background-image: url(/images/form_validation.png);
 background-position: right top;
 background-repeat: no-repeat;
}

【问题讨论】：

它应该没有问题。你检查过图片的位置吗？
@idfurw 是的，我检查了几次位置，它是正确的。浏览器不返回任何位置错误
我认为你应该在 DevTools Network 面板中找到 404 错误或类似的东西。

标签： javascript html css forms

【解决方案1】：

它应该工作。我猜图片路径不正确

这是一个最小的例子。（我使用的是 svg，但它应该适用于任何图像）

input:required:invalid,
input:focus:invalid
{
  /* background-color:#ffb9b9; */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='red' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
}

input:required:valid
{
  /* background-color:#adf3c9  */;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='green' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
}

<label for="email">Email</label>
<input type="email" id="email" value="example@example.com" required>
<hr>
<label for="confirm-email">Confirm Email</label>
<input type="email" id="confirm-email" required>

【讨论】：