HTML輸入：需要URL中特定文件類型

結束我怎樣才能讓一個URL輸入方式需要輸入既有效的URL，並終止於特定的文件類型。HTML輸入：需要URL中特定文件類型

例如，這是我輸入：

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

正如你所看到的，它使用URL類型，它限制了有效的HTTP：//域名，但我想輸入字段只接受.png，.jpg和.gif文件。

可以通過這個HTML或JavaScript來實現，如果是這樣，怎麼樣？

謝謝！

來源

2016-11-18 Carter Roeser

那麼你需要輸入什麼？網址或圖片？ –

@CommercialSuicide它需要像http://domain.com/image.png圖片鏈接，因此它需要保持一個URL輸入，但只接受圖像鏈接。 –

任何JavaScript驗證方法可以很容易地被一個體面的scriptkiddy禁用/覆蓋。將JavaScript驗證作爲非惡意用戶的助手（可以減少對服務器的調用次數，同時讓他們知道常見錯誤/限制），而不是排除惡意用戶的方式。你只能處理那些服務器端。 –

你並不真的需要使用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)">

來源

2016-11-18 23:57:31

我不認爲這個正則表達式是正確的。它正確驗證了「http：// hello.com.jpg」。不知道如何糾正它，但：/ – TheChetan

任何人想要刺傷它。 https://jex.im/regulex/ http://regexr.com/可能會有所幫助。沒有量詞捕獲在JavaScript REGEX中。這是一個棘手的問題.http：//www.rexegg.com/regex-quantifier-capture.html。我認爲正則表達式可以用\。（jpg | png | gif）來簡化，並且// //看起來不對，只有1需要正確嗎？ – JGFMK

你可以做到這一點使用正則表達式，你也想檢查的情況下，用戶已禁用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">

來源

2016-11-18 23:47:05

請通過下面的代碼，你會被模糊文本得到有效或無效的圖像網址。

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>

來源

2017-07-06 11:29:14

'https：//。jpg'是有效的。你可能想再看一遍。 – TheChetan

HTML輸入：需要URL中特定文件類型

回答

相關問題