使用 AngularJS 和 HTML 5 验证 URL

Question

大家早上好：

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

这就是我所做的：

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

因此，当我单击提交按钮时，如果表单无效（真无效，假有效），我会显示警报。这里是my 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|...)$/" 之类的模式，则还需要额外的/s。

working plunker

Answer 3

尝试使用 ng2-validation 库。它可用于执行您应该需要的大多数验证。 Angular2 自定义验证，灵感来自 jQuery 验证。

Answer 4

我想我们也可以使用 AngularJs builtin URL validator。

<script>
angular.module('urlExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.url = {
    text: 'http://google.com'
  };
}]);
</script>

<form name="myForm" ng-controller="ExampleController">
<label>URL:
  <input type="url" name="input" ng-model="url.text" required>
<label>
<div role="alert">
  <span class="error" ng-show="myForm.input.$error.required">
  Required!</span>
  <span class="error" ng-show="myForm.input.$error.url">
  Not valid url!</span>
</div>
 <tt>text = {{url.text}}</tt><br/>
 <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
 <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
 <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
 <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
</form>

Answer 5

1. `

if (this.resource.url.match("^(https:\/\/|http:\/\/)")) {
if (this.resource.url.match("^(https:\/\/www\.|http:\/\/www\.)?([da-z.-]+)\\.([a-z.]{2,6})")) {

           
         }

         else
         {
          errorMessages.push("url is invalid");

         }

      }
      else {
         errorMessages.push("url is invalid");

      }

`