在没有验证插件的情况下使用 jQuery 验证 url? [英] Validating url with jQuery without the validate-plugin?

问题描述

我需要使用 jQuery 验证 variable 中的 url，但不能使用 validate-plugin.有没有简单的方法可以做到这一点?

I need to validate a url in variable with jQuery, but can't use validate-plugin. Is there a simple way to do this?

推荐答案

您可以使用与验证插件相同的正则表达式(2015 年 5 月 23 日更新为最新的正则表达式):

You can use the same regex that the validation plugin does (updated to latest regex on May 23rd, 2015):

function isUrlValid(url) {
    return /^(https?|s?ftp)://(((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:)*@)?(((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])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?)(: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})|[!$&'()*+,;=]|:|@)|[uE000-uF8FF]|/|?)*)?(#((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-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 + "
";
}

.valid { color: green; }
.invalid { color: red; }

<pre id="output"></pre>

这会处理 unicode 等，所以有点冗长.来源是验证插件本身.一些注意事项:它可能是您想要的，但并不严格正确.通常，如果您想接受诸如 http://w 和 http://localserver 之类的东西，它们在 Intranet 环境中有效，但在 Intranet 环境中无效，则需要选择稍微不同的正则表达式通常允许在大多数 Web 表单中使用.在某种程度上，这个正则表达式更安全，因为在这种情况下它需要 FQDN.类似地，其他示例(如自定义协议)在此处被拒绝，但它们是有效的并且适用于当今使用的许多事物.如果你问用户你的主页是什么?"不过以某种形式...您可能无论如何都想排除这些.

This handles unicode, etc so it's a bit verbose. Source is the validation plugin itself. A few notes: it is probably what you want, but it is not strictly correct. Typically you need to choose a slightly different regex if you want to accept things like http://w and http://localserver which are valid in an intranet environment but not typically allowed in most web forms. In a way, this regex is safer because it requires a FQDN in such cases. Similarly other examples like custom protocols are rejected here, but are valid and do work for many things used today. If you're asking users "what's your homepage?" in a form though...you likely want to exclude these anyway.

稍后发现此问题的任何人:请随时使用我包含的代码段测试其他测试用例，如果您认为应该提及新的常见用例，请更新答案.我用最新的正则表达式以这种格式重新编写了答案，以更好地为社区服务.

Anyone finding this later: please feel free to test additional test cases with the snippet I included and update the answer if you feel a new common case should be mentioned. I re-wrote the answer with the latest regex and in this format to better serve the community.

这篇关于在没有验证插件的情况下使用 jQuery 验证 url?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！