HTML输入:要求URL以特定文件类型结束

Question

如何创建URL输入表单要求输入都是有效的URL,并以特定的文件类型结束.

例如,这是我的输入:

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

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

这可以通过HTML或JavaScript来实现,如果是这样,怎么样？

谢谢!

Answer 1

你真的不需要这里的Javascript,你可以使用你的pattern属性input(我刚刚添加了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)">