使用AngularJS和HTML 5验证URL

Question

大家早上好:

看起来像一个非常常见的问题,但谷歌搜索几个小时后,我无法弄清楚:如何验证包括www没有的URL http.

这些是我做的:

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

因此,当我单击提交按钮时,如果表单无效,我会显示警告(true true,false valid).这是我的Plunker

谢谢您的帮助

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.请看一下这个.Plukr

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|...)$/"，则也需要额外/的。

工作钻