Nhập HTML: Yêu cầu URL để kết thúc theo loại tệp cụ thể

Question

Làm cách nào để tạo biểu mẫu Nhập URL yêu cầu đầu vào là cả URL hợp lệ và kết thúc bằng một loại tệp cụ thể.

Ví dụ, đây là đầu vào của tôi:

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

Như bạn thấy, Nó được sử dụng nhập URL, trong đó hạn chế nó vào một http hợp lệ: // domain, nhưng tôi muốn các trường nhập để chỉ chấp nhận các tệp .png, .jpg và .gif.

Điều này có thể đạt được thông qua html hoặc javascript và nếu có, làm cách nào?

Cảm ơn!

Answer 1

Bạn không thực sự cần javascript đây, bạn có thể sử dụng pattern thuộc tính cho (CSS tôi đã thêm vào chỉ là ví dụ) input của bạn:

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

Bạn có thể đạt được điều này bằng cách sử dụng regex, bạn cũng sẽ muốn kiểm tra phía máy chủ này trong trường hợp người dùng đã tắt 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

Vui lòng xem qua mã bên dưới, bạn sẽ nhận được url hình ảnh hợp lệ hoặc không hợp lệ bằng cách làm mờ hộp văn bản.

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>