HTML入力：特定のファイルタイプで終了するにはURLを指定する

Question

URL入力フォームを作成するにはどうすればよいですか？入力は有効なURLでなければならず、特定のファイルタイプで終了する必要があります。たとえば、これは私の入力

されています：

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

あなたが見ることができるように、それは有効なHTTPにそれを制限するURLの種類、使用している：//ドメインを、私は希望します.png、.jpg、および.gifファイルのみを受け入れる入力フィールド。

これはhtmlまたはjavascriptで実現できますか？

ありがとうございます！

Answer 1

：

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

正規表現を使用してこれを実現することができます。また、ユーザーが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"); 
    } 
}); 

あなたは本当に（私は例えばCSSを追加した）あなたはinputためpattern属性を使用することができ、ここではJavascriptを必要としないHTML

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

Answer 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>