التحقق من صحة نموذج AngularJS عند الإرسال: مثال للتسجيل

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

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

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

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

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

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

دعونا نلقي نظرة على كيفية إجراء التحقق من صحة نموذج AngularJS في HTML5.

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

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

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

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

شرح الكود

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

إذا تم تنفيذ الكود بنجاح، فسيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح للتحقق من صحة نموذج AngularJS عند الإرسال.

الناتج

لرؤية التحقق من صحة النموذج أثناء العمل، انقر فوق الزر إرسال دون إدخال أي معلومات على الشاشة.

بعد النقر على زر الإرسال، ستظهر نافذة منبثقة تُظهر خطأ التحقق من صحة الحقل الذي يجب ملؤه.

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

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

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

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

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

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

AngularJS يوفر AngularJS خصائص إضافية للتحقق من الصحة. يوفر AngularJS الخصائص التالية لعناصر التحكم لأغراض التحقق من الصحة

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

فيما يلي الخطوات التي يجب اتباعها لإجراء التحقق من الصحة Angular.

الخطوة 1) استخدم خاصية no validate عند الإعلان عن النموذج. تخبر هذه الخاصية HTML5 أنه سيتم إجراء التحقق من الصحة بواسطة AngularJS.

الخطوة 2) تأكد من أن النموذج له اسم محدد له. والسبب في ذلك هو أنه عند إجراء التحقق من الصحة Angular، سيتم استخدام اسم النموذج.

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

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

دعونا نلقي نظرة على مثال يتضمن الخطوات المذكورة أعلاه.

في مثالنا ،

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<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.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

شرح الكود

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

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الناتج

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

تعرض لقطة الشاشة أعلاه شيئين

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

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

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

مع وجود هذه الوحدة في مكانها الصحيح، لن تحتاج إلى وضع أي رمز خاص لإجراء التحقق من الصحة أو إظهار رسائل الخطأ. يتم التعامل مع كل هذا من خلال الكود الموجود داخل JCS-AutoValidate.

دعونا نلقي نظرة على مثال بسيط لكيفية تحقيق ذلك.

في هذا المثال،

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>

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

        </div>
            <div>
                <div class="form-group">
                    <input type="submit">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>

شرح الكود

أولاً، نحتاج إلى تضمين البرنامج النصي "jcs-auto-validate.js" الذي يحتوي على جميع وظائف التحقق التلقائي.
نحتاج إلى التأكد من وضع كل عنصر بما في ذلك "علامة div" في فئة "مجموعة النموذج".
تحتاج أيضًا إلى التأكد من أن كل عنصر (وهو عنصر HTML مثل التحكم في الإدخال والتحكم في الامتداد والتحكم في div وما إلى ذلك) مثل عناصر التحكم في الإدخال يتم وضعه أيضًا في فئة مجموعة النموذج.
قم بتضمين jcs-autovalidate في وحدة AngularJS JS الخاصة بك.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الناتج

بشكل افتراضي، عند تشغيل التعليمات البرمجية الخاصة بك، سيتم عرض النموذج أعلاه وفقًا لتعليمات HTML البرمجية.

إذا حاولت إرسال النموذج، فستنبثق رسالة خطأ تقول "هذا الحقل مطلوب". يتم كل هذا من خلال خيار JCS-AutoValidate.

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div class="form-group">
        <form name="myForm" novalidate ng-submit="submit()">
            <div>
                <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);

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

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

شرح الكود

نحن نستخدم "نانوغرام-إرسال"توجيه لاستدعاء وظيفة تسمى "إرسال". سيتم استخدام هذه الوظيفة لتغيير سمة ladda لزر الإرسال.
سمة ladda هي سمة خاصة لإطار ladda. هذه السمة هي التي تضيف تأثير الدوران للتحكم. نحن نقوم بتعيين قيمة سمة ladda على المتغير المرسل.
تعد خاصية نمط البيانات مرة أخرى سمة إضافية يقدمها إطار عمل ladda، والتي تضيف فقط تأثيرًا مرئيًا مختلفًا إلى زر الإرسال.
يجب إضافة وحدة "AngularJS-ladda" إلى تطبيق AngularJS.JS حتى يعمل إطار عمل ladda.
في البداية، نقوم بتعريف وتحديد قيمة متغير يسمى "إرسال" إلى خطأ. تم تعيين هذه القيمة للسمة ladda لزر الإرسال. من خلال تعيين هذا في البداية على خطأ، فإننا نقول أننا لا نريد أن يكون لزر الإرسال تأثير لادا حتى الآن.
نحن نعلن عن وظيفة يتم استدعاؤها عند الضغط على زر الإرسال. في هذه الوظيفة، نقوم بتعيين "الإرسال" على "صحيح". سيؤدي هذا إلى تطبيق تأثير لادا على زر الإرسال.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الناتج

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

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

الملخص

يمكن التحقق من صحة عناصر التحكم HTML الخاصة بصندوق النص باستخدام السمة "مطلوب".
في HTML5، تمت إضافة عناصر تحكم جديدة مثل كلمة المرور والبريد الإلكتروني والرقم والتي توفر مجموعة خاصة بها من عمليات التحقق.
يتم الاهتمام بالتحقق من صحة النموذج في AngularJS من خلال النظر إلى القيم $dirty و$valid و$invalid و$pristine لعنصر تحكم النموذج.
يمكن أيضًا تحقيق التحقق التلقائي في تطبيقات AngularJS باستخدام وحدة التحقق التلقائي من JCS.
يمكن إضافة أزرار Ladda إلى تطبيق Angular.js لإعطاء القليل من الإحساس البصري المحسن للمستخدم عند الضغط على الزر.

قد ترغب:

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

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

شرح الكود

الناتج

ذات المواد

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

شرح الكود

الناتج

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

شرح الكود

الناتج

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

شرح الكود

الناتج

الملخص