javascript - title html

Entrada HTML: Requerir que la URL termine en un tipo de archivo específico

Question

¿Cómo puedo hacer que un formulario de entrada de URL requiera que la entrada sea una URL válida y que termine en un tipo de archivo específico?

Por ejemplo, esta es mi entrada:

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

Como puede ver, está usando el tipo de URL, que lo restringe a un dominio http: // válido, pero me gustaría que el campo de entrada solo acepte archivos .png, .jpg y .gif.

¿Se puede lograr esto a través de html o javascript, y si es así, cómo?

¡Gracias!

Answer 1

No necesitas Javascript aquí, puedes usar el atributo de pattern para tu input (por ejemplo, he agregado 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)">

Answer 2

Puede lograr esto usando expresiones regulares, también querría verificar este lado del servidor en caso de que el usuario haya deshabilitado javascript.

Javascript

$("#imageUrl").change(function() {
var t = $("#imageUrl").val()
var expression = https?:////(www/.)?[-a-zA-Z0-9@:%._/+~#=]{2,256}/.[a-z]{2,4}/b([-a-zA-Z0-9@:%_/+.~#?&//=]*)(.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">

Answer 3

Vaya al siguiente código para obtener la url de imagen válida o no válida al difuminar el cuadro de texto.

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>