web-dev-qa-db-fra.com

Valider l'url avec jQuery sans le plugin de validation?

J'ai besoin de valider une URL dans variable avec jQuery, mais je ne peux pas utiliser validate-plugin. Existe-t-il un moyen simple de procéder?

jqueryurlvalidation
45
Martti Laine

Vous pouvez utiliser la même expression régulière que le plug-in de validation (mise à jour vers la dernière expression régulière le 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>

Cela gère unicode, etc. donc c'est un peu bavard. La source est le plugin de validation lui-même . Quelques notes: c'est probablement ce que vous voulez , mais ce n'est pas strictement correct . En règle générale, vous devez choisir une expression régulière légèrement différente si vous souhaitez accepter des éléments tels que http://w et http://localserver qui sont valides dans un environnement intranet mais qui ne sont généralement pas autorisés dans la plupart des formulaires Web. D'une certaine manière, cette expression régulière est plus sûre car elle nécessite un FQDN dans de tels cas. De même, d'autres exemples tels que les protocoles personnalisés sont rejetés ici, mais sont valides et fonctionnent pour de nombreuses choses utilisées aujourd'hui. Si vous demandez aux utilisateurs "quelle est votre page d'accueil?" sous une forme cependant ... vous voudrez probablement les exclure de toute façon.

Quiconque trouve cela plus tard: n'hésitez pas à tester des cas de test supplémentaires avec l'extrait de code que j'ai inclus et à mettre à jour la réponse si vous pensez qu'un nouveau cas commun devrait être mentionné. J'ai réécrit la réponse avec la dernière expression régulière et dans ce format pour mieux servir la communauté.

129
Nick Craver

Merci beaucoup Meo et Nick, j'ai rassemblé vos deux réponses et cela fonctionne très bien.

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");
}
29
Ersin Demirtas

Si vous êtes sûr que votre audience utilise HTML5, vous pouvez utiliser type="url" pour valider la chaîne de texte. Vous pouvez également créer dynamiquement un élément d'entrée, définir le type et tester si la variable est une URL valide ou non.

Ce qui suit est basé sur un article de blog de https://www.raymondcamden.com/2016/10/19/using-html-form-validation-in-pure-javascript

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'));
11
James Moberg
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');
}
6
Abdo-Host

oui avec un regex:

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

vous souhaitez valider votre URL:

Veuillez passer l'URL dans cette fonction, cela vous donnera vrai OR faux.

Voir fonction:

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

isUrl(yourURL);
</script>
3
Vishnu Sharma

Code:

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