مثال بسيط على وظيفة التحقق البسيط في 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 as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ar.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: "هواوي مات 10",
            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){
                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>
    <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>

ملاحظة: سأقدم لكم هنا 2 أدوات مفيدة لتعبيرات النصوص العادية للاستفادة منها:

أداة اختبار تعبيرات النصوص العادية JavaScript عبر الإنترنت:
http://tools.jb51.net/regex/javascript

أداة إنشاء تعبيرات النصوص العادية عبر الإنترنت:
http://tools.jb51.net/regex/create_reg

قراء مهتمون بمزيد من المعلومات حول AngularJS يمكنهم الاستفادة من مواضيع الموقع الخاصة بنا: 'تجميع تقنيات إشارات AngularJS'، 'تعليم AngularJS من البداية إلى المتقدم'، و 'تجميع نماذج MVC AngularJS'.

آمل أن يكون هذا المقال قد ساعدكم في تصميم برامج AngularJS.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق النشر تخص صاحب المقال، محتوى تم إضافته من قبل مستخدمي الإنترنت بتحميلهم، الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (أثناء إرسال البريد الإلكتروني، يرجى استبدال #بـ @) للإبلاغ، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من صحة الشكوى، سيتم حذف المحتوى المزعوم فوراً.

تعليمية الأساس

أنت قد تحب