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

Validate URLs in jQuery or Javascript before sending

本文关键字:Javascript 中的 URL jQuery 验证      更新时间:2024-04-04

我有一个基本的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-'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;
    }

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

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)
}

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

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