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

Question

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

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

如果文本区域只接受一个 URL，这很容易解决，但文本区域需要接受多个 URL，并用换行符分隔。因此，例如，我需要验证这一点：

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

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

由于我对 JS 不是很熟悉，因此我没有尝试过有关此问题的任何尝试，也没有找到任何东西，因为我想不出一个相关的搜索词，所以我在这里寻求帮助.

我们将不胜感激有关如何解决此问题的任何形式的帮助。

---

更新

根据下面的 cmets 和答案，我想出了以下 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;
    }

Answer 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 本身。

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