HTML5输入类型URL验证中的模式

Question

HTML5输入类型URL验证中的模式

10

我有一个表单，如下所示，我希望用户在输入框中输入以 http:// 或 https:// 开头的 URL，其中子域后应该有一个句点。如果用户没有这样做，应该提示“请匹配请求的格式”。

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

我需要的匹配模式如下：

在前两种情况中，用户在输入框中没有键入www，而在后两种情况中，用户键入了www。在上述四个URL中，至少有一个子域之后有一个句点，并以http或https开头。

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

它应该以http或https开头。
它应该至少在子域后有一个句点。

问题陈述： 我想知道我应该在 A行上进行哪些更改，以便符合我的要求。

- flash

您在处理表单时使用的是哪种编程语言？PHP？CGI/Perl？ - elbrant

我正在使用PHP。我认为我们需要在这里进行一些小的更改 pattern="https://.*"，但我不确定应该是什么。 - flash

1

请查看此链接https://dev59.com/orbna4cB1Zd3GeqPb39R#58154804 - Naveen Jain

7个回答

6

我认为下面的模式适合您使用：

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

您可以在这里看到它的工作原理。

- Arslan Talib

你好，我遇到了一个问题。它涉及到我上面提到的边界条件。1. 它应该以http或https开头。2. 子域名后至少应该有一个句点。谢谢你。当我在url https://facebook.com/后输入 / 时，它要求我匹配请求的格式。我想知道是否可以从模式中删除此验证。我们希望用户在 .com .org .net .gov .in 后输入 **/**。 - flash

当我输入php.net/manual/en/function.date.php时，它会提示我“请匹配请求的格式”。 - flash

当我输入php.net/manual/en/function.date.php时，它会提示我“请匹配请求的格式”。基本上，在.com、.net、.gov之后，用户应该有能力添加**/**。在我的情况下，用户一定会输入：1. http或https（它应该以http或https开头） 2. 子域名后至少有一个句点。 - flash

我已经更新了正则表达式，现在应该可以匹配你所有的条件了。 - Arslan Talib

4

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

- Naveen Jain

1

我相信这可能是所需的模式？

<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
协议和子域名之间的://
可选的www.子域名
第二级域名（如果存在子域名，则在子域名之后，在.com之前），考虑字母数字、连字符或下划线
顶级域名（在此示例中为.com）
您也可以在此处检查该模式。

- Paul T.

1

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

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

"pattern"属性可以为您的输入字段提供正则表达式。

- Ashish Neupane

@mickmackusa 谢谢您指出，我刚刚编辑了它 :) - Ashish Neupane

0

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

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

- munna ss

它能够满足我上述的所有要求吗？ - flash

0

逃脱了：

/^(https?:\/\/)?(w{3}\.)?[\w\d]*\.([a-zA-Z]*\.)?([a-zA-Z]*)?$/

纯正的正则表达式：

^(https?:\/\/)?(wwww{1}\.)?[\w\d]*\.([a-zA-Z]*\.)?([a-zA-Z]*)?$

对我来说很有效。在https://regex101.com/上测试了这些情况：

http://test.com
https://www.test.com
http://www.test.com
https://test.com
www.test.com

- JP Navarro V.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user12097764 · Accepted Answer

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