使用AngularJS和HTML 5验证URL

Question

大家早上好：

看起来是一个非常普遍的问题，但经过几个小时的谷歌搜索，我还是没能解决这个问题：如何验证不包含 http 的包含 www 的 URL。

以下是我的尝试：

1. 使用输入类型为 url：它不接受 www.google.com；
2. 将输入类型更改为 text 并使用 ng-pattern：仍然出现 www.google.com 无效；
3. 更改了不同的正则表达式，但仍未能解决问题。

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

感谢帮助！

- MarcosF8

---

https://www.npmjs.com/package/angular-validation - Charly

使用此模式在您的 Pluncker 上运行良好。 模式为 /((([A-Za-z]{3,9}:(?://)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:/[+~%/.\w-]*)???(?:[-+=&;%@.\w])#?(?:[\w]))?)/ - Amit Malik

Answer 1

不必将正则表达式绑定到作用域，可以直接将正则表达式添加到ng-pattern属性中。像这样：

而不是将正则表达式绑定到作用域，你可以直接将正则表达式添加到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。

- Muhammed Neswine

Answer 2

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

$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

---

谢谢！我很感激你对基本概念的帮助。它仍然适用于此URL：fdsfsfsfsf - MarcosF8

@MarcosF8 忘记转义转义斜杠了。现在可以工作了。也更新了 Plunker :) - tanmay

Answer 3

我认为我们也可以使用AngularJs内置的URL验证器。

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

- vishnu

Answer 4

尝试使用ng2-validation库。它可以用于执行您所需的大多数验证。这是一个受到jQuery验证启发的Angular2自定义验证库。

- DancingDad

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");

      }

`

- Akurathi-sandeep Aurathi

---

请在您的解决方案中添加某种解释。 - vahid tajari

在上述的if条件语句中，它会验证http:和https:。如果URL匹配，则进入第二个if条件语句，其中完整的URL“https://www.google.com”匹配。如果缺少任何内容，例如.com或www，则会显示错误消息。 - Akurathi-sandeep Aurathi