Ввод HTML: требуется, чтобы URL-адрес заканчивался определенным типом файла

Как я могу создать форму ввода URL, чтобы вход был действительным URL-адресом и заканчивался определенным типом файла.

Например, это мой ввод:

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

Как вы можете видеть, он использует тип URL, который ограничивает его допустимым доменом http://, но я хотел бы, чтобы поле ввода принимало только файлы .png,.jpg и .gif.

Может ли это быть достигнуто с помощью html или javascript, и если да, то как?

Спасибо!

Ответ 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\.)?[[email protected]:%._\+~#=]{2,256}\.[a-z]{2,4}\b([[email protected]:%_\+.~#?&//=]*)(.jpg|.png|.gif)">

Ответ 2

Вы можете добиться этого с помощью регулярного выражения, вы также захотите проверить эту серверную сторону, если пользователь отключил JavaScript.

Javascript

$("#imageUrl").change(function() {
    var t = $("#imageUrl").val()
    var expression = https?:\/\/(www\.)?[[email protected]:%._\+~#=]{2,256}\.[a-z]{2,4}\b([[email protected]:%_\+.~#?&//=]*)(.jpg|.png|.gif);
    var regex = new RegExp(expression);
    if (t.match(regex)) {
        alert("Successful match");
    } else {
        alert("No match");
    }
});

HTML

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

Ответ 3

Пожалуйста, перейдите по приведенному ниже коду, вы получите правильный или недопустимый URL-адрес изображения, размывая текстовое поле.

function TextBoxChange()
{
var textboxValue=$("input[name=bg]").val();
var pattern=/https?:\/\/.*\.(?:png|jpg|gif)/i;
//alert(/https?:\/\/.*\.(?:png|jpg|gif)/i.test(textboxValue));
if(pattern.test(textboxValue))
{
$("#errorMsg").text("valid");
}
else
{
$("#errorMsg").text("invalid");
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="bg" placeholder="https://website.com/image" onblur="TextBoxChange()" type="url" >
<label id="errorMsg"></label>