Проверка URL-адреса с помощью jQuery без validate-plugin?

Question

Мне нужно проверить URL-адрес в переменной с помощью jQuery, но нельзя использовать validate-plugin. Есть ли простой способ сделать это?

Answer 1

Вы можете использовать то же регулярное выражение, что плагин валидации делает (обновлен до последнего регулярного выражения 23 мая, 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>

Это обрабатывает Юникод, и т.д., так что это немного многословное , Источник - the validation plugin itself. Несколько примечаний: это возможно, что вы хотите, но это не строго правильно. Как правило, вам нужно выбрать несколько другое регулярное выражение, если вы хотите принять такие вещи, как http://w и http://localserver, которые действительны в среде интрасети, но обычно не разрешены в большинстве веб-форм. В некотором роде это регулярное выражение безопаснее, потому что в таких случаях требуется FQDN. Подобным же образом другие примеры, такие как пользовательские протоколы, отклонены здесь, но являются действительными и работают для многих вещей, используемых сегодня. Если вы спрашиваете пользователей: «Какая у вас домашняя страница?» в форме, хотя ... вы, вероятно, захотите их исключить.

Любой, кто нашел это позже, не стесняйтесь протестировать дополнительные тестовые примеры с включенным фрагментом и обновить ответ, если вы чувствуете, что следует упомянуть новый общий случай. Я повторно написал ответ с последним регулярным выражением и в этом формате, чтобы лучше обслуживать сообщество.

Answer 2

да с регулярным выражением:

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

Answer 3

Большое спасибо Мео и Ник, я положил обе свои ответы вместе, и это работает просто замечательно.

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

вы хотите, чтобы подтвердить свой URL:

Пожалуйста, передать URL в этой функции, то это даст вам истинное ИЛИ ложные.

См Функция:

<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

Код:

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

Answer 7

Если вы уверены, что ваша аудитория использует HTML5, вы можете использовать type="url" для проверки текстовой строки. Вы также можете динамически создать элемент ввода, установить тип и проверить, является ли переменная действительным URL-адресом или нет.

Следующая основана на блоге от 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'));