шаблон в проверке URL типа ввода HTML5

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 В приведенных выше четырех URL-адресах, по крайней мере, один период после субдомена и начинается с http или https .

Короче говоря, я хочу после 2 требований встречается, когда пользователь вводит url в поле ввода .

1. Он должен начинаться с http или https.
2. Он должен иметь хотя бы одинпериод после субдомена.

Постановка проблемы:

Мне интересно, какие изменения я должен внести в шаблон выше в строке A, чтобы он соответствовал моимтребования.

Answer 1

Возможно использовать сегменты проверки URL после http://

<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,}))"
  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,} )
 )

Answer 2

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

Answer 3

Я полагаю, что это может быть желаемым шаблоном?

<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, в данном примере)

Вы можете проверить шаблон здесь тоже.

Answer 4

Я думаю, что шаблон ниже должен работать для вас:

http(s?)(:\/\/)((www.)?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.com)

Вы можете видеть, как он работает здесь

Answer 5

Я думаю, вы можете использовать регулярное выражение там
просто пример,

<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>