javascript - HTML 输入 : Require URL to end in specific filetype

Question

如何使 URL 输入表单要求输入既是有效的 URL，又以特定的文件类型结尾。

例如，这是我的输入:

<input name="bg" placeholder="https://website.com/image" type="url">

如您所见，它使用 URL 类型，将其限制为有效的 http://域，但我希望输入字段只接受 .png、.jpg 和 .gif 文件。

能否通过 html 或 javascript 实现，如果可以，如何实现？

谢谢!

Answer 1

你在这里真的不需要 Javascript，你可以为你的 input 使用 pattern 属性(我已经添加了 CSS 只是为了举例):

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}

<input name="bg" placeholder="https://website.com/image" type="url" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.jpg|.png|.gif)">