使用 AngularJS 和 HTML 5 验证 URL

Question

大家早上好：

看起来是一个非常常见的问题，但在谷歌搜索了几个小时后我无法弄清楚：如何验证一个 URL，包括 www 没有 http 。

这些是我所做的：

1. 使用输入类型 url：它不接受 www.google.com ；
2. 将输入类型更改为 text 并使用 ng-pattern ：我仍然得到 www.google.com 无效；
3. 更改了不同的正则表达式但仍然无法正常工作。

因此，当我单击提交按钮时，如果表单无效（true 无效，false 有效），我会显示警报。这是 我的 Plunker

谢谢您的帮助

原文由 MarcosF8 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以直接将正则表达式添加到 ng-pattern 属性，而不是将正则表达式绑定到范围。像这样：

 <input type="text" ng-pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/" ng-model="website">

我已经更新了plunkr。请看看这个。 插件

原文由 Muhammed Neswine 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里的事情是，如果你想从控制器绑定 ng-pattern ，你的正则表达式不应该包含开始和结束 / s。像这样：

 $scope.regex = "^(http[s]?:\\/\\/){0,1}(www\\.){0,1}[a-zA-Z0-9\\.\\-]+\\.[a-zA-Z]{2,5}[\\.]{0,1}$"

但是，如果您直接指定像 ng-pattern="/^(http|https|...)$/" 这样的模式，您还需要额外的 / 。

工作 plunker

原文由 tanmay 发布，翻译遵循 CC BY-SA 3.0 许可协议