suchen

Heim  >  Artikel  >  Web-Frontend  >  Schritte zur Implementierung der Angular-Validierungsfunktion

Schritte zur Implementierung der Angular-Validierungsfunktion

php中世界最好的语言
php中世界最好的语言Original
2018-04-14 09:26:381406Durchsuche

Dieses Mal werde ich Ihnen die Schritte zur Implementierung der Angular-Verifizierungsfunktion vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der Angular-Verifizierungsfunktion?

Der vollständige Beispielcode lautet wie folgt: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>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("资产名称不能为空!");
          }else{
            for(var i in $scope.datas){
              if($scope.name==$scope.datas[i].name){
                $scope.error_val.push("资产名称已经存在");
                break; //结束循环,已经查找到资产名称不合法
              }
            }
          }
          //资产数量
          var reg_num=/^\d{1,}$/; //只能8位数字
          if(!reg_num.test($scope.num)){
            $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 solid">
      <tr>
        <td>资产编号</td>
        <td>资产名称</td>
        <td>资产数量</td>
      </tr>
      <tr ng-repeat="d in datas">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.num}}</td>
      </tr>
    </table>
    <p>
      <form>
        资产编号<input ng-model="id" />
        资产名称<input ng-model="name" />
        资产数量<input ng-model="num" />
        <p>
          <ul>
            <li ng-repeat="e in error_val">
              {{e}}
            </li>
          </ul>
        </p>
        <button ng-click="save()">
        资产录入  
        </button>
      </form>
    </p>
  </body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Localstorage und Sessionstorage in Vue

So führen Sie JS-Objektwerte zusammen

Das obige ist der detaillierte Inhalt vonSchritte zur Implementierung der Angular-Validierungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Schritte zur Implementierung des Singleton-Modus in JSNächster Artikel：Detaillierte Erläuterung der Schritte zur Implementierung des Singleton-Modus in JS

In Verbindung stehende Artikel

Mehr sehen