Maison > Article > interface Web > Comment implémenter la validation dans Angular

Comment implémenter la validation dans Angular

亚连original: 2018-06-19 09:58:161235parcourir

Cet article présente principalement la fonction de vérification simple d'Angular, impliquant une réponse aux événements AngularJS, un jugement régulier, une modification dynamique des attributs des éléments de page et d'autres compétences opérationnelles connexes. Les amis dans le besoin peuvent s'y référer

Les exemples dans. cet article décrit la vérification simple de la fonction de vérification angulaire. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

L'exemple de code complet est comme suit :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net 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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus