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

yizd12fk 于 2023-11-20 发布在 HTML5

关注(0)|答案(7)|浏览(206)

我有一个表单，如下图所示，我希望用户在输入框中输入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 -->

字符串
我想要的模式是：

https://example.com
http://example.com的
https://www.example.com的
http://www.example.com的
前两种情况下，用户在输入框中不输入www，后两种情况下，用户输入www以上四个网址中，子域后至少有一个句点，且从http或https开始。
总之，我希望当用户在输入框中输入url时，满足以下2个要求。
1.它应该从http或https开始。
1.它应该有至少一个时期后，子域。

问题陈述：

我想知道我应该在上面的A行模式中做什么修改，以满足我的要求。

regex

来源：https://stackoverflow.com/questions/58070841/pattern-in-html5-input-type-url-validation

7条答案

按热度按时间

o4tp2gmn1#

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

型

赞(0）回复(0）举报 2023-11-20

xn1cxnb42#

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

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

字符串
你可以看到它的工作here

赞(0）回复(0）举报 2023-11-20

mxg2im7a3#

pattern="^(http(s)?:\/\/)+[\w\-\._~:\/?#[\]@!\$&'\(\)\*\+,;=.]+$"

字符串
标准：
1.从http或https启动
2.它可以由子域组成
实施例：

赞(0）回复(0）举报 2023-11-20

yws3nbqq4#

我相信这可能是我们想要的模式？

<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-z 0 -9-_]+）**二级域名（子域名（如果存在）之后和.com之前的部分），考虑字母数字和连字符或下划线
**（.com）**顶级域（本例中为.com特定域）

你也可以检查here模式。

赞(0）回复(0）举报 2023-11-20

siotufzp5#

如果我了解你的问题，我想这应该行得通...

<!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”属性可以有一个输入字段的正则表达式。

赞(0）回复(0）举报 2023-11-20

uemypmqf6#

我认为你可以在那里使用正则表达式
仅举例来说，

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

字符串

赞(0）回复(0）举报 2023-11-20

a1o7rhls7#

逃脱：

/^(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

型

赞(0）回复(0）举报 2023-11-20

我来回答

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

7条答案

相关问题

热门标签

最新问答