html - 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，在后两种情况下，用户在上述四个url中输入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]* )?