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

Question

我有一个形式如下所示，其中我希望用户输入在输入框中的URL从开始的http：//或HTTPS：//与一个周期为之后存在子域。如果用户不这样做，它应该说“请匹配请求的格式”。

这是我尝试过的。以下代码仅来自 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 -->

我想要的模式是：

1. https://example.com
   
2. http://example.com
   
3. https://www.example.com
   
4. http://www.example.com
   

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

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

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

问题陈述：

我想知道我应该对上面 A 行的模式进行哪些更改才能满足我的要求。

Answer 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]* )?

Answer 2

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

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

你可以看到它在这里工作