6.8 KiB
| title | localeTitle |
|---|---|
| Form Validation | التحقق من صحة النموذج |
التحقق من صحة النموذج
التحقق من صحة النموذج المستخدم عادةً في الخادم ، بعد أن يقوم العميل بإدخال جميع البيانات الضرورية ثم الضغط على زر "إرسال". إذا كانت البيانات كان العميل غير صحيح أو كان في عداد المفقودين ببساطة ، سيكون على الخادم إرسال جميع البيانات مرة أخرى إلى العميل وطلب أن يكون النموذج إعادة إرسالها مع المعلومات الصحيحة. كانت هذه عملية طويلة تستخدم لوضع الكثير من العبء على الخادم.
تقدم JavaScript طريقة للتحقق من صحة بيانات النموذج على كمبيوتر العميل قبل إرسالها إلى خادم الويب. التحقق من صحة النموذج بشكل عام يؤدي اثنين المهام:
التحقق الأساسي
بادئ ذي بدء ، يجب التحقق من النموذج للتأكد من ملء جميع الحقول الإلزامية. سيتطلب الأمر مجرد حلقة عبر كل حقل في النموذج و تحقق من البيانات.
التحقق من صحة تنسيق البيانات
ثانيًا ، يجب التحقق من البيانات التي تم إدخالها للنموذج والقيمة الصحيحة. يجب أن تحتوي شفرتك على المنطق المناسب لاختبار صحة البيانات.
مثال:
`
<html> <head> <script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
انتاج |
انتبه هنا
التحقق من صحة النموذج الأساسي
دعونا أولا نرى كيف نفعل التحقق من صحة النموذج الأساسي. في النموذج أعلاه ، نحن ندعو بالتحقق () للتحقق من صحة البيانات عند حدوث حدث عند الإرسال. ال التعليمة البرمجية التالية يعرض تنفيذ هذه الدالة validate() .
`
`
انتاج |
انتبه هنا
التحقق من صحة تنسيق البيانات
سنرى الآن كيف يمكننا التحقق من صحة بيانات النماذج المدخلة قبل إرسالها إلى خادم الويب.
يوضح المثال التالي كيفية التحقق من صحة عنوان البريد الإلكتروني الذي تم إدخاله. يجب أن يحتوي عنوان البريد الإلكتروني على علامة "@" ونقطة (.) على الأقل. يجب أيضًا أن يكون "@" لا يكون الحرف الأول لعنوان البريد الإلكتروني ، ويجب أن تكون النقطة الأخيرة على الأقل حرفًا واحدًا بعد علامة "@".
مثال:
`
`
انتاج |
انتبه هنا
قيود نموذج HTML5
بعض القيود HTML5 تستخدم عادة ل <input> هي type السمة (على سبيل المثال type="password" )، maxlength ، required و disabled . أقل القيد شائع الاستخدام هو pattern attrinute الذي يأخذ تعبير JavaScript العادي.
مكتبات التحقق
تتضمن أمثلة مكتبات التحقق من الصحة: