Angular 간단한 검증 기능 예제

本文实例讲述了Angular简单验证功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

完整实例代码如下：

!DOCTYPE html
<html>
  <head>
    <meta charset="UTF-8">
    <title>ko.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: "华为mate"10",
            num: 20
          },
          {
            id: 10011122,
            name: "vivoR"12",
            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 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>
    <div>
      <form>
        자산 번호<input ng-model="id" />
        자산 이름<input ng-model="name" />
        자산 수량<input ng-model="num" />
        <div>
          <ul>
            <li ng-repeat="e in error_val">
              {{e}}
            </li>
          </ul>
        </div>
        <button ng-click="save()">
        자산 입력  
        </button>
      </form>
    </div>
  </body>
</html>

PS: 또한 제공해 드립니다2매우 편리한 정규 표현식 도구를 참고 사용할 수 있습니다:

JavaScript 정규 표현식 온라인 테스트 도구:
http://tools.jb51.net/regex/javascript

정규 표현식 온라인 생성 도구:
http://tools.jb51.net/regex/create_reg

AngularJS와 관련된 더 많은 내용에 관심이 있는 독자는 사이트의 특집을 확인할 수 있습니다：《AngularJS 지시 작업 기술 요약》、《AngularJS 입문 및 고급 튜토리얼》 및 《AngularJS MVC 아키텍처 요약》

본 문서에서 설명한 내용이 AngularJS 프로그램 설계에 도움이 되길 바랍니다.

언급: 본 문서의 내용은 인터넷에서 수집되었으며, 저작권은 원작자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있을 경우, 이메일을 notice#w로 보내 주세요.3codebox.com（이메일을 보내는 경우 #을 @으로 변경하십시오. 신고하시고 관련 증거를 제공하시면, 사이트는 즉시 침해 의심 내용을 삭제합니다.

기본 튜토리얼