التحقق من صحة النموذج في AngularJS عند الإرسال: $dirty، $valid، و$invalid

من قبل: جيمس هارتمان جيمس هارتمان
Hours تحديث

⚡ ملخص ذكي

تتحقق خاصية التحقق من صحة النماذج في AngularJS من صحة واكتمال البيانات المُدخلة في النموذج قبل إرسالها إلى الخادم. نتناول هنا أربعة أساليب، بدءًا من سمات HTML5 الأساسية مرورًا بخصائص النطاق وصولًا إلى وحدات التحقق التلقائي.

  • 🧩 سمات HTML5: توفر السمة المطلوبة وأنواع إدخال البريد الإلكتروني وكلمة المرور والرقم عمليات فحص أصلية للمتصفح بدون الحاجة إلى كتابة برامج نصية.
  • 🔍 ممتلكات الدولة: يعرض AngularJS المتغيرات $dirty و $pristine و $valid و $invalid على كل عنصر تحكم مسمى داخل نموذج مسمى.
  • 🏷️ متطلبات التسمية: يحتاج كل من النموذج وكل عنصر تحكم إلى سمة اسم، لأن حالة التحقق يتم التعامل معها على أنها formName.controlName.
  • 🚫 منع النوافذ المنبثقة الأصلية: تؤدي إضافة novalidate إلى النموذج إلى منع المتصفح من اعتراض عملية الإرسال حتى يتمكن AngularJS من التعامل معها.
  • 💬 عرض الرسالة: تقوم وحدة ngMessages باستبدال توجيهات ng-show المتراكمة وتعرض خطأً واحدًا في كل مرة حسب ترتيب الأولوية.
  • ⚙️ التحقق التلقائي: تقوم وحدة jcs-autoValidate بإنشاء رسائل خطأ لكل عنصر تحكم دون أي ترميز مخصص.
  • 🔘 ملاحظات حول عملية الإرسال: يقوم زر Ladda بتطبيق مؤشر تحميل أثناء عملية الإرسال، مما يشير إلى تقدم العملية للمستخدم.
اقرأ المزيد

التحقق من صحة النموذج في AngularJS

التحقق من صحة النموذج في AngularJS، تُعدّ عملية التحقق من صحة البيانات المُدخلة في النموذج عمليةً لضمان صحتها واكتمالها. عند إرسال المستخدم للنموذج، يتم التحقق من صحة البيانات أولاً قبل إرسالها إلى الخادم. تضمن هذه العملية، قدر الإمكان، ملء حقول الإدخال بشكل صحيح.

في مثال واقعي، لنفترض موقعًا يتطلب تعبئة نموذج تسجيل قبل منح الوصول الكامل. ستحتوي صفحة التسجيل على حقول إدخال لاسم المستخدم وكلمة المرور والبريد الإلكتروني وما إلى ذلك.

على سبيل المثال، يجب أن يكون عنوان البريد الإلكتروني دائمًا بالصيغة التالية: اسم المستخدم@site.domainإذا أدخل المستخدم اسم المستخدم فقط، فسيفشل التحقق. يقوم التحقق بإجراء هذه الفحوصات الأساسية قبل إرسال البيانات إلى الخادم لمزيد من المعالجة.

⚠️ ملاحظة حول الإصدار: وصل دعم AngularJS (الإصدار 1.x) إلى نهايته في 31 ديسمبر 2021، ولم يعد يتلقى أي تحديثات أمنية. تبقى التقنيات المذكورة أدناه صالحة للتطبيقات القديمة؛ أما Angular الحديث فيؤدي المهمة نفسها باستخدام القوالب أو النماذج التفاعلية.

التحقق من صحة النموذج باستخدام HTML5

التحقق من صحة النموذج هو عملية التحقق المسبق من صحة المعلومات المُدخلة في نموذج الويب قبل إرسالها إلى الخادم. يُفضل التحقق من صحة النموذج من جانب العميل، لأنه يُقلل بشكل كبير من الحمل الزائد مقارنةً بإعادة عرض النموذج بعد كل عملية إرسال واستقبال.

يوضح المثال أدناه نموذج تسجيل بسيطًا يُدخل فيه المستخدم اسم المستخدم وكلمة المرور والبريد الإلكتروني والعمر. ويحتوي النموذج على عناصر تحكم للتحقق من صحة المعلومات المدخلة.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ تم تطبيق التصحيحات على جميع القوائم في هذه الصفحة. أعلنت النسخ الأصلية chrset="UTF 8"، وهو ليس سمة صالحة ولا ترميزًا صالحًا، وتم تحميل AngularJS ثلاث مرات — angular-route.js أولاً، وهذا يُسبب خطأً لأن وحدة التوجيه تُسجل في إطار عمل لم يتم تحميله، ثم angular.min.js و angular.jsنفس المكتبة مرتين. كما قاموا بسحبها أيضًا bootstrap.css من خلال <script> تم استخدام الوسم، لذا لم يتم تطبيق أي تنسيق. الآن، يقوم كل عنصر بتحميل مكتبة واحدة، الإصدار 1.8.3، ويربط ورقة الأنماط بشكل صحيح. تم إنشاء حشو التخطيط من تكرار &nbsp; تمت إزالة الكيانات.

Code تفسير

  1. بالنسبة لنوع إدخال النص، required تعني هذه الخاصية أنه لا يمكن أن يكون مربع النص فارغًا عند إرسال النموذج.
  2. نوع الإدخال التالي هو كلمة المرور. ولأن هذا النوع مُحدد ككلمة مرور، فإن النص المُدخل في الحقل يكون مخفياً.
  3. بما أن نوع الإدخال محدد على أنه بريد إلكتروني، يجب أن يتطابق النص الموجود في المربع مع النمط name@site.domain.
  4. عندما يتم تحديد نوع الإدخال كرقم، فإن الأحرف المكتوبة من لوحة المفاتيح لا يتم قبولها ببساطة بواسطة الحقل.

الناتج

لمشاهدة عملية التحقق من صحة البيانات، انقر فوق "إرسال" دون إدخال أي شيء.

تظهر نافذة منبثقة تُفيد بضرورة ملء الحقل، لذا فإن عنصر التحكم الذي تم وضع علامة عليه كإلزامي يمنع الإرسال عند تركه فارغًا.

يؤدي إدخال قيمة في عنصر التحكم بكلمة المرور إلى ظهور رمز "*" الذي يخفي الأحرف.

يؤدي إدخال بريد إلكتروني غير صحيح والنقر على "إرسال" إلى ظهور نافذة منبثقة تطلب رمز @. وأخيرًا، لا تظهر الأحرف المكتوبة في خانة العمر، لأن هذه الخانة تقبل الأرقام فقط.

تتميز النوافذ المنبثقة في المتصفح بسهولة إعدادها، ولكن لا يمكن تغيير صياغتها أو تصميمها. وهنا يأتي دور خصائص التحقق من الصحة في AngularJS.

ذات المواد

التحقق من صحة النموذج باستخدام $dirty، $valid، $invalid، $pristine

AngularJS يُوفّر خصائصه الخاصة للتحقق من الصحة. وتُعرض الخصائص التالية في كل عنصر تحكم مُسمى:

  • $ القذرة - لقد تفاعل المستخدم مع عنصر التحكم
  • $ صالح – محتوى الحقل صالح
  • $ غير صالح – محتوى الحقل غير صالح
  • $البكر - لم يتفاعل المستخدم مع عنصر التحكم حتى الآن

فيما يلي خطوات إجراء التحقق من صحة AngularJS.

الخطوة 1) استخدم novalidate خاصية عند تعريف النموذج. هذا يُخبر المتصفح بأن التحقق من الصحة سيتم التعامل معه بواسطة AngularJS.

الخطوة 2) تأكد من أن النموذج له اسم محدد، لأن هذا الاسم يُستخدم للوصول إلى حالة التحقق.

الخطوة 3) تأكد من أن كل عنصر تحكم يحتوي أيضًا على name السمة، وللسبب نفسه. لا يتم تسجيل عنصر تحكم بدون اسم في النموذج.

الخطوة 4) استخدم نانوغرام المعرض توجيه للتحقق من خصائص $dirty و $invalid و $valid.

يحتوي المثال أدناه على حقل نصي واحد يُدخل فيه المستخدم اسم الموضوع. إذا تُرك هذا الحقل فارغًا، فسيتم عرض رسالة خطأ في التحقق من صحة البيانات.

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red"
              ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ تم تصحيح خطأين منطقيين. قام الإصدار الأصلي بتعطيل الزر باستخدام ng-disabled="myForm.user.$dirty && myForm.user.$invalid". لان $dirty يبقى الزر غير مفعل حتى يلمس المستخدم الحقل. تمكين على نموذج فارغ لم يمس، وهي الحالة التي كان من المفترض أن يمنعها؛ myForm.$invalid يشمل كلا الأمرين. كما أن النسخة الأصلية غلّفت القيمة الافتراضية في $scope.Display = function () { $scope.user = 'Angular'; }لم يتم استدعاء أي دالة، لذا فُتح مربع النص فارغًا على الرغم من أن النص كان يُشير إلى "AngularJS". الآن، يتم إسناد القيمة مباشرةً إلى النص المُحاط بعلامات الاقتباس.

Code تفسير

  1. يُطلق على النموذج اسم "myForm". هذا ضروري للوصول إلى عناصر التحكم الخاصة به للتحقق من صحتها.
  2. استخدم novalidate تمنع الخاصية المتصفح من التحقق من صحة البيانات، لذا يمكن لـ AngularJS القيام بذلك بدلاً من ذلك.
  3. يتحقق توجيه ng-show من الخاصيتين "$dirty" و"$invalid". إذا تم تعديل مربع النص، تكون قيمة $dirty صحيحة؛ وإذا كانت قيمته فارغة، تكون قيمة $invalid صحيحة. وعندما تكون كلتا القيمتين صحيحتين، يتم عرض العنصر span ذي النص الأحمر.
  4. يقوم الفحص المتداخل بقراءة الخاصية "$error.required"، والتي تكون صحيحة عندما لا يكون لعنصر التحكم المطلوب قيمة، ويعرض "اسم المستخدم مطلوب".
  5. تم تعطيل زر الإرسال من خلال ng-disabled عندما يكون النموذج ككل غير صالح.
  6. يقوم المتحكم بتعيين قيمة مربع النص الأولية إلى "AngularJS"، لذلك يتم فتح النموذج في حالة صالحة ويكون التحقق من الصحة أسهل للملاحظة عند حذف النص.

الناتج

عند عرض النموذج لأول مرة، يظهر مربع النص "AngularJS" ويكون زر الإرسال مُفعّلاً. بمجرد إزالة النص، تظهر رسالة الخطأ ويتم تعطيل الزر.

تُظهر لقطة الشاشة أعلاه أمرين:

  • زر الإرسال معطل
  • لا يوجد اسم موضوع في مربع نص الموضوع، لذا تظهر رسالة الخطأ "اسم المستخدم مطلوب".

كيفية عرض أخطاء التحقق باستخدام ngMessages

النمط المذكور أعلاه فعال، لكنه غير قابل للتطبيق على نطاق واسع. يحتاج الحقل الذي يحتوي على أربعة قيود إلى أربعة قيود متداخلة. ng-show تظهر جميع الرسائل معًا عندما تفشل عدة رسائل في وقت واحد. ngMessages تقوم الوحدة النمطية، التي يتم شحنها بشكل منفصل من قبل فريق AngularJS، بحل المشكلتين: فهي تعرض رسالة واحدة في كل مرة، بالترتيب الذي كُتبت به الرسائل.

قم بتحميل الوحدة وإضافتها كاعتمادية.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

ثم تُقرأ العلامات كقائمة من القواعد بدلاً من مجموعة من الشروط.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

ثلاثة تفاصيل تجعل هذا المنتج يعمل بشكل جيد في الواقع. ng-messages تشير السمة إلى عنصر التحكم $error يتم استخدام الكائن بدلاً من قيمة منطقية، لذلك لا يلزم تكرار أي شرط. يتم فقط أول تطابق ng-message يُظهر هذا الأمر أن الحقل الفارغ يُشير إلى أنه مطلوب بدلاً من الإشارة إلى طوله. إضافةً إلى ذلك ng-messages-multiple يعكس هذا السلوك عندما يكون من الضروري حقًا سرد كل فشل.

التفافping الكتلة في ng-if="myForm.user.$dirty" يُبقي النموذج صامتًا حتى يُدخل المستخدم شيئًا ما. استبدال $touched لـ $dirty يؤدي ذلك إلى تأخير الرسالة أكثر، حتى يغادر التركيز الحقل، وهو عادةً الخيار الأنسب في نموذج التسجيل الطويل.

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

كتابة الرسائل يدويًا دقيقة ولكنها متكررة. يتناول القسم التالي وحدة تقوم بإنشائها تلقائيًا.

التحقق من صحة النموذج باستخدام AngularJS Auto Validate

يستطيع AngularJS التحقق من صحة جميع عناصر التحكم في النموذج تلقائيًا، دون الحاجة إلى كتابة أي كود مخصص للتحقق أو رسائل الخطأ. ويتم ذلك عن طريق تضمين وحدة مجتمعية تُسمى "jcs-autoValidate".

مع وجود هذه الوحدة، لا حاجة إلى أي كود خاص لتشغيل التحقق أو عرض الرسائل؛ يتم التعامل مع كل شيء داخل jcs-autoValidate.

يحتوي المثال أدناه على نموذج بسيط مع مربع نص واحد مطلوب. ستظهر رسالة خطأ إذا لم يتم ملء مربع النص.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ تصحيح: حدد الأصل عنصر التحكم بـ id="user" فقط. تصل خاصية jcs-autoValidate إلى عنصر التحكم من خلال النموذج، لذا name السمة إلزامية، ولم تظهر الرسالة أبدًا بدونها. كما قام الإصدار الأصلي بتحميل نسختين مختلفتين من AngularJS، 1.6.4 من Google شبكة توصيل المحتوى (CDN) جنبًا إلى جنب مع الإصدار 1.6.9، ولم يتم ربطها مطلقًا Bootstrap على الرغم من أن المثال يعتمد على form-group و form-control فئات لتحديد موضع نص الخطأ.

💡 ملاحظة: jcs-autoValidate هو مشروع مجتمعي ولم يعد يتم صيانته بشكل فعال. لا يزال قابلاً للاستخدام في تطبيقات AngularJS الحالية، ولكن الخاصية المدمجة ngMessages النهج الموضح سابقاً هو الخيار الأكثر أماناً لأي شيء جديد.

Code تفسير

  1. تم تضمين البرنامج النصي "jcs-auto-validate.js"، الذي يحتوي على جميع وظائف التحقق التلقائي.
  2. يتم وضع كل عنصر تحكم وقسم div المحيط به داخل فئة "form-group"، حيث يقوم الموديول بإدخال رسالته.
  3. يحتوي عنصر التحكم على كل من المعرف و nameو Bootstrap تزود ال form-control التصميم.
  4. تم إدراج وحدة "jcs-autoValidate" كإحدى تبعيات وحدة AngularJS.

الناتج

يتم عرض النموذج افتراضياً تماماً كما هو مكتوب.

عند إرسال النموذج الفارغ، تظهر رسالة "هذا الحقل مطلوب"، والتي يتم إنشاؤها بالكامل بواسطة jcs-autoValidate. بعد التحقق من صحة النموذج، يبقى السؤال: ماذا يرى المستخدم أثناء إرساله؟

ردود فعل المستخدم مع أزرار Ladda

أزرار "لادا" عبارة عن إطار عمل مبني على Javaسيناريو وهذا يعطي الأزرار تأثيراً بصرياً عند الضغط عليها.

إذا تم إعطاء زر خاصية "ladda" والضغط عليه، فسيظهر تأثير الدوران. تتوفر أنماط بيانات مختلفة لإضافة تأثيرات بصرية أخرى.

يُظهر المثال أدناه نموذجًا بسيطًا مزودًا بزر إرسال. عند الضغط على الزر، يظهر تأثير دوران عليه.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ تصحيح: تم تحميل النسخة الأصلية angular-ladda.js و angular-ladda.min.js معًا، مما يؤدي إلى تسجيل نفس الوحدة مرتين، وجلب نسختين من AngularJS مرة أخرى. كما تم سردها أيضًا jcs-autoValidate باعتبارها تبعية لا يستخدمها هذا المثال مطلقًا. يتم تحميل نسخة واحدة من كل مكتبة هنا.

Code تفسير

  1. في "نانوغرام-إرسال" يقوم التوجيه " باستدعاء دالة تسمى "submit"، والتي تقوم بتغيير سمة ladda للزر.
  2. السمة ladda تابعة لإطار عمل Ladda وهي المسؤولة عن إضافة تأثير الدوران. وترتبط قيمتها بـ submitting المتغير.
  3. تُعد خاصية نمط البيانات سمة أخرى من سمات Ladda التي تحدد تأثيرًا مرئيًا مختلفًا.
  4. يجب إضافة وحدة 'angular-ladda' إلى تطبيق AngularJS لكي يعمل الإطار.
  5. استخدم submitting تمت تهيئة المتغير إلى القيمة "خطأ"، لذا يبدأ الزر بدون تأثير الدوران.
  6. تحدد وظيفة الإرسال submitting إلى القيمة "صحيح"، مما يُفعّل التأثير. في تطبيق حقيقي، ستتم إعادة ضبطها إلى القيمة "خطأ" بمجرد استجابة الخادم، وإلا سيظل الزر يدور إلى ما لا نهاية.

الناتج

عند عرض النموذج لأول مرة، يظهر زر الإرسال بشكله العادي.

عند الضغط على الزر، submitting يتم ضبط المتغير على القيمة "صحيح". تصل هذه القيمة إلى خاصية "ladda" للزر، مما ينتج عنه تأثير الدوران.

الأسئلة الشائعة

تصبح قيمة المتغير $dirty صحيحة عند تغيير القيمة. وتصبح قيمة المتغير $touched صحيحة عند فقدان التركيز على الحقل. استخدم $touched لتأخير ظهور الخطأ حتى ينتقل المستخدم إلى عنصر آخر، مما يبدو أقل حدة.ping.

أضف توجيه ng-pattern مع تعبير نمطي، على سبيل المثال ng-pattern=”/^[0-9]{6}$/”. ثم يظهر الخطأ كـ $error.pattern، والذي يمكن لـ ngMessages الإبلاغ عنه مثل أي قيد مدمج.

نعم. تقرأ أدوات الذكاء الاصطناعي الترميز وتُنتج كتل ng-pattern وngMessages المطابقة المطلوبة. راجع دائمًا التعبيرات النمطية، لأن أنماط البريد الإلكتروني والهاتف المُولّدة غالبًا ما ترفض المدخلات الصحيحة.

تقوم المساعدات المدعومة بالذكاء الاصطناعي بالتحقق بسرعة من الأسباب الثلاثة المعتادة: سمة الاسم المفقودة في النموذج أو عنصر التحكم، و ng-model المفقود، وترك novalidate معطلاً بحيث يعترض المتصفح الإرسال أولاً.

لا. صحيح أنه يُحسّن تجربة المستخدم ويُقلّل من عدد مرات الوصول إلى الخادم، لكن يُمكن لأي شخص تجاوزه باستخدام أدوات المطورين. يجب إعادة تطبيق كل قاعدة مُطبّقة في المتصفح على الخادم أيضًا.

تلخيص هذه التدوينة بـ: