HTML-Eingabe: URL muss in einem bestimmten Dateityp enden

Wie kann ich ein URL-Eingabeformular erstellen, bei dem die Eingabe sowohl eine gültige URL als auch einen bestimmten Dateityp sein muss.HTML-Eingabe: URL muss in einem bestimmten Dateityp enden

Zum Beispiel ist dies meine Eingabe:

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

Wie Sie sehen können, ist es die URL-Typ verwendet, die es auf einen gültigen http beschränkt: // Domäne, aber ich möchte die Eingabefeld, um nur PNG-, JPG- und GIF-Dateien zu akzeptieren.

Kann dies durch HTML oder Javascript erreicht werden, und wenn ja, wie?

Danke!

Quelle

2016-11-18 Carter Roeser

Was Eingabe benötigen Sie? Url oder Bild? –

@CommercialSuicide Es muss ein Bildlink wie http://domain.com/image.png sein, also muss es als URL-Eingabe bleiben, aber nur Bildlinks akzeptieren. –

Jede JavaScript-Validierungsmethode kann einfach durch ein anständiges Skriptkiddy deaktiviert/außer Kraft gesetzt werden. Betrachten Sie die JavaScript-Überprüfung als Hilfsprogramm für nicht bösartige Benutzer (Sie reduzieren die Anzahl der Aufrufe an den Server, während Sie sie über häufige Fehler/Einschränkungen informieren), nicht als eine Möglichkeit, böswillige Benutzer auszuschließen. Sie können nur diese Server-Seite behandeln. –

Es ist nicht wirklich hier müssen Javascript, Sie pattern Attribut für Ihre input (i CSS haben gerade zum Beispiel) verwenden können:

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)">

Quelle

2016-11-18 23:57:31

Ich glaube nicht, dass diese Regex richtig ist. Es validiert 'http: // hello.com.jpg' korrekt. Nicht sicher, wie man es jedoch korrigiert:/ – TheChetan

Für jeden, der es auf sich nehmen will. https://jex.im/regulex/ http://regexr.com/ kann helfen. Ohne Quantifier Captures in JavaScript REGEXs. Es ist eine harte Nuss zu knacken. Http://www.rexegg.com/regex-quantifier-capture.html. Ich denke, die Regex kann am Ende mit \. (Jpg | png | gif) vereinfacht werden und das Doppel // sieht falsch aus nur 1 benötigt, oder? – JGFMK

Sie können dies mit Regex erreichen, Sie sollten auch diese Server-Seite überprüfen, falls der Benutzer Javascript deaktiviert hat.

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

Quelle

2016-11-18 23:47:05

Bitte gehen Sie durch den folgenden Code erhalten Sie die gültige oder ungültige Bild URL durch Unschärfe der Textbox.

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>

Quelle

2017-07-06 11:29:14

'https: //. Jpg' ist gültig. Vielleicht möchten Sie es sich noch einmal ansehen. – TheChetan

HTML-Eingabe: URL muss in einem bestimmten Dateityp enden

Antwort

Verwandte Themen