要实现这个功能，我们可以使用HTML和JavaScript，我们需要创建一个HTML表单，包含一个输入框和一个提交按钮，我们需要编写JavaScript代码来检查输入的URL是否包含"http://"或"https://"，如果不包含，我们将显示一条错误消息。
（图片来源网络，侵删）
以下是实现这个功能的详细步骤：
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" style="color: red;"></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，您可以在此处处理它，例如将其发送到服务器。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477139.html
微信扫一扫