HTML Input Type URL – 如果不包含HTTP，显示”请输入一个URL”

admin
行业动态
2024-04-15
3433

要实现这个功能，我们可以使用HTML和JavaScript，我们需要创建一个HTML表单，包含一个输入框和一个提交按钮，我们需要编写JavaScript代码来检查输入的URL是否包含"http://"或"https://"，如果不包含，我们将显示一条错误消息。

HTML Input Type URL – 如果不包含HTTP，显示”请输入一个URL” 第1张

以下是实现这个功能的详细步骤：

1、创建一个HTML表单，包含一个输入框（用于输入URL）和一个提交按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>URL Input</title>
</head>
<body>
    <form id="urlForm">
        <label for="urlInput">请输入一个URL:</label>
        <input type="text" id="urlInput" name="urlInput">
        <button type="submit">提交</button>
    </form>
    <p id="errorMessage" ></p>
    <script src="script.js"></script>
</body>
</html>

2、创建一个名为script.js的JavaScript文件，并编写以下代码：

document.getElementById('urlForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    const urlInput = document.getElementById('urlInput');
    const errorMessage = document.getElementById('errorMessage');
    if (!urlInput.value.startsWith('http://') && !urlInput.value.startsWith('https://')) {
        errorMessage.textContent = '请输入一个URL';
    } else {
        errorMessage.textContent = '';
        // 在这里处理有效的URL，例如发送到服务器等
    }
});

这段代码首先为表单添加了一个提交事件监听器，当用户点击提交按钮时，它会阻止表单的默认提交行为，并检查输入框中的值是否以"http://"或"https://"开头，如果不是，它将在页面上显示一条错误消息，如果是有效的URL，您可以在此处处理它，例如将其发送到服务器。