web-dev-qa-db-ja.com

AngularJSとHTML5でURLを検証する

みんなおはよう：

非常に一般的な質問のように見えますが、何時間もグーグルした後、私はこれを理解できません：wwwを含まないhttpを含むURLを検証する方法。

これらは私がしたことです：

  1. 入力タイプのURLを使用しました：www.google.comを受け入れません。
  2. 入力タイプをtextに変更し、ng-patternを使用しました：まだwww.google.comが無効です。
  3. 別の正規表現を変更しましたが、まだ機能していません。

そのため、送信ボタンをクリックすると、フォームが無効（true無効、false有効）の場合にアラートが表示されます。これが 私のプランカー

助けてくれてありがとう

htmlangularjsregexvalidation
3
MarcosF8

正規表現をスコープにバインドする代わりに、正規表現を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">

プランカーを更新しました。こちらをご覧ください。 プルクル

7
Muhammed Neswine

ここで重要なのは、コントローラーから_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も必要です。

作業プランカー

4
tanmay

この例を試してください

<!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>
0
Saurabh Agrawal

Ng2-validationライブラリを使用してみてください。これは、必要になるはずのほとんどの検証を実行するために使用できます。 jQuery検証に触発されたAngular2カスタム検証。

0
DancingDad

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