Exemple de fonction de validation simple en Angular

La présente instance explique la fonction de validation simple d'Angular. Partagé avec tous pour référence, voici les détails :

Voyons d'abord l'effet de exécution :

Voici un exemple complet de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>fr.oldtoolbag.com fonction de validation Angular</title>
    <script src="angular.min.js"></script>
    <style>
      input{
        display: block;
      }
      ul li{
        color: red;
      }
    </style>
    <script>
      angular.module("myapp",[])
      .controller("demoC",function($scope){
        $scope.datas = [{
            id: 10011120,
            name: "iphoneX",
            num: 99
          },
          {
            id: 10011121,
            name: "华为mate10,
            num: 20
          },
          {
            id: 10011122,
            name: "vivoR12,
            num: 55
          }
        ]; //定义一个数组
        $scope.save=function(){
          //创建一个存放错误信息数组
          $scope.error_val=[];
          var reg_id=/^\d{8,8}$/; //只能8位数字
          if(!reg_id.test($scope.id)){
            $scope.error_val.push("资产编号格式，必须为数字，且长度为8位");
          }
          //资产名称
          if($scope.name==undefined||$scope.name==""){
            $scope.error_val.push("资产名称不能为空!");
          }
            for(var i in $scope.datas){
              if($scope.name==$scope.datas[i].name){
                $scope.error_val.push("资产名称已经存在");
                break; //结束循环,已经查找到资产名称不合法
              }
            }
          }
          //资产数量
          var reg_num=/^\d{1,}$/; //只能8位数字
          $scope.error_val.push("资产编号数量，必须为数字");
            else{
          }
            if($scope.num<=0){
              $scope.error_val.push("资产编号数量必须大于0");
            }
          }
          //何时添加进行,何时不添加
          if($scope.error_val.length==0){
            $scope.datas.push({
              id:$scope.id,
              name:$scope.name,
              num:$scope.num
            });
          }
        }
      })
    </script>
  </head>
  <body ng-app="myapp" ng-controller="demoC">
    <table border="1px solide">
      <tr>
        <td>Numéro des actifs</td>
        <td>Nom des actifs</td>
        <td>Quantité des actifs</td>
      </tr>
      <tr ng-repeat="d in datas">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.num}}</td>
      </tr>
    </table>
    <div>
      <form>
        Numéro des actifs<input ng-model="id" />
        Nom des actifs<input ng-model="name" />
        Quantité des actifs<input ng-model="num" />
        <div>
          <ul>
            <li ng-repeat="e in error_val">
              {{e}}
            </li>
          </ul>
        </div>
        <button ng-click="save()">
        Enregistrement des actifs  
        </button>
      </form>
    </div>
  </body>
</html>

PS : Je vais aussi vous fournir2Un outil d'expression régulière très pratique pour référence et utilisation :

Outil de test en ligne des expressions régulières JavaScript :
http://tools.jb51.net/regex/javascript

Outil en ligne de génération de expressions régulières :
http://tools.jb51.net/regex/create_reg

Les lecteurs intéressés par d'autres contenus relatifs à AngularJS peuvent consulter les sujets spéciaux de ce site : 'Résumé des techniques de manipulation des directives AngularJS', 'Tutoriel d'entrée et de progression AngularJS' et 'Résumé de l'architecture MVC AngularJS'

J'espère que l'information décrite dans cet article pourra aider les développeurs AngularJS.

Déclaration : le contenu de cet article est extrait du réseau, et les droits d'auteur appartiennent à leurs propriétaires respectifs. Le contenu est fourni par les utilisateurs d'Internet et téléchargé spontanément. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique en ce qui concerne la responsabilité civile. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.)

Manual de base