Beispiel zur einfachen Validierungsfunktion in Angular

Dieser Artikel beschreibt die einfache Validierungsfunktion von Angular. Hier ist eine gemeinsame Referenz für alle, wie folgt:

Schauen wir uns zunächst den Laufeffekt an:

Vollständige Beispielcode wie folgt:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>de.oldtoolbag.com 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
          }
        ]); //Definiere ein Array
        $scope.save=function(){
          //Erstelle ein Array zum Speichern von Fehlermeldungen
          $scope.error_val=[];
          var reg_id=/^\d{8,8}$/; //nur8Stellen der Zahl
          if(!reg_id.test($scope.id)){
            $scope.error_val.push("Das Format der Asset-Nummer muss eine Zahl sein und die Länge beträgt8)";
          }
          //Name des Assets
          if($scope.name==undefined||$scope.name==""){
            $scope.error_val.push("Der Asset-Name darf nicht leer sein!");
          }
            for(var i in $scope.datas){
              if($scope.name==$scope.datas[i].name){
                $scope.error_val.push("Der Asset-Name existiert bereits");
                break; //Ende des Schleifendurchlaufs, der Name des Assets ist ungültig
              }
            }
          }
          //Anzahl der Assets
          var reg_num=/^\d{1,}$/; //nur8Stellen der Zahl
          $scope.error_val.push("Die Anzahl der Asset-Nummern muss eine Zahl sein");
            else{
          }
            if($scope.num<=0){
              $scope.error_val.push("Die Anzahl der Asset-Nummern muss größer als 0 sein");
            }
          }
          //Wann wird hinzugefügt, wann nicht hinzugefügt
          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 solid">
      <tr>
        <td>Eigentumsnummer</td>
        <td>Eigentum名称</td>
        <td>Eigentumsmenge</td>
      </tr>
      <tr ng-repeat="d in datas">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.num}}</td>
      </tr>
    </table>
    <div>
      <form>
        Eigentumsnummer<input ng-model="id" />
        Eigentum名称<input ng-model="name" />
        Eigentumsmenge<input ng-model="num" />
        <div>
          <ul>
            <li ng-repeat="e in error_val">
              {{e}}
            </li>
          </ul>
        </div>
        <button ng-click="save()">
        Eigentumseingabe  
        </button>
      </form>
    </div>
  </body>
</html>

PS: Hier noch einmal2Ein sehr praktisches Tool für reguläre Ausdrücke, das alle zur Verfügung gestellt wird:

Online-Testtool für reguläre Ausdrücke in JavaScript:
http://tools.jb51.net/regex/javascript

Online-Generator für reguläre Ausdrücke:
http://tools.jb51.net/regex/create_reg

Interessierte Leser, die mehr über AngularJS erfahren möchten, können die Themen auf dieser Website lesen: 'Zusammenfassung der AngularJS-Befehlstechniken', 'Einführung und Fortschritt in AngularJS' und 'Zusammenfassung der AngularJS-MVC-Architektur'.

Ich hoffe, dass die in diesem Artikel beschriebenen Inhalte Ihnen bei der AngularJS-Programmgestaltung helfen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem jeweiligen Urheberrechtsinhaber. Der Inhalt wurde von Internetnutzern freiwillig und eigenständig hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich geschützte Inhalte entdecken, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail, um eine Beschwerde einzureichen und relevante Beweise bereitzustellen. Sobald überprüft, wird diese Website die beanstandeten urheberrechtlich geschützten Inhalte sofort löschen.)

Grundlegende Anleitung

Mögen Sie auch