Question

早上好：

看起来是一个非常常见的问题，但经过数小时的Google搜索后，我无法弄清楚：如何验证包含www而不包含http的网址。

这就是我所做的：

使用输入类型网址：它不接受www.google.com;
将输入类型更改为text并使用ng-pattern：我仍然认为www.google.com无效;
更改了不同的正则表达式但仍无法正常工作。

因此，当我点击提交按钮时，如果表单无效，我会显示警告（true无效，false有效）。这是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，你的正则表达式不应该包含起始和结束/。像这样：

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

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

working plunker

Answer 3

试试这个例子

<!DOCTYPE html>
<html>
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript">


    angular.module("app",[])
    .controller("ctrl",function($scope){
      $scope.checkIfUrl = function(){

        $scope.isPresent = false;

        if ($scope.inputValue != undefined && $scope.inputValue != null) {
          var url = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
          var Link = $scope.inputValue;
          if (Link != "" && Link != undefined && url.test(Link)) {
            if (Link.indexOf("http") != 0) {
              Link = "http://" + Link;
            }
            $scope.isPresent = true;
          }
        }

      };

      $scope.hyperlinkClick= function(){
        var Link = "http://" + $scope.inputValue;
        console.log(Link );
        window.open(Link);

      };
    })

  </script>
</head>
<body ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="inputValue">

  <button ng-click="checkIfUrl()"> check If Url</button>

  <a ng-if="isPresent" style="color: blue; cursor: pointer;" ng-click="hyperlinkClick()">{{inputValue}}</a>

  <span style="color: black" ng-if="!isPresent">{{inputValue}}</span>

</body>
</html>

Answer 4

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

Answer 5

我认为我们也可以使用 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 6

`

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

      }

`

使用AngularJS和HTML 5验证URL

6 个答案: