Question

我有一个通过AJAX提交的HTML表单。因此，其中一个领域是：

<input type="url">

默认情况下，Chrome会要求此字段的值采用以下格式：

http://example.com

当我使用bootstrap时，我可以看到以下输入字段：watch this screenshot。

我希望用户输入不带HTTP/HTTPS前缀的网址，但在这种情况下，Chrome会认为它不是有效的网址。

解决方案可能是什么？如何让浏览器认为URL字符串不需要http前缀？

P.S。我使用type="url"以便更轻松地从Android / iOS设备输入页面地址。

Answer 1

已编辑：

在这种情况下，没有太多选择。你基本上有两个选择。不要使用你已经说过你需要使用的type =“url”。或者不要使用此方法验证它：

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

如果您绝对需要验证它，您可以编写自定义验证脚本。或者使用像JQuery Validate这样的东西。

Answer 2

这不是浏览器的问题。这是HTML5输入类型的验证。您可以实施两种解决方案。你可以使用

<input type="url" novalidate="novalidate" />

第二个选项是使用JavaScript将http：//添加到onsubmit字段（如果不存在）。我一直在尝试使用type="URL" onsubmit，但HTML5验证在JavaScript之前启动。您最好的选择，如果您想保留该类型将是由onkeyup执行的脚本：http://jsfiddle.net/gLN6X/1/（发布在https://stackoverflow.com/a/17947355/3869056）

如果您可以取消没有默认验证的类型，可以使用以下内容：http://jsfiddle.net/u958xwr5/1/

<html>
 <head>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script>
   $(document).ready(function() {
    $('#urlForm').submit(function() {
     var url = $('#address');
     if(url.val().match(/^http:\/\//) == null) {
      url.val("http://" + url.val());
     }
    });
   });
  </script>
 </head>
 <body>
  <form id="urlForm">
   <input id="address" type="text" />
   <button type="submit">Submit</button>
  </form>
 </body>
</html>

JSFiddle还有一点额外的内容，表明在做出更正后，它将提交正确的信息。

Answer 3

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

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

Answer 4

按definition，<input type="url">表示用于编辑单个绝对网址的控件。绝对URL包含协议部分;它不是一个可以省略的“前缀”。浏览器是否具有使用默认协议部分（如http://）为用户输入添加前缀的方法是另一个问题，并且由浏览器供应商自行决定。

有些人可能会考虑使用<input type="url" value="http://">中的预填充部分，但这有几个问题。这意味着设置一个无效的初始值，这是令人困惑的。这也使用户更难以使用自然方法进行复制和粘贴。

结论是，如果您想要一个URL作为用户的输入，您应该期望它们提供完整的绝对URL。

Answer 5

According to the OP，问题已通过在pattern上使用HTML5 <input>属性和相应的正则表达式来解决，如下所示：

<input type="url" pattern="^[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$">

我想补充一点，这不一定是最好的解决方案。很难找到适合每个人的确切正则表达式。如果您必须使用此类明确验证，我建议您倾听用户的意见。反馈，并在必要时改变正则表达式。

就个人而言，我没有对URL输入进行太多验证，这样用户就可以自由地使用任何域名而不仅仅是好的域名。 example.com。此外，网址也可以采用IP地址的形式，例如http://127.0.0.1/或其中没有点，例如http://localhost/。我发现允许用户在文本框中输入的内容更容易，显然，如果将值存储在数据库中，则可以根据需要转义该值。

作为一个结束语，我想指出一个事实，即你不应该依赖用户的能力。为什么？好吧，尽管http://在那个输入面前，懒人（包括我）可能只是粘贴他们 Ctrl C ＆＃39; d从浏览器的地址栏中忘记从一开始就删除该协议，希望该网站会为了方便起见自动执行该协议。在创建输入验证时，您还应该考虑到这一点，因为它可能会让一些只是将有效网址粘贴到您的输入中的人放弃，并告诉他们这是错误的。

让Chrome不要求＆＃39; http：//＆＃39;在输入中

5 个答案: