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

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

本文介绍了html5输入类型url验证中的模式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个表单,如下所示,我希望用户在输入框中输入 URL ,从开始http:// https://,其中期间出现在子域之后.如果用户不这样做,则应说请匹配请求的格式" .

I have a form as shown below in which I want the user to enter the url in the input box starting from http:// or https:// with oneperiod to be present after subdomain. If the user doesn't do so it should say "Please match the requested format".

这是我尝试过的.以下代码仅从https获取,而不从http获取.

This is what I have tried. The following code takes only from https not 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 开始.

In the first 2 cases, user doesn't type www in the input box and in the last 2 cases user types www In the above four urls,it has atleast one period after subdomain and it starts from http or https.

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

In short, I want the following 2 requirements to be met when user enters the url in the input box.

  1. 它应该以http或https开头.
  2. 它应该在子域之后至少有一个周期.

问题陈述:

我想知道我应该对上面的A行中的模式进行哪些更改,以使其满足我的要求.

I am wondering what changes I should make in the pattern above at Line A so that it meets my requirements.

推荐答案

可以在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,}))(?::\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]* )?

这篇关于html5输入类型url验证中的模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 15:31