Example of Simple Validation Functionality in Angular

This article describes the simple validation feature of Angular. Shared for everyone's reference, as follows:

Let's take a look at the running effect first:

Complete example code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.oldtoolbag.com angular validation feature</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
          }
        ]; //Define an array
        $scope.save=function(){
          //Create an array to store error information
          $scope.error_val=[];
          var reg_id=/^\d{8,8}$/; //can only8number
          if(!reg_id.test($scope.id)){
            $scope.error_val.push("The format of the asset code must be a number and the length must be");8site);
          }
          //Asset name
          if($scope.name==undefined||$scope.name==""){
            $scope.error_val.push("The asset name cannot be empty!");
          }
            for(var i in $scope.datas){
              if($scope.name==$scope.datas[i].name){
                $scope.error_val.push("The asset name already exists");
                break; //End loop, the asset name found is not valid
              }
            }
          }
          //Asset quantity
          var reg_num=/^\d{1,}$/; //can only8number
          $scope.error_val.push("The number of asset codes must be a number");
            else{
          }
            if($scope.num<=0){
              $scope.error_val.push("The number of asset codes must be greater than 0");
            }
          }
          //Whether to add, whether not to add
          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>Asset ID</td>
        <td>Asset Name</td>
        <td>Asset Quantity</td>
      </tr>
      <tr ng-repeat="d in datas">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.num}}</td>
      </tr>
    </table>
    <div>
      <form>
        Asset ID<input ng-model="id" />
        Asset Name<input ng-model="name" />
        Asset Quantity<input ng-model="num" />
        <div>
          <ul>
            <li ng-repeat="e in error_val">
              {{e}}
            </li>
          </ul>
        </div>
        <button ng-click="save()">
        Asset Entry  
        </button>
      </form>
    </div>
  </body>
</html>

PS: Here is also provided2A very convenient regular expression tool is provided for your reference and use:

Online JavaScript Regular Expression Testing Tool:
http://tools.jb51.net/regex/javascript

Online Regular Expression Generator Tool:
http://tools.jb51.net/regex/create_reg

Readers who are interested in more about AngularJS can check the special topics on this site: 'Summary of AngularJS Directive Operation Skills', 'AngularJS Introduction and Advanced Tutorial', and 'Summary of AngularJS MVC Architecture'.

I hope the content described in this article will be helpful to everyone's AngularJS program design.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial