Ejemplo de función de validación simple en Angular

Este artículo proporciona un ejemplo de la funcionalidad de validación simple de Angular. Comparto con todos para que lo puedan considerar, como se indica a continuación:

Vamos a ver primero el efecto de ejecución:

A continuación, encontrará el código completo del ejemplo:

!DOCTYPE html
<html>
  <head>
    <meta charset="UTF-8">
    <title>es.oldtoolbag.com funcionalidad de validación de 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 solid">
      <tr>
        <td>Número de activo</td>
        <td>Nombre del activo</td>
        <td>Cantidad de activos</td>
      </tr>
      <tr ng-repeat="d in datas">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.num}}</td>
      </tr>
    </table>
    <div>
      <form>
        Número de activo<input ng-model="id" />
        Nombre del activo<input ng-model="name" />
        Cantidad de activos<input ng-model="num" />
        <div>
          <ul>
            <li ng-repeat="e in error_val">
              {{e}}
            </li>
          </ul>
        </div>
        <button ng-click="save()">
        Entrada de activos  
        </button>
      </form>
    </div>
  </body>
</html>

PS: Aquí les proporciono2Una herramienta muy conveniente de expresiones regulares para su referencia y uso:

Herramienta en línea de prueba de expresiones regulares de JavaScript:
http://tools.jb51.net/regex/javascript

Herramienta en línea de generación de expresiones regulares:
http://tools.jb51.net/regex/create_reg

Los lectores interesados en más contenido relacionado con AngularJS pueden ver las secciones especiales de este sitio: 'Resumen de技巧 para el manejo de instrucciones AngularJS', 'Tutorial de inicio y avanzado AngularJS' y 'Resumen de la arquitectura MVC AngularJS'.

Espero que lo dicho en este artículo pueda ayudar a todos a diseñar programas AngularJS.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al autor original, el contenido se ha aportado y subido por los usuarios de Internet de manera autónoma. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará