如何使用正则表达式在JavaScript中验证URL

Question

如何使用正则表达式在JavaScript中验证URL

javascripturlvalidation

6

我想要验证一个文本框，其中包含一些URL值，例如博客地址或网站地址如何在js中验证此文本框

- anirudha gupta

4个回答

2

对格式进行基本的正则表达式测试。然后使用XMLHttpRequest ping URL以确保它存在。以下是使用jQuery的示例...

var url = $("#txtUserWebSite").val();
var reg = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([,-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/; 

if(!reg.test(url)) {
  alert("Invalid URL!");
  return false;
}

$.get(url, function(dat, stat) {
  if(stat == "success")
    alert("Valid URL!");
  else
    alert("Invalid URL!");
})

- Josh Stodola

1

var regExpUrl = new RegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$");

var inputArrs = [
 "http://190.190.1.190:8080",
 "https://190.190.1.190:8080",
 "http://190.190.1.190:8080/",
 "http://190.190.1.190:8080/xampp/",
 "http://190.190.1.190:8080/testproject",
 "http://190.190.1.190:8080/testproject/admin/index.php",
 "http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
 "http://190.190.1.190:8080/phpmyadmin",
 "http://www.google.com.au",
 "https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
 "http://google.com.au",
 "https://google.com.au",
 "www.google.com.au",
 "google.com.au",
 "http://www.google.com.au",
 "test",
 "!@#!@#!@#",
 "123",
 "210.110",
 "y.y.y.y",
 "255.0.0.y",
 "666.10.10.20",
 "4444.11.11.11",
 "33.3333.33.3",
 "190.190.1.190",
 "190.190.1.190",
 "190.190.1.190:80",
 "190.190.1.190:8080",
 "190.190.1.190:",
 
];

inputArrs.forEach(function(input) {
 if(regExpUrl.test(input)) {
  res = "URL/IP Valid";
 } else {
  res = "Invalid URL/IP";
 }
 prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

<div id="response"></div>

<script>

var regExpUrl = new RegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$");

var inputArrs = [
 "http://190.190.1.190:8080",
 "https://190.190.1.190:8080",
 "http://190.190.1.190:8080/",
 "http://190.190.1.190:8080/xampp/",
 "http://190.190.1.190:8080/testproject",
 "http://190.190.1.190:8080/testproject/admin/index.php",
 "http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
 "http://190.190.1.190:8080/phpmyadmin",
 "http://www.google.com.au",
 "https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
 "http://google.com.au",
 "https://google.com.au",
 "www.google.com.au",
 "google.com.au",
 "http://www.google.com.au",
 "test",
 "!@#!@#!@#",
 "123",
 "210.110",
 "y.y.y.y",
 "255.0.0.y",
 "666.10.10.20",
 "4444.11.11.11",
 "33.3333.33.3",
 "190.190.1.190",
 "190.190.1.190",
 "190.190.1.190:80",
 "190.190.1.190:8080",
 "190.190.1.190:",
 
];

inputArrs.forEach(function(input) {
 if(regExpUrl.test(input)) {
  res = "URL/IP Valid";
 } else {
  res = "Invalid URL/IP";
 }
 prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

</script>

<div id="response"></div>

- Nanda

-1

请查看正则表达式库，其中包含各种验证的大量正则表达式仓库。他们还提供在线测试工具。

- Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rene Saarsoo · Accepted Answer

我假设您知道如何使用JavaScript获取标签的值。因此，您的问题是编写用于验证URL的特定函数。

首先，我们可以考虑检查URL是否在语法上正确。

以下是一些示例，我们的URL验证器应该明确考虑：

http://www.example.com.
http://www.google.ee/search?q=foo&sourceid=opera&ie=utf-8&oe=utf-8
https://ama-z-on.co.uk/index.html?a=hei%20hoo
ftp://ftp.linux.ee/public/gentoo/i386/portage-snapshot.tar.bz
http://he.wikipedia.org/wiki/שטרגליים#.D7.A8.D7.90.D7.95_.D7.92.D7.9D
sftp://123.1.255.128:80/pub

这只是 URL 可能性的一小部分。HTTP 和 FTP 并不是 URL 可能使用的唯一协议。URL 验证真的很难。

但我们可以假设一个有效的 URL 应该以一些字母开头，然后是 "://"，接着是任何内容。为了测试这种模式，你可以使用一个正则表达式，在 JavaScript 中它看起来像这样：

function validateUrl(url) {
  return /^[a-z]+:\/\//i.test(url);
}

正则表达式是一个庞大的话题，建议您自行学习，这里简单解释一下：

/ - 正则表达式的开始
^ - 匹配字符串的开头
[a-z] - 匹配 a, b, c, ..., x, y, 或 z 中的任意一个字符。
+ - 表示前面的模式可以重复一次或多次。
: - 匹配冒号本身。
\/ - 匹配正斜杠 /（如果没有反斜杠，JavaScript 会认为它是正则表达式的结尾）。
/ - 正则表达式的结尾。
i - 这是一个修饰符，使正则表达式对大小写不敏感。
.test(url) - 调用正则表达式对象的 test 方法，并将 url 参数传递给它。当参数与正则表达式匹配时，它返回 true，否则返回 false。

此外，您可能希望允许输入没有 http:// 部分的 URL - 这意味着您确实需要验证其后面的域名或 IP 地址或其他内容。

我猜你现在可能有些困惑，但这是故意的。您真的不应自己编写 JavaScript 来进行 URL 验证，因为很难做到完全正确。相反，您应该使用库函数，这是经过许多专家测试和确认正确的。

也许您正在使用的 JavaScript 框架已经有了一个适合这项工作的好工具。如果是这样，请使用它。不幸的是，我无法为 URL 验证建议任何特定的库。

另外，您可能还希望考虑ping该URL，如Josh Stodola所建议的那样，以检查它是否真的存在。不过，如果URL引用的资源是10GB文件，则Josh建议的特定方式可能存在问题 :)