如何使用 JavaScript 检测 URL 协议 (HTTP/HTTPS)

<div class='input-group'>
  <span class='input-group-addon'><span class='fa fa-chain'></span> 你的网址</span>
  <input type='url' name='longurl' id='longurl' class='form-control' placeholder='请输入域名或网址' oninput='checkProtocol(this)'>
</div>
<script>
function checkProtocol(input) {
  var url = input.value;
  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    input.setCustomValidity('请输入有效的网址，必须加上协议（http:// 或 https://）');
  } else {
    input.setCustomValidity('');
  }
}
</script>
<p>上述代码中，通过给输入框添加 <code>oninput</code> 事件来触发检测函数 <code>checkProtocol</code>。在该函数中，首先获取输入框的值，然后使用 <code>startsWith</code> 方法判断是否以 'http://' 或 'https://' 开头。如果不是，则使用 <code>setCustomValidity</code> 方法设置输入框的自定义验证消息为 '请输入有效的网址，必须加上协议（http:// 或 https://）'；如果是，则清空自定义验证消息。这样，如果用户输入的网址不符合要求，则会显示相应的提示信息。</p>