2013-12-06 1 views
0

У меня есть базовая текстовая область HTML, которая будет использоваться для вставки в нее URL-адресов. Когда некоторые URL-адреса передаются в текстовую область, они будут отправлены на серверный скрипт для обработки через AJAX. Я буду привязывать весь этот процесс к событию keyUp.Проверять URL-адреса в jQuery или Javascript перед отправкой

Вопрос: Как я узнаю, что я отправляю действительные URL-адреса скрипту с проверкой на стороне клиента? Я не хочу начинать отправлять URL-адреса на PHP-скрипт, не проверяя их сначала в Javascript/jQuery.

Это было бы довольно легко решить из текстовой области, принятой только по одному URL-адресу, но текстовая область должна принимать несколько URL-адресов, разделенных разрывами строк. Так, например, я должен был бы проверить это:

http://someurl.com/something.ex 
https://someurl.com/somethingelse.ext 
I-M-NOT-AN-URL 

Так из сказанного выше, только URL-адреса будут отправлены на сервер и I-M-NOT-AN-URL будут игнорироваться.

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

Любая помощь в решении этой проблемы будет оценена по достоинству.


Update

На основе комментариев и ответ ниже, я придумал следующий Javascript/JQuery. Я не знаю, эффективна ли она, поэтому я поделился ею с вами для обратной связи и помощи. Кажется, я не знаю, как хорошо подготовить логику в JS ... Это хромота с моей стороны.

Во всяком случае здесь я иду:

var char_start = 10; 
    var index  = 0; 
    var urls  = $('textarea.remote-area'); 
    var val_ary  = []; 
    var urls_ary = []; 
    var single_url = ''; 

    urls.keyup(function(){  
     if (urls.val().length >= char_start) 
     {   
      var has_lbrs = /\r|\n/i.test(urls.val()); 
      if (has_lbrs) { 
       val_ary = urls.val().split('\n'); 

       for (var i = 0; i < val_ary.length; i++) 
       { 
        if (!validate_url(val_ary[i])) 
        { 
         continue; 
        } 

        urls_ary[i] = val_ary[i]; 
       } 
      } 
      else 
      { 
       if (validate_url(urls.val())) 
       { 
        single_url = urls.val(); 
       } 
      } 

      if (urls_ary.length > 0) 
      { 
       for (var i = 0; i < urls_ary.length; i++) 
       { 
        $.ajax({ 
         // do AJAX here.        
        }); 
       } 
      } 
      else 
      { 
       $.ajax({ 
        // do AJAX here.         
       });  
      } 
     } 
    }); 

    function validate_url(url) 
    { 
     if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\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])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\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})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([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})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([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)){ 
      return true; 
     } 

     return false; 
    } 
+1

Ответ получен здесь (с использованием Regex) - http://stackoverflow.com/a/8667222/448865 – cpreid

+1

_ «Это было бы довольно легко решить из текстовой области, принятой только по одному URL» _ - Поэтому используйте string '.split()', чтобы отделить введенные значения от разрывов строк, а затем использовать цикл для проверки каждого из элементов в результирующем массиве по одному за раз. Или, если вы проверяли с помощью регулярного выражения, просто расширяйте шаблон, чтобы разрешить повторы. – nnnnnn

+0

@nnnnnn Блестящий! Я не знал, что Javascript имеет аналогичную функцию/метод, эквивалентный «explode()» PHP! – Aborted

ответ

1

JQuery validation plugin использует такой метод, как это:

var anyURL = "http://www.yahoo.com/"; 
if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\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])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\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})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([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})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([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(anyURL))  { 
    /* the URL is valid */ 
} else { 
    /* the URL is invalid) 
} 

Вы можете использовать этот код непосредственно или использовать сам validation plugin.

Обратите внимание: возможно, что плагин развился, и фактический код отличается от других. Тем не менее вышеизложенное должно помочь вам.

+0

Спасибо! Я использовал предоставленный оператор 'if'. – Aborted

Смежные вопросы