سمات العنصر هي أساس المدققين. باستخدام السمات ، يمكننا على الفور تعيين القيود التالية:
مطلوب - الحقل مطلوب ، أي يتطلب ملء الحد
الأدنى للخطوة - الحد الأدنى والحد الأقصى للقيم المسموح بها ، بالإضافة إلى خطوة تغيير minlength و maxlength - محددات عدد أنماط أحرف الإدخال المسموح بها - التعبير العادي يبدو أنه ليس كثيرًا ، ومع ذلك ، يمنحنا النمط فرصًا غنية جدًا للتحقق من القيم ، ويمكن بسهولة البحث في googled على النظامين العاديين السماح بالتحقق الفوري من أرقام الهواتف وعناوين البريد الإلكتروني وعناوين URL والمزيد في الطلب.
هذه السمات ، المرتبة على عناصر النموذج ، لن تسمح تلقائيًا بتشغيل الزر من نفس النموذج الذي يؤدي قيم الإرسال إلى الخادم ، على الرغم من أن مثل هذه الحالة قد تبدو اليوم عفا عليها الزمن بالنسبة للكثيرين. لكن هذه ليست مشكلة لأن باستخدام JavaScript من جانب العميل ، يمكننا استخدام جميع أدوات التحقق هذه بنفس الطريقة أو بطريقة أفضل. لذلك ، لن نستخدم نوع الإدخال = البريد الإلكتروني ، لكننا نحاول إنشاء حقل خاص بنا مع التحقق من الإدخال للامتثال لقواعد إنشاء عناوين البريد الإلكتروني. لنقم بعمل نموذج بسيط:
<form name="myform" id="myform">
<input type="text" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" placeholder="email here"/>
<input type="submit">
</form>
يعمل المدقق على الفور وعند محاولة الضغط على الزر ، فإنه يصدر تحذيرًا بلغة موقع المتصفح.
وفقًا لذلك ، يؤدي إدخال mail@example.com إلى إرسال نموذج ناجح.
لتطوير سلوكك ، تحتاج إلى الوصول إلى مثيل النموذج ، ويمكن القيام بذلك من خلال المستند العام بالاسم أو الفهرس (المعرف) أو الترتيب الترتيبي بدءًا من الصفر.
<script type="module">
document.forms.myform.onsubmit = (event) => {
console.log('validate');
return false;
};
</script>
أو عن طريق المحدد باستخدام إحدى الطرق ، مثل document.getElementById () أو document.querySelector ()
للتحقق من النتائج ، قم بتشغيل خادم http
npx http-server
بعد تشغيل الأمر ، يمكنك فتح 127.0.0.1 : 8080 / أو العنوان الذي يكتبه لك في وحدة التحكم في المتصفح وتصحيح النتائج.
لنقم باستبدال زر الإرسال بزر عادي واستدعاء التحقق من صحة النموذج يدويًا ، مع تغيير المثال قليلاً.
<form id="myform" action="#">
<input type="text" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required placeholder="email here" />
<input type="button" name="subm" value="OK" />
</form>
<script type="module">;
myform.subm.onclick = (event) => {
console.log(form.checkValidity());
return false;
};
</script>
في هذا المثال ، يمكنك أن ترى أن تعيين كائنات النموذج من خلال معرفها واسمها يعمل مع العناصر الفرعية فيما يتعلق بالنموذج ، والذي يبدو أنيقًا للغاية. الآن يقوم الكود الخاص بنا بطباعة حالة صلاحية النموذج إلى وحدة التحكم.
لا يعني وجود طرق لبدء عملية التحقق يدويًا أنه لا يمكن إجراؤها دون الاتصال بها.
هي نتائج المدخلات وتغييرات أخرى إلى النموذج ينعكس فورا في حالته، والذي يتجلى في وجود شبه طبقات صالحة و غير صالحة الأنماط . إذا أضفت تمييزًا لونيًا ، فيمكنك رؤية كيفية عمل التحقق على الفور.
<style>
:valid {
border: 1px solid green;
}
:invalid {
border: 1px solid red;
}
</style>
لمنع النموذج من إزعاج العيون باللون الأحمر قبل أن يحاول المستخدم إدخال شيء فيه ، يمكنك استخدام الاختراق الحياتي باستخدام عنصر نائب:
<style>
input:valid {
border: 1px solid green;
}
input:not(:placeholder-shown):invalid {
border: 1px solid red;
}
</style>
يمكن تعليق المعالجات الخارجية لأحداث التحقق من الصحة على عناصر النموذج.
<script type="module">
myform.email.oninvalid = (event) => {
alert('Wrong email !!11');
};
myform.subm.onclick = (event) => {
console.log(form.checkValidity());
return false;
};
</script>
في هذه الحالة ، يتم استخدام آلية الخطاف بواسطة اسم الحدث ، إذا كان هناك بعض الأحداث التي يدعمها العنصر ، ثم من خلال تخصيص وظيفة مسماة على + <event_name> لها ، يمكننا التأكد من أنه سيتم استدعاؤها عند إطلاقها.
وهناك نقطة أخرى جديرة بالذكر هنا وهي أنه لن يتم استدعاؤها بعد الآن عند إدخال البيانات ، ولكن فقط عند إجراء عملية التحقق من الصحة بشكل برمجي ، أي استدعاء طريقة checkValidity ().
وفقًا لذلك ، يمكننا التعامل مع هذا السلوك:
myform.subm.onclick = (event) => {
if (myform.checkValidity()) {
alert('Valid !');
} else {
alert('Invalid !')
}
return false;
};
في الحياة الواقعية ، قد نحتاج أيضًا إلى استدعاء event.preventDefault () إذا فشل التحقق من الصحة في إحباط إجراء إرسال النموذج.
عند checkValidity () عبارة عن reportValidity () تمثيلي ، والذي يعرض النتيجة دون التسبب في إعادة التحقق.
كيف تعرف أي مجال هو الخطأ؟
يحتوي كل عنصر إدخال في النموذج على خاصية .validity ، بالإضافة إلى القدرة على استدعاء طرق التحقق من الصحة ، تحتوي الخاصية على البنية التالية:
ValueState: {
valid - علامة عامة لصحة
القيمة مفقودة - القيمة مطلوبة ، ولكن لم يتم تعيين
typeMismatch -
تم إدخال نوع القيمة الخاطئ إلى patternMismatch - تم تقديمه قيمة غير متطابقة
tooLong - قيمة أكبر من maxlength أيضًا
قصيرة - قيمة أقل من minlength
rangeUnderflow - قيمة أقل من min
rangeOverflow - قيمة أكبر من max
stepMismatch - القيمة لا تتطابق مع الخطوة
badInput - لا يمكن
إجبار الإدخال على قيمة customError - خطأ عشوائي
} بشكل
أساسي ، كما يمكننا أن نرى ، تتطابق خصائص الخطأ مع سمات التحقق القياسية ، بينما يمثل .customError مساحة رأسنا للتمديد.
باستدعاء طريقة .setCustomValidity () بسلسلة خطأ كوسيطة ، يمكننا تمييز عنصر النموذج على أنه غير صالح. يمكنك أيضًا تعيين نص الخطأ أو الحصول عليه من خلال الخاصية .validationMessage...
حتى لا يتم تعيين عمليات التحقق من صحة المتصفح ، يمكنك استخدام الخاصية willValidate ، التي تشير إلى ما إذا كان سيتم استدعاء عمليات التحقق من الصحة القياسية في الحقل أم لا.
بتمرير سلسلة فارغة كوسيطة إلى .setCustomValidity () يمكننا إعادة حالتها إلى الحالة الصالحة.
دعنا نضيف دعمًا لسمة my-pattern الخاصة بنا ، والتي ستتحقق من القيمة مقابل تعبير عادي بنفس الطريقة من أجل الوضوح.
في حالة حدوث خطأ ، سيتم عرض الرسالة بجانب الرسالة الموجودة في المستعرض بجوار الحقل.
سيتم تشغيل التحقق من الصحة عند تغيير قيمة الحقل البديل وعند الضغط على الزر.
<form id="myform" action="#">
<div>
<input type="text" name="email" id="email" value="" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required placeholder="email here" />
<span class="msg"></span>
</div>
<div>
<input type="text" name="customInput" id="customInput" my-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required placeholder="text here" />
<span class="msg"></span>
</div>
<button type="submit" name="subm" value="OK">OK</button>
</form>
<style>
input:valid {
border: 1px solid green;
}
input:not(:placeholder-shown):invalid {
border: 1px solid red;
}
</style>
<script type="module">
myform.customInput.oninvalid = (event) => {
let el = event.target;
let msg = el.parentElement.querySelector('.msg');
msg.innerText = el.validationMessage;
console.log('oninvalid, id: ', el.id);
};
myform.customInput.oninput = (event) => {
let el = event.currentTarget;
validateWithMyPattern(el);
markValidity(el);
};
function markValidity(el) {
el.checkValidity();
let msg = el.parentElement.querySelector('.msg');
if (el.validity.valid) {
msg.innerText = '';
} else {
msg.innerText = el.validationMessage;
}
}
function validateWithMyPattern(field) {
if (field.value) {
if (field.hasAttribute('my-pattern') &&
field.value.match(field.getAttribute('my-pattern'))) {
field.setCustomValidity('');
} else {
field.setCustomValidity('My pattern error');
}
}
}
myform.subm.onclick = (event) => {
for (let formEl of myform.querySelectorAll('input')) {
validateWithMyPattern(formEl);
markValidity(formEl);
}
if (myform.reportValidity()) {
alert('Valid !');
} else {
alert('Invalid !')
}
return false;
};
</script>
الآن لدينا حقلين متشابهين يتحققان من القيمة باستخدام مدقق قياسي وآخر كتبناه بأنفسنا.
قد لا تبدو الاحتمالات غنية ، ومع ذلك ، فبمساعدتها يمكنك تنفيذ أي عمليات تحقق ، بما في ذلك. مجموعات ميدانية بدون الكثير من القيود التقنية كما هو الحال مع الأطر الشائعة.
من بين قيود Validation API ، أتذكر فقط الإبطال الأولي للحقول. بالنسبة لذلك ، بالإضافة إلى الحيلة مع العنصر النائب أو الحالات الخاصة التي لم تمسها ، يمكنك إجراء جميع عمليات التحقق من الصحة برمجيًا على الإدخال وإرسال الأحداث من خلال الجمع بين أدوات التحقق الخاصة بك مع تلك القياسية.
لحل مشاكلي ، أتيت إلى الحاجة إلى إنشاء مكون خاص بي يؤدي مهام النموذج في نفس الوقت لدعم عناصر الإدخال الخاصة بي ، مما يسمح لك بتعيين سلوك مختلف للتحقق من الصحة والإخطار وتعليق أي مدققين واستخدام واجهة التحقق الموحدة. يمكنك رؤيته هنا: https://bitbucket.org/techminded/skinny-widgets/src/master/src/form/
ويمكن العثور على رمز المثال من هذه المقالة هنا:
https://bitbucket.org/techminded/myform /