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

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

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

الخطوة 1 – التحضير. إنشاء نموذج في HTML

لنقم بإنشاء صفحة HTML بسيطة. يرجى ملاحظة أنه يجب أن تكون مكتبة jQuery متصلة بها.

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

التحقق من صحة البريد الإلكتروني مع مسج


// سنكتب الكود هنا



تأكيد بواسطة البريد الالكتروني

الخطوة 2 - قم بتعيين حدث التمويه للتحقق من الحقل

إذا قام المستخدم بالنقر فوق حقل إدخال البريد الإلكتروني، فسيتم التركيز على هذا الحقل. بعد قيام المستخدم بإدخال بريد إلكتروني وتحريك مؤشر الماوس بعيدًا عن الحقل، يتم فقدان التركيز ويحدث حدث التمويه. ولهذا الحدث قمنا بإرفاق معالج.

$(document).ready(function() ( $("#email").blur(function() ( // هنا سنكتب كود معالجة الحدث )); ));

الخطوة 3 - تحقق مما إذا كان الحقل فارغًا

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

إذا تبين أنها فارغة، فإننا نعرض رسالة تحذيرية حول هذا الموضوع.

$(document).ready(function() ( $("#email").blur(function() ( if($(this).val() != "") ( // يتم ملء حقل البريد الإلكتروني ( سنكتب هنا رمز التحقق)) ) else ( // حقل البريد الإلكتروني فارغ، اعرض رسالة تحذير $(this).css(("border" : "1px Solid #ff0000")); $("#valid") .text("يجب ألا يكون حقل البريد الإلكتروني فارغًا" ) ));

الخطوة 4 - قم بإجراء فحص كامل للبريد الإلكتروني الذي تم إدخاله

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

$(document).ready(function() ( $("#email").blur(function() ( if($(this).val() != "") ( نمط var = /^()+@ +\.((2,4)\.)?(2,4)$/i; if(pattern.test($(this).val()))( $(this).css(("border" : "1px Solid #569b44")); $("#valid").text("True"); else ( $(this).css(("border" : "1px Solid #ff0000")); $ ( "#valid").text("غير صحيح"); ) else ( $(this).css(("border" : "1px Solid #ff0000")); $("#valid").text( "ال يجب ألا يكون حقل البريد الإلكتروني فارغًا");

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

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

يتم فهم المعلومات بشكل أفضل من خلال الأمثلة، لذلك دعونا نرى النموذج النهائي عمليًا:

يرجى تعبئة جميع الحقول!

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

صلاحية العنوان بريد إلكتروني

فكر في عنوان بريد إلكتروني ( [البريد الإلكتروني محمي]). وهنا الأجزاء المطلوبة:

• الاسم (اختبار) - حرف واحد أو عدة أحرف؛
• علامة الكلب (@)؛
• اسم النطاق خادم البريد(البريد) - حرف واحد أو عدة أحرف؛
• نقطة (.);
• اسم النطاق من المستوى الأول (ru) يتكون من حرفين إلى خمسة أحرف.

لنقم بإنشاء تعبير عادي لمتطلباتنا:

/^[\w-\.]+@[\w-]+\.(2,4)$/i

دعونا نلقي نظرة على القاعدة في أجزاء:

يجب أن يفتح التعبير العادي ويغلق بأحرف "/". بعد رمز الإغلاق، يمكنك تحديد التوجيه. في حالتنا، هذا التوجيه هو "i"، الذي يعطل التحقق من الأحرف المدخلة للحالة. أي أنه يصبح غير مهم، فقد قدموا " [البريد الإلكتروني محمي]" أو " [البريد الإلكتروني محمي]».

تشير العلامتان "^" و"$" إلى بداية ونهاية السلسلة التي يتم فحصها. إذا قمت بإزالتها، ستعود القاعدة نتيجة ايجابيةحتى لو كان في البداية أو النهاية عنوان البريد الإلكترونيوضع لافتات محظورة. أي أنه عندما تقوم بإدخال "%: [البريد الإلكتروني محمي]#6&" ستعيد وظيفة التحقق نتيجة إيجابية، نظرًا لأن السلسلة تحتوي على سلسلة من الأحرف التي تلبي قاعدتنا. ولإلغاء هذا الاحتمال، نشير إلى أنه ينبغي تطبيق القاعدة على السطر بأكمله، وليس على جزء منه.

الكتلة "[\w-\.]+" مسؤولة عن التحقق من اسم صندوق البريد. بين قوسين مربعين نشير إلى الأحرف المسموح بها: "\w" - الكل حروفوالأرقام والتسطير. أوصي أيضًا بإضافة شرطة ونقطة "-\". . "+" بعد أقواس مربعةيشير إلى إمكانية تكرار الأحرف - مرة واحدة أو عدة مرات.

بعد ذلك تأتي علامة الكلب و اسم النطاقخادم البريد - "@[\w-]+" . هذا هو نفسه تقريبًا كما في الكتلة السابقة. نحن نستبعد النقطة فقط من مجموعة الأحرف.

يبقى أن نكتب قاعدة للتحقق من وجود نقطة وصحة اسم المجال افضل مستوى(رو، كوم، معلومات). "\.(2,4)" . للإشارة إلى علامة النقطة، نشير إليها بشرطة مائلة عكسية "\". وبدونها سيُنظر إليها على أنها شخصية عادية محجوزة، مما يشير إلى إمكانية وجود أي شخصية في مكانها. يجب أن يتبع النقطة اسم مجال المستوى الأعلى. يتكون هذا من حرفين لاتينيين على الأقل - "(2,4)".

مساء الخير عزيزي القارئ. أود في هذه المقالة أن أتناول موضوع التحقق من صحة محتوى النموذج من جانب العميل. في فجر تطوير لغات العميل، كانت هذه المهمة هي المهمة الرئيسية. مع مرور الوقت، اكتسبت هذه اللغات إمكانات جديدة (معالجة DOM، وإدارة الأنماط، وما إلى ذلك)، لكن مهمة التحقق من صحة النموذج لم تختف. صحيح، مع ظهور HTML5، أصبح من الممكن تحديد نوع حقل النموذج، مثل البريد الإلكتروني، وسيتولى المتصفح نفسه التحقق منه. هذه الفرصة هذه اللحظةتم تنفيذه في Opera، لذلك ليس هناك حاجة للاعتماد عليه بعد. ولذلك، أود أن ننظر في هذه المسألة بدقة. في معظم الحالات، يتم التحقق من الصحة على النحو التالي: يتم إعطاء معرف لكل حقل، ثم عند الإرسال، نقوم بسحبها والتحقق من المحتويات على طول الطريق وهو أمر جيد للجميع هذا النهج، باستثناء عدم الاتساق فيه. لذلك، أريد أن ألفت انتباهكم إلى الحل الذي أقترحه لهذه المشكلة. على سبيل المثال، هنا نموذج بسيط يحتوي على حقول للاسم، صندوق بريدوالجنس.
كود ملف HTML:
الإدخال (الحدود: 1 بكسل صلب #D4E2F7؛) الإدخال (الهامش: 3 بكسل 0 بكسل 3 بكسل 15 بكسل؛) ....

ذكر
أنثى

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

الدالة createField() ( var member = new Array("required", "regexp"); for(var i = 0; i< arguments.length; i++) { this] = arguments[i]; } } // absolute regexp createField.prototype.regexp = /^{1,}$/ig; createField.prototype.valid = false; createField.prototype.required = true; createField.prototype.nullify = function() { this.valid = false; };

بعد ذلك، في النموذج الأولي، سنشير إلى القيم الافتراضية للحقول.
regexp - تعبير عادي يجب أن تستوفيه قيمة الحقل المقابل.
صالح - نتيجة التحقق من قيمة الحقل باستخدام التعبير العادي.
مطلوب - مؤشر يوضح ما إذا كان هذا الحقل مطلوبًا (ما إذا كان من الممكن ترك الحقل فارغًا).
nullify() - طريقة تعيد الحقل الصالح إلى حالته الأصلية.

var Single = new Array(); Single["name"] = new createField(); Single["email"] = new createField(true, /^+@+\.(2,4)$/); Single["sex"] = new createField(true, /male$/ig);
نحن نخلق النموذج الأولي لشكلنا. سيكون لديها 3 حقول مع أسماءوالبريد الإلكتروني والجنس، ولا يمكن ترك كل منها فارغًا. علاوة على ذلك، يجب أن تفي قيم الحقلين الأخيرين بالتعبير العادي المحدد في المعلمة الثانية.
var Singleton = ( الحقول: مفردة، regForm: false، nullify_values: function() ( for(i in this.fields) ( this.fields[i].nullify(); ) ), ... );
في هذا القسم من التعليمات البرمجية نعلن عن كائن Singleton. الغرض من حقل الحقول واضح. حقل regForm هو كائن يحتوي على النموذج. من خلاله سنتمكن من الوصول إلى حقول النموذج وقيمها.
تقوم طريقة nullify_values() بإرجاع قيمة الحقل الصالح لـ "الكائنات الفرعية" (نظرًا لأن الحقول عبارة عن مصفوفة من الكائنات) إلى حالتها الأصلية.

وأخيرا الشيء الأكثر إثارة للاهتمام. طريقة الإرسال () والتي تحتوي على الوظيفة الرئيسية.
إرسال: وظيفة () ( if(this.regForm) ( // تعيين الخاصية صالحة إلى خطأ لكل حقل نموذج this.nullify_values(); var i = null; // يتجول عبر حقول النموذج، ثم اختر قيمها وتحقق منها إذا لزم الأمر ل(ط = 0؛ ط< this.regForm.elements.length; i++) { // current field var oField = this.regForm.elements[i]; switch (oField.type) { case "button": case "submit": case "reset": break; case "checkbox": case "radio": if(!oField.checked) { break; } default: // javascript trim function analogue oField.value = oField.value.replace(/^\s*/, "").replace(/\s*$/, ""); if(!oField.value) { oField.value = ""; } // if this field is out of interest if(!this.fields.required) { this.fields.valid = true; this.regForm[i].style.border=""; } // if this field is required else { var match = this.fields.regexp.test(oField.value); // ... and fits regular expression if(match) { this.fields.valid = true; this.regForm[i].style.border=""; } this.fields.regexp.test(oField.value); } } } // now all we need is to check if the whole form is valid // we perform it by comparing number of form fields and number of valid fields // they should be equal var validForm = 0; var fieldsLength = 0; for(i in this.fields) { fieldsLength++; if(this.fields[i].valid) { validForm++; } else { this.regForm[i].style.border="1px solid #FF0000"; break; } } if(validForm == fieldsLength) { this.regForm.submit(); } else { this.nullify_values(); return false; } } }
أولاً نقوم بإعادة تعيين القيم الصالحة. ثم نذهب من خلال حقول النموذج. إذا كان الحقل لا يحمل أي معنى خاص (مثل إعادة التعيين) أو لم يتم وضع علامة اختيار عليه، فإننا نقوم بتخطيه. إزالة المسافات البادئة والزائدة. وإذا كان الحقل ضروريا، فإننا نتحقق من محتوياته باستخدام تعبير عادي. إذا لم يكن الأمر كذلك، انتقل. الآن كل ما تبقى للقيام به هو العد المجموعالحقول وعدد الحقول الصالحة. وإذا كانت متطابقة، فيمكن تقديم النموذج.
واحد = فارغ؛ window.onload = function() ( var regForm = document.forms; Singleton.regForm = regForm; Singleton.regForm.onsubmit = function() ( return Singleton.submit(); ); ) ؛
وفي النهاية، نقوم "بإبطال" الكائن المفرد حتى لا نغير قيم Singleton.fields عن طريق الخطأ، ونلتقط النموذج ونعطيه معالج حدث الإرسال.

حار1. إذا دمرنا Single، ألن ندمر أيضًا Singleton.fields في نفس الوقت؟ لا. وهذا هو السبب. من خلال تعيين كائن لمتغير الحقول، فإننا لا نقوم بتمرير الكائن نفسه، ولكن فقط رابطًا إليه. فعليًا، يتم تخزين الكائن في ما يسمى بكومة الذاكرة. ولن تتم إزالته من هناك بواسطة جامع البيانات المهملة طالما أن هناك رابطًا واحدًا له على الأقل، وبالتالي قمنا فقط بإزالة الرابط إلى المصفوفة، ولم يتم إتلاف الكائنات، لأن هناك رابطًا آخر لها. وهي Singleton.fields.

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

3. لماذا أتحقق مرة أخرى عندما تتطابق محتويات الحقل مع التعبير العادي؟ ليس لدي إجابة واضحة على هذا. من خلال تجربتي، لاحظت أنه عند استخدام الدالة RegExp.test()، فإنها تقوم أولاً بإرجاع النتيجة المتوقعة، ثم العكس تمامًا. حاول التعليق على هذا السطر وانظر بنفسك كيف يصبح السلوك غير متوقع. في الحالة العادية لا يتم ملاحظة ذلك.

Tsimes يتمتع هذا البرنامج النصي بمرونة كبيرة، بمعنى أنه أثناء عملية النقل، يتعين عليك فقط تغيير أسماء الحقول (مفاتيح المصفوفة الفردية) والتعبيرات العادية للتحقق منها.

تستطيع أن ترى البرنامج النصي في العمل

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

ليس سراً أنه يجب التحقق من أي نماذج موجودة على الموقع. تحتاج إلى التحقق من كليهما من جانب الخادم ( يجب ان يملك)، ومن جانب العميل. هناك الكثير من النماذج، وإضافة عمليات التحقق لكل حقل إدخال هي مهمة سيئة للغاية. دعونا نحاول تعميم هذه المشكلة.
إذا فكرت في الأمر، فعادةً ما يتلخص التحقق من صحة النموذج في عدة مهام:
1) التحقق من الحقول المطلوبة.
2) منع إدخال الأحرف غير المرغوب فيها
3) التحقق من القيمة المدخلة بالنتيجة المرجوة.

ما هي أفضل طريقة للتحقق من السلاسل؟ هذا صحيح - التعبيرات العادية هي ما سنستخدمه بنشاط لحل مشاكلنا!

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

للقيام بذلك، قم بإضافة التعليمة البرمجية التالية.

$("").each(function() ( $(this).prop("required", false).attr("data-required", "true"); )).click(function() ( $( this).removeClass("خطأ").parent().find(".خطأ-رسالة").text("" ));

ملحوظة: الكود يفترض ذلك مكتبات جي كويريوأيضًا أن جميع المدخلات تحتوي على حاوية أصل معينة (عادةً ما يكون هذا هو الحال في المشاريع الحقيقية). مثال:

سيقوم الكود أعلاه تلقائيًا بإزالة السمة المطلوبة من العلامات وإنشاء سمة البيانات المطلوبة = "true" بدلاً من ذلك.

لحل المشكلة الثانية سنقوم بإنشاء المعالج التالي:

$("").keypress(function(e) ( if(e.key || .indexOf(e.keyCode) == -1) ( if(!new RegExp($(this).data("regexp-input "), "g").test(e.key)) ( e.preventDefault(); return false; ) ) )); $("").keypress(function(e) ( if(new RegExp($(this).data("regexp-block"), "g").test(e.key)) ( e.preventDefault() ؛ عودة كاذبة؛ ) ))؛

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

إذا أردنا السماح بإدخال كل شيء باستثناء الأحرف (،)، !، ?، فسيكون من المنطقي أكثر استخدام معالج حظر الأحرف:

لحل المشكلة الثالثة، نحتاج إلى وظيفة مساعدة.

الدالة checkRegexp(o, e) ( var $this = $(o); $this.removeClass("error"); $this.parent().find("span.error-message").text("") ; if($this.data("regexp") && $this.data("regexp") != "") ( if($this.parent().find("span.error-message").length = = 0) ( $this.parent().append(""); ) if($this.val() == "" && $this.data("required")) ( $this.addClass("خطأ" ); $this.parent().find("span.error-message").text("Required" ) else ( if(!new RegExp("^" + $this.data("regexp" ) + "$" ", "g").test($this.val())) ( $this.addClass("error"); $this.parent().find("span.error-message"). text("Filled" بشكل غير صحيح"); ) ) ) $this. Closest("form").find("").prop("disabled", $this. Closest("form").find("input.error" ).length != 0);

يتحقق هذا الرمز من الكائن الذي تم تمريره "o" (سيكون هذا بمثابة إدخال) ويتم إنشاؤه في حالة حدوث أي أخطاء كتلة إضافيةتمتد مع رسالة خطأ. تقوم هذه الوظيفة أيضًا بمعالجة سمة البيانات المطلوبة التي تم إنشاؤها في الخطوة 1.

الآن أنت بحاجة للتعليق هذه الوظيفةلعناصرنا

$("input").click(function() ( $(this).removeClass("error"); )).keyup(function(e) ( checkRegexp(this, e); )).blur(function(e ) ( checkRegexp(this, e); ));

الآن، للتحقق من صلاحية حقل للقالب المطلوب، ما عليك سوى إضافة سمة data-regexp إلى العلامة، على سبيل المثال، التحقق من الحقل لتنسيق التاريخ في النموذج YYYY-MM-DD:

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

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

باستخدام CSS

هناك أربع فئات زائفة خاصة في CSS تنطبق على حقول النموذج: :valid ( حقل صالح)، :غير صالح ( غير صالح)، :مطلوب ( إلزامي) و: اختياري ( خياري). ويمكن استخدامها لإضافة بعض التلميحات - وإن كانت محدودة جدًا - للمستخدمين الذين يملؤون النموذج.

باستخدام :valid و:invalid، يمكننا أن نوضح للمستخدم ما إذا كان الحقل قد تم ملؤه بشكل صحيح أثناء الكتابة.

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

لا يعد تصميم الحالات:required و:Optional مفيدًا بشكل خاص في حد ذاته، نظرًا لأن هذه المعلومات يتم توفيرها عادةً في تسميات حقول النموذج. ومع ذلك، يمكننا دمج هذه الحالات مع الفئات الزائفة :valid / :invalid وتصميم مجموعاتها. على سبيل المثال، نريد إظهار نتيجة إيجابية فقط عندما يكون الحقل المطلوب صالحًا.

نحن نستخدم جافا سكريبت

توفر لك JavaScript العديد من الخيارات لتحسين تجربة المستخدم مع النماذج. لنأخذ مثالاً على ثلاثة حقول رقمية، كل منها بحد أدنى 10، وبحد أقصى 100، وبزيادة 10 وحدات.

من خلال تعيين سمات الحد الأدنى والحد الأقصى والخطوة، يمكننا التأكد من صحة القيمة فقط عندما يستخدم المستخدم عناصر تحكم حقل رقمية خاصة. ولكن ما الذي يمنع المستخدم من إدخال بيانات غير صحيحة يدويًا؟ إليك ما يحدث إذا قام بإدراج 1 و12 و123 في ثلاثة حقول وقام بإرسال النموذج:

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

إضافة رسائل خطأ متعددة إلى تلميح أداة واحد

عند التحقق من صحة الحقول، يقوم المتصفح بفحصها مقابل قائمة محددة من الأخطاء المحتملة. يحتوي كل حقل كائن خاصالصلاحية، والتي تتضمن قائمة بالقيم المنطقية التي تميز فحص صلاحية معين. على سبيل المثال، هذا هو كائن الصلاحية الذي سيحتوي عليه الحقل عندما يقوم المستخدم بإدخال 1 فيه:

ملاحظة المترجم: تتم ترجمة كلمة "عدم التطابق" على أنها "عدم الاتساق". لذلك، في القيمpatternMismatch وstepMismatch وtypeMismatch يتم عكس المنطق: true - القيمة لا تفي بالسمة، false - إنها كذلك.

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

الآن عندما نحاول إرسال النموذج سنرى هذا:

تم تحسينه لأنه سيُظهر الآن جميع رسائل الخطأ المتعلقة بـ مجال معين. ومع ذلك، لا تزال هناك مشكلة أخرى لم يتم حلها: لا تزال الأخطاء تظهر فقط للحقل الأول.

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

إظهار كافة الأخطاء لجميع الحقول.

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

يمكن تحقيق ذلك من خلال سطرين إضافيين في الكود الخاص بنا:

وهذا ما يحدث عندما تنقر على إرسال الآن:

نحن نستخدم اختبارات صلاحية غير قياسية

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

لأننا نتحقق بالفعل من كل شيء الأخطاء المحتملةيدويًا في وظيفة CustomValidation.prototype.checkValidity، يمكننا ببساطة إضافة بعض عمليات التحقق الإضافية هناك.

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

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