JavaScript - 验证 URL

在本章中，我们将学习如何在 JavaScript 中验证 URL。在了解如何验证 URL 之前，我们先来了解一下什么是 URL。

什么是 URL?

URL，即统一资源定位符，用于标识互联网上的网页、图片和视频。URL 是用于传输文件、发送电子邮件等操作的网站地址。

URL 由协议、域名等组成。URL 指示浏览器如何获取数据以及从哪里获取数据。

我们在锚标签或按钮中使用 URL 来导航到另一个位置。在使用 URL 之前，我们必须验证其有效性。

在 JavaScript 中验证 URL

在 JavaScript 中验证 URL 有多种方法。让我们了解一下验证 URL 的规则:

验证 URL 的规则

以下是验证 URL 的规则:

• URL 必须以 http://、https:// 或 www 开头。
• URL 必须包含域名。
• URL 必须包含顶级域名，例如 .com、.org、.net 等。
• URL 不得包含任何空格。

使用正则表达式

正则表达式在验证 URL 时非常有用。正则表达式描述了一种字符模式。我们使用这些模式来匹配一些文本。

语法

以下是用于验证 URL 的正则表达式语法:

string.match(regExp);
var pattern = new RegExp(regExp);
pattern.test(string);

第一个语法匹配正则表达式。第二个语法测试 URL 模式。

示例

在下面的示例中，我们使用正则表达式来验证 URL。

<!DOCTYPE html>
<html>
<head>
<title>Validate URLs in JavaScript</title>
</head>
<body>
<h2>Validate URLs using Regular Expression</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
var url = "https://www.cainiaomax.com";
var pattern = new RegExp("^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$");
if (pattern.test(url)) {
   output.innerHTML = "URL is valid";
} else {
   output.innerHTML = "URL is not valid";
}
</script>
</body>
</html>

使用 URL() 构造函数

URL() 构造函数返回一个新创建的 URL 对象。如果基础 URL 或生成的 URL 无效，构造函数会抛出 TypeError。

语法

以下是使用 URL() 构造函数的语法:

var url = new URL(urlStr);
new URL(url, base);
return url.protocol === 'http:' || url.protocol === 'https:';

前两种语法创建一个新的 URL，可以包含或不包含基础 URL。第二种语法用于检查 URL 协议的有效性。

示例

在此程序中，URL 方法验证 URL，并在 URL 无效的情况下返回类型错误。

<!DOCTYPE html>
<html>
<head>
   <title>Validate URLs in JavaScript</title>
</head>
<body>
<h2>Validate URLs using URL() Constructor</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
try {
   var url = new URL("https://www.cainiaomax.com");
   if (url.protocol === 'http:' || url.protocol === 'https:') {
      output.innerHTML = "URL is valid";
   } else {
      output.innerHTML = "URL is not valid";
   }
} catch (e) {
   output.innerHTML = "URL is not valid";
}
</script>
</body>
</html>

本章介绍了两种验证 URL 的方法。第一种方法建议使用正则表达式匹配或模式测试。第二种方法是内置的 URL 方法。URL 方法比较简单，因为可以避免使用正则表达式时测试用例缺失的情况。

这两种方法都适用于验证 URL。我们可以根据需求使用其中任何一种方法。