要实现这个功能,我们可以使用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,您可以在此处处理它,例如将其发送到服务器。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。