تأكيد النماذج Form Validation

By


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

أنواع البيانات التي يمكن فحصها من خلال الجافاسكربت هي :

  • ترك المستخدم لحقل مطلوب فارغ .

  • ادخال المستخدم بريد الكتروني صحيح ام لأ.

  • ادخال المستخدم لتاريخ صحيح ام لأ .

  • ادخال المستخدم نص في حقل أرقام .


الحقول المطلوبة


يفحص الكود الوظيفي اذا ترك الحقل فارغاً أم لا . اذا كان الحقل فارغاً سيظهر صندوق تحذير بأن قيمة الكود الوظيفي خاطئة وبذلك لن يتم ارسال النموذج :
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("يجب إدخال الاسم ");
return false;
}
}

سيتم استدعاء الكود عند الضغط على زر الارسال في النموذج التالي 

 
<form dir="rtl" name="myForm" action="get" onsubmit="return validateForm()" method="post">
الاسم : <input type="text" name="fname">
<input type="submit" value="إرسال">
</form>


المثال كاملاً 

 
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("يجب إدخال الاسم ");
return false;
}
}
<form dir="rtl" name="myForm" action="get" 
onsubmit="return validateForm()" method="post">
الاسم : <input type="text" name="fname">
<input type="submit" value="إرسال">
</form>




فعالية البريد الالكتروني


يفحص الكود الوظيفي التالي عن المحتوى اذا كان يحمل تركيبة البريد ام لأ .

ذلك يعني بأن القيمة التي يجب أن تدخل يجب أن تحتوي على العلامة "@" وعلى الأقل نقطة واحدة "." وأيضاً لايجب أن تكون الإشارة "@" أول حرف في البريد الالكتروني و النقطة "." يجب أن تكون بعد الإشارة "@" مع حرفين على الأقل قبل نهاية البريد .
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("البريد الالكتروني غير فعال");
return false;
}
}


سيتم استدعاء الكود الوظيفي من خلال النوذج التالي وعند الضغط على زر الارسال :
<form dir="rtl" name="myForm" action="get" onsubmit="return validateForm();" method="post">
البريد الالكتروني : <input type="text" name="email">
<input type="submit" value="إرسال">
</form>


مع جمع الكودين سيصبح الكود لدينا هو :
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("البريد الالكتروني غير فعال");
return false;
}
}
</script>
<form dir="rtl" name="myForm" action="get" onsubmit="return validateForm();" method="post">
البريد الالكتروني : <input type="text" name="email">
<input type="submit" value="إرسال">
</form>


ليست هناك تعليقات:

إرسال تعليق