اسهل وافضل طريقة للتحقق باستخدام JS --validation

[DeveloperZ]

السلام عليكم

اقدم لكم اليوم درس للتحقق من قيمة المدخلات في اي سكربت خاص بك

وهنا الحقول درس اليوم

اسم المستخدم
كلمة المرور
تاكيد كلمة المرور
البريد
رقم الجوال
العمر

في البداية نقوم بعمل فورم ولابد ان يكون للفورم اسم



<form action="trdVai.php" method="post" enctype="multipart/form-data" name="myForm" id="myForm">
</form>


وسمينا الفورم : myForm

والاكشن لا يهم في هذا المثال


الان نتكلم عن الحقول



<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12%">اسم المستخدم</td>
<td width="88%"><label>
<input type="text" name="name" id="name" />
</label></td>
</tr>
<tr>
<td>كلمة المرور</td>
<td><label>
<input type="text" name="password" id="password" />
</label></td>
</tr>
<tr>
<td>تأكيد كلمة المرور</td>
<td><label>
<input type="text" name="com_pass" id="com_pass" />
</label></td>
</tr>
<tr>
<td>البريد الالكتروني</td>
<td><label>
<input type="text" name="mail" id="mail" />
</label></td>
</tr>
<tr>
<td>رقم الجوال</td>
<td><label>
<input type="text" name="m_number" id="m_number" />
</label></td>
</tr>
<tr>
<td>العمر</td>
<td><label>
<input type="text" name="age" id="age" />
</label></td>
</tr>

</table>


اسم المستخدم :name
كلمة المرور password
تاكيد كلمة المرور com_pass
البريد :mail
رقم الجوال m_number
العمر : age

الى الان كل شي مفهوم

كود الجاف




<script type="text/javascript" language="javascript">

function validateMyForm ( ) {
var numericExpression = /^[0-9]+$/;
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
var isValid = true;

if ( document.myForm.name.value == "" ) {
alert ( "حقل اسم المستخدم فارغ" );
isValid = false;
} else if ( document.myForm.name.value.length < 6 ) {
alert ( "لابد ان تكون عدد حروف الاسم اكثر من 6 احرف" );
isValid = false;
} else if ( document.myForm.password.value == "" ) {
alert ( "حقل كلمة المرور فارغ" );
isValid = false;
} else if ( document.myForm.password.value != document.myForm.com_pass.value) {
alert ( "كلمة المرور غير متطابقة" );
isValid = false;
} else if ( document.myForm.mail.value == "" ) {
alert ( "حقل البريد فارغ" );
isValid = false;
} else if ( document.myForm.mail.value != document.myForm.mail.value.match(emailExp) ) {
alert ( "الرجاء كتابة البريد بصورة صحيحة" );
isValid = false;
} else if ( document.myForm.m_number.value != document.myForm.m_number.value.match(numericExpres sion) ) {
alert ( "حقل مخصصل للارقام فقط" );
isValid = false;
} else if (document.myForm.age.value == "") {
alert("كتابة العمر ");
isValid = false;
}else if (document.myForm.age.value <=18) {
alert("لابد ان يكون العمر اكبر من 18 ");
isValid = false;
}
return isValid;
}
</script>



الكود الخاص بالتحقق

نبداء الشرح الكود:santa_1:


function validateMyForm ( )

في البداية عملنا دالة جديدة باسم : validateMyForm



var numericExpression = /^[0-9]+$/;
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
var isValid = true;


المتغبر الاول خاص لتاكد من قيمة الارقم اي الارقام الصحيحة من 0 -9
المتغير الثاني خاص باتحقق من البريد
المتغير الثالث يخزن قيمة :true OR false
والقيمة الافتراضية هي ترو

الان ركز معي في هذي الخطوه لا حظ الترتيب


document.myForm.name.value

المستند .اسم الفروم . اسم الحقل . القيمة

هذي طريقة للصوول الى القيمة العنصر داخل الفورم






if ( document.myForm.name.value == "" ) {
alert ( "حقل اسم المستخدم فارغ" );
isValid = false;
}


اذا كانت القيمة الخاصة بحقل الاسم داخل الفورم تساوي صفر او لا شي
اظهر الرسالة
وخزن في المتغير التالي خطا : isValid = false;




if ( document.myForm.name.value.length < 6 ) {
alert ( "لابد ان تكون عدد حروف الاسم اكثر من 6 احرف" );
isValid = false



اذا كانت طول القيمة الخاصة بحقل الاسم داخل الفروم اقل من6

اظهر الرسالة التالية

واجعل المتغير خطا




else if ( document.myForm.password.value != document.myForm.com_pass.value) {
alert ( "كلمة المرور غير متطابقة" );
isValid = false;
}



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

اذا كانت القيم غير متساوية نطبع الرسالة التالية






else if ( document.myForm.m_number.value != document.myForm.m_number.value.match(numericExpres sion) ) {
alert ( "حقل مخصصل للارقام فقط" );
isValid = false;
}



كود التاكد من الارقم

في هذا الكود نستخدم الدالة match
لعمل المقانة بين حقل رقم الجوال قيمة الارقم
var numericExpression)

ونقس الطريقة مع البريد لكن مع تغير
قيمة الدالة match
الى var emailExp





else if (document.myForm.age.value <=18) {
alert("لابد ان يكون العمر اكبر من 18 ");
isValid = false;
}




قيمة العمر

اذا كان يساوي او اصغر من 18

نطهر الخطا التالي

الان باقي نع اللمسات الاخيرة




<input name="bt" type="submit" id="bt" value="ارسال البيانات"
onclick="javascript:return validateMyForm();"/>



في حالة الظعط على الزر سوف نقوم باستدعاء الدالة

onclick



ان شا الله يكونالدرس مفهوم

كود كامل بالمرفقات

[shifk]

شكرا لك


لعبة جاتا (https://www.shifk.net/2013/09/gta-game.html)
لعبة سونيك (https://www.shifk.net/2013/09/sonic-game.html)
لعبة كراش (https://www.shifk.net/2013/09/game-crash.html)
لعبة مصارعة (https://www.shifk.net/2013/09/wrestling-game.html)


تحيتى لك

[DeveloperZ]

العفو لك