html5输入类型url验证中的模式答案

【问题标题】：pattern in html5 input type url validationhtml5输入类型url验证中的模式
【发布时间】：2019-09-23 22:18:52
【问题描述】：

我有一个如下所示的表单，我希望用户从开始在输入框中输入url http:// 或 https:// 与 one 句点出现在子域之后。如果用户不这样做，它应该说“请匹配请求的格式”。

这是我尝试过的。以下代码仅取自 https 而不是 http。

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required>  <!-- Line A -->

我想要的模式是：

前2种情况，用户没有在输入框中输入www，后2种情况用户输入www 在上述四个url中，它在子域之后至少有 一个句点，并且从 http 或 https 开始。

简而言之，我希望用户在输入框中输入url时满足以下2个要求。

应该从 http 或 https 开始。
它应该在子域之后至少有一个句点。

问题陈述：

我想知道我应该对上面 A 行的模式进行哪些更改，以使其符合我的要求。

【问题讨论】：

您使用什么语言来处理您的表单？ php？ CGI/Perl？
我正在使用 php。我认为我们需要在这里进行一些小改动pattern="https://.*"，但我不确定应该是什么。
签出此stackoverflow.com/a/58154804/8138584

标签： html regex validation

【解决方案1】：

可能可以在 http:// 之后使用 url 验证段

<input type="url" 
  name="url"
  id="url"
  placeholder="https://example.com"
  pattern="[Hh][Tt][Tt][Pp][Ss]?:\/\/(?:(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))(?::\d{2,5})?(?:\/[^\s]*)?"
  required>

展开

 [Hh] [Tt] [Tt] [Pp] [Ss]? :\/\/
 (?:
      (?: [a-zA-Z\u00a1-\uffff0-9]+ -? )*
      [a-zA-Z\u00a1-\uffff0-9]+ 
 )
 (?:
      \. 
      (?: [a-zA-Z\u00a1-\uffff0-9]+ -? )*
      [a-zA-Z\u00a1-\uffff0-9]+ 
 )*
 (?:
      \. 
      (?: [a-zA-Z\u00a1-\uffff]{2,} )
 )
 (?: : \d{2,5} )?
 (?: \/ [^\s]* )?

【讨论】：

嗨，我遇到了一个问题。它满足我上面提到的边界条件。 1。它应该从 http 或 https 开始。 2。它应该在子域之后至少有一个句点。感谢那。当我在 url facebook.com 之后输入 / 时，它要求我计算所请求的格式。我想知道您是否可以从模式中删除此验证。我们希望用户在 .com .org .net .gov .in 之后输入 /
例如，当我输入php.net/manual/en/function.date.php时，它在问我请匹配请求的格式。
你在吗？
例如，当我输入 php.net/manual/en/function.date.php 时，它在询问我请匹配请求的格式。基本上 .com .net .gov 用户应该有能力添加 / 在我的情况下，用户肯定输入： 1. http 或 https （它应该从 http 或https) 2. 它应该在子域之后至少有一个句点
@flash - 在末尾添加(?::\d{2,5})?(?:\/[^\s]*)?

【解决方案2】：

我认为下面的模式应该适合你：

http(s?)(:\/\/)((www.)?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.com|.net|.gov|.org|.in)(\/[^\s]*)?

你可以看到它在工作here

【讨论】：

嗨，我遇到了一个问题。它满足我上面提到的边界条件。 1。它应该从 http 或 https 开始。 2。它应该在子域之后至少有一个句点。感谢那。当我在 url facebook.com 之后输入 / 时，它要求我计算所请求的格式。我想知道您是否可以从模式中删除此验证。我们希望用户在 .com .org .net .gov .in 之后输入 /
例如，当我输入 php.net/manual/en/function.date.php 时它在问我 请匹配请求的格式。
你在吗？
例如，当我输入 php.net/manual/en/function.date.php 时，它在询问我请匹配请求的格式。基本上 .com .net .gov 用户应该有能力添加 / 在我的情况下，用户肯定输入： 1. http 或 https （它应该从 http 或https) 2. 它应该在子域之后至少有一个句点
我已经更新了正则表达式，它现在应该符合你的所有条件

【解决方案3】：

pattern="^(http(s)?:\/\/)+[\w\-\._~:\/?#[\]@!\$&'\(\)\*\+,;=.]+$"

标准：
1.从http或https开始
2. 可以由子域组成

示例：
1.https://www.example.com
2.http://www.example.com
3.https://example.com
4.http://example.com
5.http://blog.example.com

【讨论】：

【解决方案4】：

我相信这可能是我们想要的模式？

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url" placeholder="https://example.com" pattern="http(s?)(:\/\/)((www.)?)([a-zA-z0-9\-_]+)(.com)" size="30" required>
</body>

模式，解释：
http
(s?) 后跟协议上的可选 s
(:\/\/) 协议和子域之间的 ://
((www.)?) 可选www. 子域
([a-zA-z0-9\-_]+) 二级域（子域之后的部分（如果存在）以及在 .com 之前）考虑带有连字符或下划线的字母数字
(.com)顶级域（在此示例中为 .com 特定）

你也可以查看here的模式。

【讨论】：

【解决方案5】：

如果我理解你的问题，我认为这应该可以工作......

<!DOCTYPE html>
<html>
<head>
    <title>Url</title>
</head>
<body><form action="">
    <input type="url" pattern="https?://.+" required oninvalid="this.setCustomValidity('Please match the requested format')" >
    <input type="submit">
    </form>
</body>
</html>

“模式”属性可以为您的输入字段提供正则表达式。

【讨论】：

@mickmackusa 谢谢指出，我刚刚编辑了它:)

【解决方案6】：

我认为你可以在那里使用正则表达式
只是一个例子，

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url" placeholder="https://example.com" 
 pattern="^(http|https)://\.(.*)" size="30" required>

【讨论】：

它能满足我上面的所有要求吗？