Validierung von URLs mit jQuery ohne das validate-plugin?

Question

Ich muss eine URL in Variable mit jQuery validieren, kann aber nicht validate-plugin verwenden. Gibt es einen einfachen Weg, dies zu tun?

Answer 1

können Sie die gleiche Regex verwenden, die die Validierung Plugin ist (auf die neueste regex aktualisiert am 23. Mai 2015):

function isUrlValid(url) { 
 
    return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url); 
 
} 
 

 
var testCases = [ 
 
    "http://www.google.com/", 
 
    "https://www.google.com/", 
 
    "ftp://www.google.com/", 
 
    "http://google.com/", 
 
    "http://google.com", 
 
    "https://google.com", 
 
    "http://www.google.com:80/", 
 
    "https://www.google.com:443/", 
 
    "http://127.0.0.1/", 
 
    "http://127.0.0.1:9200/", 
 
    "www.site.com", 
 
    "x:", 
 
    "http://", 
 
    "javascript:alert('xss')", 
 
    "http://w", 
 
    "http:", 
 
    "derp://www.google.com", 
 
    "http://localserver" 
 
], div = document.getElementById("output"); 
 

 
for(var i=0; i < testCases.length; i++) { 
 
    var test = testCases[i]; 
 
    div.innerHTML += (isUrlValid(test) ? "<span class='valid'>valid</span>: " : "<span class='invalid'>invalid</span>: ") + "" + test + "\n"; 
 
}

.valid { color: green; } 
 
.invalid { color: red; }

<pre id="output"></pre>

Diese Griffe Unicode, etc, so dass es die ausführliche etwas ist . Die Quelle ist the validation plugin itself. Ein paar Hinweise: Es ist wahrscheinlich, was Sie wollen, aber es ist nicht streng richtig. Normalerweise müssen Sie eine etwas andere Regex wählen, wenn Sie Dinge wie http://w und http://localserver akzeptieren wollen, die in einer Intranetumgebung gültig sind, aber in den meisten Webformularen nicht erlaubt sind. In gewisser Weise ist diese Regex sicherer, weil sie in solchen Fällen eine FQDN erfordert. Ähnlich andere Beispiele wie benutzerdefinierte Protokolle werden hier abgelehnt, sind aber gültig und funktionieren für viele Dinge, die heute verwendet werden. Wenn Sie Nutzer fragen "Was ist Ihre Homepage?" in einer Form aber ... möchten Sie diese wahrscheinlich sowieso ausschließen.

Wer findet das später: Bitte testen Sie weitere Testfälle mit dem enthaltenen Snippet und aktualisieren Sie die Antwort, wenn Sie der Meinung sind, dass ein neuer häufiger Fall erwähnt werden sollte. Ich schrieb die Antwort mit der neuesten Regex und in diesem Format neu, um der Community besser zu dienen.

Answer 2

ja mit einem regex:

/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ix 

Answer 3

Vielen Dank Meo und Nick, lege ich beide Ihre Antworten zusammen und es funktioniert einfach toll.

if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($("#url").val())){ 
    alert("valid URL"); 
} else { 
    alert("invalid URL"); 
} 

Answer 4

Möchten Sie Ihre URL überprüfen:

Bitte geben Sie die URL in dieser Funktion, dann wird dies Sie wahr OR falsch geben.

Siehe Funktion:

<script> 
function isUrl(s) { 
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/ 
    return regexp.test(s); 
} 

isUrl(yourURL); 
</script> 

Answer 5

var url = $('input.surl').val(); 
url_validate = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/; 
if(!url_validate.test(url)){ 
    alert('error'); 
} 
else{ 
    alert('success'); 
} 

Answer 6

Code:

var re = /^(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/; 
re.test('http://www.goole.in'); 

Answer 7

Wenn Sie sicher sind, dass Ihr Publikum HTML5 verwenden, können Sie type="url" verwenden, um die Textzeichenfolge zu validieren. Sie könnten auch dynamisch ein Eingabeelement erstellen, den Typ festlegen und testen, ob die Variable eine gültige URL ist oder nicht.

Das Folgende ist aus https://www.raymondcamden.com/2016/10/19/using-html-form-validation-in-pure-javascript auf einem Blog-Eintrag basiert

var elm; 
 
function isValidURL(u){ 
 
    if(!elm){ 
 
    elm = document.createElement('input'); 
 
    elm.setAttribute('type', 'url'); 
 
    } 
 
    elm.value = u; 
 
    return elm.validity.valid; 
 
} 
 

 
console.log(isValidURL('http://www.google.com/')); 
 
console.log(isValidURL('//google.com')); 
 
console.log(isValidURL('google.com'));