笙亿网络策划

JavaScript 怎么验证 URL 有效性？

约 6 分钟读完 2 阅
文章导读
Previous Quiz Next 在本章中，我们将学习如何在 JavaScript 中验证 URL。在了解如何验证 URL 之前，让我们先了解什么是 URL。
📋 目录
  1. 壹 什么是 URL？
  2. 贰 在 JavaScript 中验证 URL
  3. 叁 使用 Regular Expression
  4. 肆 使用 URL() Constructor
A A

JavaScript - 验证 URL

Previous
Quiz
Next

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

什么是 URL？

URL（Uniform Resource Locator，统一资源定位符）用于标识互联网上的网页、图像和视频。URL 是网站地址，用于传输文件、发送电子邮件等诸多用途。

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

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

在 JavaScript 中验证 URL

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

验证 URL 的规则

以下是验证 URL 的规则：

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

使用 Regular Expression

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

Syntax

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

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

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

Example

在以下示例中，我们使用正则表达式来验证 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.example.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() Constructor

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

Syntax

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

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

前两种语法创建新的 URL，可以带或不带 base。第三种语法用于检查 URL 协议的有效性。

Example

在此程序中，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.example.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。我们可以根据需求选择使用其中任何一种。