网页网址输入框校验 - 确保包含协议(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='请输入域名或网址' onchange='checkUrlProtocol()'> 
</div>
<script>
function checkUrlProtocol() {
    var input = document.getElementById('longurl');
    var url = input.value.trim();
    
    if (!url.startsWith('http://') && !url.startsWith('https://')) {
        input.setCustomValidity('请输入包含协议（http或https）的网址');
    } else {
        input.setCustomValidity('');
    }
}
</script>
<p>在上述代码中，<code>onchange='checkUrlProtocol()'</code>将<code>checkUrlProtocol</code>函数绑定到输入框的<code>onchange</code>事件上。当输入框的值发生改变时，将会调用该函数进行判断。</p>
<p><code>checkUrlProtocol</code>函数首先获取输入框的值，并使用<code>trim</code>方法去除前后空格。然后，使用<code>startsWith</code>方法检查该值是否以<code>http://</code>或<code>https://</code>开头。如果不是，则使用<code>setCustomValidity</code>方法设置输入框的自定义验证消息，提示用户输入包含协议的网址。如果是，则清空自定义验证消息。</p>
<p>这样，当用户输入不包含协议的网址时，输入框下方会显示相应的错误提示。</p>