HTML DOM Input URL 对象

HTML DOM Input URL 对象

HTML DOM Input URL 对象表示一个URL输入域的状态和属性。该对象允许您访问输入域中输入的URL，并允许您设置该输入域的值和属性。

访问输入框中的URL

若要访问URL输入框中输入的值，您可以使用value属性：

var urlInput = document.getElementById("my-url-input");
var url = urlInput.value;

您可以使用上述代码来访问值，并将其存储在url变量中。

设置URL输入框的值

若要设置URL输入框中的值，您可以使用value属性设置该值。例如：

var urlInput = document.getElementById("my-url-input");
urlInput.value = "https://www.example.com";

使用上述代码会将URL输入框中的值设置为"https://www.example.com"。

验证输入的URL

HTML DOM Input URL对象提供了一些属性和方法来验证HTML页面中的URL输入。

validity属性

validity属性提供了与输入域的验证状态有关的信息。在URL输入中，它提供了：

• valid: 返回true，如果输入的内容是有效的URL，否则返回false。
• typeMismatch: 返回true，如果输入的内容不是有效的URL，否则返回false。

例如，在以下代码中：

<input type="url" id="my-url-input" required>

我们使用type=“url"属性来指示这是一个URL输入域，并将required属性用于强制要求输入域是必填的。这将导致自动启用验证，并将validity属性设置为URL输入域标记的要求。

接下来，您可以使用以下代码来检查输入内容是否有效：

var urlInput = document.getElementById("my-url-input");
if (urlInput.validity.valid) {
  // input is a valid URL
} else {
  // input is not a valid URL
}

由此我们可以确定输入框中的URL是否有效。

checkValidity()方法

“checkValidity()”方法用于验证url输入标记是否有效，并向开发者提供反馈信息。例如：

var urlInput = document.getElementById("my-url-input");
if (urlInput.checkValidity()) {
  // input is valid
} else {
  // input is invalid
}

总结

记录和验证URL输入域的值是很有用的，尤其是在应用中需要访问许多基于URL的资源的情况下。使用HTML DOM Input URL对象，您可以访问输入域中输入的URL，并验证其有效性。