Question

HTML5提供自动URL验证： -

<form>
   <input type="url" name="someUrl">
</form>

这将无法验证没有协议前缀的网址 - 例如<{1}}将在stackoverflow.com通过时失败。

如果还没有协议，如何自动将http：//添加到网址？

我可以添加一个onblur事件处理程序，但在验证事件之前有更好的方法吗？

Answer 1

此代码不应该中断用户的操作，而应该等到用户离开表单字段以检查＆＃34; http＆＃34;的输入文本。所以使用＆＃34; onblur＆＃34;而不是＆＃34; onkeyup＆＃34;。

然后，看看字符串是否包含＆＃34; http＆＃34;使用indexOf。如果没有，它将返回-1，这是假的。

＆＃13;

function checkURL (abc) {
  var string = abc.value;
  if (!~string.indexOf("http")) {
    string = "http://" + string;
  }
  abc.value = string;
  return abc
}

＆＃13;

<form>
  <input type="url" name="someUrl" onblur="checkURL(this)" />
  <input type="text"/>
</form>

＆＃13;

Fiddle

Answer 2

如果您不希望浏览器验证（可能因浏览器而异）您可以添加以下novalidate属性

<input type="url" name="someUrl"  formnovalidate="formnovalidate">

其他您可能希望通过简单添加一旦有人开始输入或者甚至将http：//已经输入到页面上的框中来更加透明地为http：//添加< / p>

（归功于编辑，他正确地指出，无效条款适用于表格，而上述内容覆盖了这一点，借记给债权人进行编辑;）

Answer 3

您可以尝试通过提供初始值和占位符来强制用户输入有效的网址。

＆＃13;

<label for="some-url">Some url:</label>
<input id="some-url" type="url" placeholder="http://example.com" value="http://">

＆＃13;

Answer 4

你们可能想要使用的是：

$(function(){
         $('input[type="url"]').on('blur', function(){
           var string = $(this).val();
           if (!string.match(/^https?:/) && string.length) {
             string = "http://" + string;
              $(this).val(string)
           }
         });
});

这是在文档就绪

上运行的

检查值是否为空或在开头缺少http

在模糊

的情况下将其插入

感谢@ 1j01

Answer 5

你可以使用

HTML：

<form>
   <input type="url" name="someUrl" onkeyup="checkUR(this)" >
</form>

SCRIPT：

function checkUR(abc){
    string = abc.value
    if(!(/^http:\/\//.test(string))){
        string = "http://" + string;
    }
    abc.value=string
}

example

我希望它会有所帮助

Answer 6

如果网址中没有http或https，则会在提交之前添加网址。它也不区分大小写（最后是i）。我还使用onchange代替其他事件来说明用户按下回车键并以此方式提交表单。

SCRIPT：

function checkURL(o) {
    if (!/^https?:\/\//i.test(o.value)) {
        o.value = "http://" + o.value;
    }
}

替代脚本:(始终改为＆＃34; http：//＆＃34;）

function checkURL(o) {
    o.value = o.value.replace(/^(https?:\/\/)?/i, "http://");
}

HTML：

<form>
   <input type="url" name="someUrl" onchange="checkURL(this)" >
</form>

Answer 7

它将帮助用户在不打扰 http 的情况下烦恼。只需将此 JavaScript 代码添加到包含 type="url" <input> 元素的网页中，一切都会自动运行。

// Run a callback function after DOM is fully loaded
function domReady(callback) {
    if (document.readyState != "loading") {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}

// Prepend https to url input field value if already not prepended by http or https
domReady(() => {
    const urlInput = document.querySelectorAll('input[type="url"]');
    for(i = 0; i < urlInput.length; i++) {
        urlInput[i].addEventListener('change', function(){
            let urlValue = this.value;
            // If http or https isn't prepended as case insensitive characters and if the input field has any value
            if (!urlValue.match(/^https?:/i) && urlValue.length) {
                urlValue = "https://" + urlValue;
                this.value = urlValue;
            }
        });
    }
});

优势

前置 https:// 如果 http 或 https 尚未前置在输入字段值中
即使有 https:// 或 http 不在开头，也要在 https 前面
用户离开输入框后自动修改值
如果输入字段没有值，则不添加 https://
以不区分大小写的方式工作
自动处理所有 url 类型的输入字段，无需修改 HTML 输入字段元素

限制

在以任何方案开头的有效网址前添加 https:// 除了 http 或 https 之外，例如 ftp 和 tel 会导致这些有效网址无效

PS：如果您还想将 http 更改为 https，请将这个 else if 语句附加到前一个 if 语句的最后一个代码。

else if (urlValue.match(/^http:/i)) {
    urlValue = urlValue.replace(/^http:/i, "https:");
    this.value = urlValue;
}

Answer 8

我上传到GitHub的AngularJS指令自动添加http://。至少对用户有用。

https://github.com/rupperyes/MyAngularDirectives/

Answer 9

单线：

<input type="url" onblur="if (!~this.value.indexOf('http')) this.value = 'https://' + this.value">

Answer 10

使用 URL 类会更好。

    function validateUrl(value) {
        try {
            const currentUrl = new URL(value);
            const { protocol } = currentUrl;

            if (protocol !== 'http:' && protocol !== 'https:') {
                currentUrl.protocol = 'http:';
                return currentUrl.toString();
            }
        } catch(e) {
            return `http://${value}`;
        }
    }

这里的优点是您首先检查任何协议。如果用户输入错误的协议（例如 htts:），它将被 http: 替换。上面的答案都将添加一个新协议，这将导致类似 http://htts: 的结果。如果没有协议，它只会在 catch 块中添加 http://。

使用HTML5 url输入验证假设url以http：//开头

10 个答案: