एचटीएमएल इनपुट: विशिष्ट फ़ाइल प्रकार

में समाप्त होने के लिए यूआरएल की आवश्यकता है मैं यूआरएल इनपुट फॉर्म कैसे बना सकता हूं इनपुट को एक वैध यूआरएल दोनों की आवश्यकता होती है, और एक विशिष्ट फाइल टाइप में समाप्त होती है।एचटीएमएल इनपुट: विशिष्ट फ़ाइल प्रकार

उदाहरण के लिए, यह मेरा इनपुट है:

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

आप देख सकते हैं, यह URL प्रकार है, जो यह एक वैध करने के लिए http प्रतिबंधित करता है उपयोग कर रहा है: // डोमेन, लेकिन मैं चाहते हैं केवल इनपुट .png, .jpg, और .gif फ़ाइलों को स्वीकार करने के लिए इनपुट फ़ील्ड।

क्या यह एचटीएमएल या जावास्क्रिप्ट के माध्यम से हासिल किया जा सकता है, और यदि हां, तो कैसे?

धन्यवाद!

स्रोत

2016-11-18 Carter Roeser

तो क्या इनपुट आप की जरूरत है? यूआरएल या छवि? –

@CommercialSuicide इसे http://domain.com/image.png जैसे एक छवि लिंक होने की आवश्यकता है, इसलिए इसे एक यूआरएल इनपुट के रूप में रहने की जरूरत है, लेकिन केवल छवि लिंक स्वीकार करें। –

किसी भी जावास्क्रिप्ट सत्यापन विधि को एक सभ्य स्क्रिप्टकिडी द्वारा आसानी से अक्षम/ओवरराइड किया जा सकता है। गैर-दुर्भावनापूर्ण उपयोगकर्ताओं के लिए एक सहायक के रूप में जावास्क्रिप्ट सत्यापन के संबंध में (दुर्भावनापूर्ण उपयोगकर्ताओं को छोड़ने के तरीके के रूप में, आप सामान्य त्रुटियों/सीमाओं के बारे में उन्हें बताने के दौरान सर्वर पर कॉल की संख्या कम करते हैं)। आप केवल उन सर्वर-साइड को संभाल सकते हैं। –

आप वास्तव में यहाँ जावास्क्रिप्ट की जरूरत नहीं है, तो आप अपने input (सिर्फ उदाहरण के लिए मैं जोड़ लिया है सीएसएस) के लिए pattern विशेषता का उपयोग कर सकते हैं:

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/ मदद कर सकता है। क्वांटिफायर कैप्चर जावास्क्रिप्ट REGEX में कैप्चर किए बिना। क्रैक करने के लिए यह एक कठिन अखरोट है .http: //www.rexegg.com/regex-quantifier-capture.html। मुझे लगता है कि regex को अंत में \। (Jpg | png | gif) के साथ सरलीकृत किया जा सकता है और डबल // गलत लगता है केवल 1 आवश्यक है? – JGFMK

आप इसे रेगेक्स का उपयोग करके प्राप्त कर सकते हैं, यदि उपयोगकर्ता ने जावास्क्रिप्ट को अक्षम कर दिया है तो आप इस सर्वर की तरफ भी देखना चाहेंगे।

जावास्क्रिप्ट

$("#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"); 
    } 
});

एचटीएमएल

<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

एचटीएमएल इनपुट: विशिष्ट फ़ाइल प्रकार

उत्तर

संबंधित मुद्दे