web-dev-qa-db-fra.com

Valider l'URL avec AngularJS et HTML 5

Bonjour à tous:

Cela semble être une question très courante, mais après avoir cherché Google pendant des heures, je ne suis pas en mesure de le comprendre: comment valider une URL comprenant www sans http.

Voici ce que j'ai fait:

  1. Utilisé le type d'entrée url: il n'accepte pas www.google.com;
  2. Changé le type d'entrée à text et utilisé ng-pattern: Je reçois toujours le www.google.com invalide;
  3. Changement de regex différent mais ne fonctionne toujours pas.

Ainsi, lorsque je clique sur le bouton d'envoi, j'affiche une alerte si le formulaire n'est pas valide (vrai invalide, faux valide). Voici mon Plunker

Merci pour l'aide

htmlangularjsregexvalidation
2
MarcosF8

Au lieu de lier la regex à la portée, vous pouvez directement ajouter la regex à l'attribut ng-pattern. Comme ça:

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

J'ai mis à jour le plunkr. S'il vous plaît jeter un oeil à cela. Plukr

7
Muhammed Neswine

Si vous souhaitez lier ng-pattern à partir du contrôleur, votre expression rationnelle ne devrait pas contenir les /s de début et de fin. Comme ça:

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

Mais, si vous spécifiez directement un modèle tel que ng-pattern="/^(http|https|...)$/", vous aurez également besoin du /s supplémentaire.

plunker de travail

4
tanmay

Essayez cet exemple

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

Essayez d’utiliser la bibliothèque de validation ng2. Il peut être utilisé pour effectuer la plupart des validations dont vous devriez avoir besoin. Validation personnalisée Angular2, inspirée de la validation jQuery.

0
DancingDad