HTML5 输入 URL Edge 和 Safari 验证

Question

我试图确保用户在

内输入正确的 URL

<input type='url' >

但是已经测试了一些错误的测试条目，这些条目似乎仅在 Edge (40.15063.0.0) 和 Safari (5.1.7) 上通过 URL。

例如：

http://

https://

这些测试会在 Chrome 和 Firefox 中提示 "please enter a url"。 如何改进 input type='url' 以在 Edge 和 Safari 中不接受此类条目？

您可以在此处测试类型 url： https://www.wufoo.com/html5/types/3-url.html

Answer 1

使用模式属性捕获测试用例： http:// https://

<form action="/action_page.php">
Homepage: <input type="url" name="website" pattern="https?://.+" 
title="Include http://">
<input type="submit">
</form>

如 W3schools 文档的最后一个示例所示： https://www.w3schools.com/tags/att_input_pattern.asp