在发送之前验证jQuery或Javascript中的URL

Question

我有一个基本的HTML文本区域，它将用于粘贴URL。一旦一些URL被传递到文本区域，这些URL将被发送到服务器端脚本，以便通过AJAX进行处理。我将把整个过程绑定到一个keyUp事件。

问题是：通过客户端检查，我如何知道我正在向脚本发送有效的URL？我不想在没有先在Javascript/jQuery中验证URL的情况下就开始向PHP脚本发送URL。

这将很容易解决只接受一个URL的文本区域，但文本区域需要接受由换行符分隔的多个URL。例如，我需要验证以下内容：

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

因此，从上面来看，只有URL会被发送到服务器，而I-M-NOT-AN-URL会被忽略。

我没有尝试过任何关于这个问题的东西，因为我对JS不太熟悉，也没有找到任何东西，因为可能我找不到相关的搜索词，所以我在这里寻求帮助。

如能就如何解决这一问题提供任何帮助，我们将不胜感激。

---

更新

根据下面的评论和答案，我提出了以下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-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:)*@)?(([(|(v[da-f]{1,}.(([a-z]|d|-|.|_|~)|[!$&'()*+,;=]|:)+))])|((d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]))|(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=])*)(:d*)?)(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*|(/((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)+(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*)?)|((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)+(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*)|((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)){0})(?((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|[uE000-uF8FF]|/|?)*)?(#((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|/|?)*)?$/i.test(url)){
          return true;
        }   
        return false;
    }

Answer 1

jQuery验证插件使用了这样一种方法：

var anyURL = "http://www.yahoo.com/";
if(/^([a-z]([a-z]|d|+|-|.)*):(//(((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:)*@)?(([(|(v[da-f]{1,}.(([a-z]|d|-|.|_|~)|[!$&'()*+,;=]|:)+))])|((d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]))|(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=])*)(:d*)?)(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*|(/((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)+(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*)?)|((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)+(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*)|((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)){0})(?((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|[uE000-uF8FF]|/|?)*)?(#((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|/|?)*)?$/i.test(anyURL))     {
  /* the URL is valid */
} else {
  /* the URL is invalid)
}

您可以直接使用该代码，也可以使用验证插件本身。

请注意：可能是插件已经进化，现在实际的代码不同了。尽管如此，以上内容应该会对您有所帮助。