在没有验证插件的情况下使用 jQuery 验证 url？答案

【问题标题】：Validating url with jQuery without the validate-plugin?在没有验证插件的情况下使用 jQuery 验证 url？
【发布时间】：2011-02-12 23:13:42
【问题描述】：

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

【问题讨论】：

标签： jquery url validation

【解决方案1】：

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

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

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

&lt;pre id="output"&gt;&lt;/pre&gt;

这处理 unicode 等，所以有点冗长。来源是the validation plugin itself。一些注意事项：它可能是你想要的，但它并不严格正确。通常，如果您想接受 http://w 和 http://localserver 之类的内容，则需要选择稍微不同的正则表达式，这些内容在 Intranet 环境中有效，但在大多数 Web 表单中通常不允许。在某种程度上，这个正则表达式更安全，因为在这种情况下它需要FQDN。类似地，其他示例（例如自定义协议）在这里被拒绝，但它们是有效的，并且适用于当今使用的许多东西。如果你问用户“你的主页是什么？”但在某种形式中……您可能还是想排除这些。

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

【讨论】：

工作得很好。也很简单。如果您可以扩展答案以显示自动添加 http:// 的选项，会喜欢它吗？
此外，它还接受“derp://www.google.com”作为有效网址。
@user1063287 这些是有效的 URL，我可以拥有一个名为 w 的服务器。只有主机名不是有效的 URL。
@jnovack 这是一个有效的 URL。 URL 不仅限于 http 和 https 协议。任何自定义协议都是有效的。这就是 Steam 链接和手机上应用程序之间的链接之类的工作方式。
我不同意技术性，这是我的信息的初衷（对不起，我不清楚）。 'derp://' 是一个 URI，而不是 URL。

【解决方案2】：

非常感谢 Meo 和 Nick，我把你的两个答案放在一起，效果很好。

if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($("#url").val())){
    alert("valid URL");
} else {
    alert("invalid URL");
}

【讨论】：

【解决方案3】：

如果您确定您的受众正在使用 HTML5，您可以使用type="url" 来验证文本字符串。您还可以动态创建输入元素，设置类型并测试变量是否为有效 URL。

以下内容来自https://www.raymondcamden.com/2016/10/19/using-html-form-validation-in-pure-javascript的博文

var elm;
function isValidURL(u){
  if(!elm){
    elm = document.createElement('input');
    elm.setAttribute('type', 'url');
  }
  elm.value = u;
  return elm.validity.valid;
}

console.log(isValidURL('http://www.google.com/'));
console.log(isValidURL('//google.com'));
console.log(isValidURL('google.com'));

【讨论】：

【解决方案4】：

var url = $('input.surl').val();
var url_validate = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
if(!url_validate.test(url)){
   alert('error');
}
else{
   alert('success');
}

【讨论】：

你应该在定义url_validate变量之前使用var关键字
不客气?

【解决方案5】：

是的，使用正则表达式：

/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ix

【讨论】：

【解决方案6】：

代码：

var re = /^(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;
re.test('http://www.goole.in');

【讨论】：

一些解释会改善你的答案。另外，问题是如何验证存储在 variable 中的 URL。

【解决方案7】：

您想要验证您的网址：

请在此函数中传递 URL，然后这将为您提供 true 或 false。

查看功能：

<script>
function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
    return regexp.test(s);
}

isUrl(yourURL);
</script>

【讨论】：