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

[said]

http://www.dzbatna.com/images/icons/iconrote.gif ط§ط³ظ‡ظ„ ظˆط§ظپط¶ظ„ ط·ط±ظٹظ‚ط© ظ„ظ„طھط*ظ‚ظ‚ ط¨ط§ط³طھط®ط¯ط§ظ… JS --validation (http://www.dzbatna.com/t2014346/)




السلام عليكم

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

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

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

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

رمز PHP:

<code style="white-space:nowrap"> <code> <form action="trdVai.php" method="post" enctype="multipart/form-data" name="myForm" id="myForm">
</form>
</code> </code>

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

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


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

رمز PHP:

<code style="white-space:nowrap"> <code> <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>
</code> </code>

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

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

كود code الجاف

رمز PHP:

<code style="white-space:nowrap"> <code>
<script type="text/javascript" language="javascript">

function validateMyForm ( ) {
var numericExpression = /^&#91;0-9&#93;+$/;
var emailExp = /^&#91;\w\-\.\+&#93;+\@&#91;a-zA-Z0-9\.\-&#93;+\.&#91;a-zA-z0-9&#93;{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>
</code> </code>

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

نبداء الشرح طريقة الكود codehttp://www.dzbatna.com/images/smilies/santa_1.gif

رمز Code:
function validateMyForm ( )
في البداية عملنا دالة جديدة باسم : validateMyForm

رمز Code:
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
والقيمة الافتراضية هي ترو

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

رمز Code:
document.myForm.name.value
المستند .اسم الفروم . اسم الحقل . القيمة

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



رمز Code:
if ( document.myForm.name.value == &quot;&quot; ) { alert ( &quot;حقل اسم المستخدم فارغ&quot; ); isValid = false; }
اذا كانت القيمة الخاصة بحقل الاسم داخل الفورم تساوي صفر او لا شي
اظهر الرسالة
وخزن في المتغير التالي خطا : isValid = false;

رمز Code:
if ( document.myForm.name.value.length < 6 ) { alert ( &quot;لابد ان تكون عدد حروف الاسم اكثر من 6 احرف&quot; ); isValid = false
اذا كانت طول القيمة الخاصة بحقل الاسم داخل الفروم اقل من6

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

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

رمز Code:
else if ( document.myForm.password.value != document.myForm.com_pass.value) { alert ( &quot;كلمة المرور غير متطابقة&quot; ); isValid = false; }
كود code التاكد من كلمة السر
نعمل مقارنة بين حقل كلمة المرور و حقل التاكيد

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



رمز Code:
else if ( document.myForm.m_number.value != document.myForm.m_number.value.match(numericExpres sion) ) { alert ( &quot;حقل مخصصل للارقام فقط&quot; ); isValid = false; }
كود code التاكد من الارقم

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

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





رمز Code:
else if (document.myForm.age.value <=18) { alert(&quot;لابد ان يكون العمر اكبر من 18 &quot;); isValid = false; }
قيمة العمر

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

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

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

رمز Code:
<input name=&quot;bt&quot; type=&quot;submit&quot; id=&quot;bt&quot; value=&quot;ارسال البيانات&quot; onclick=&quot;javascript:return validateMyForm();&quot;/>
في حالة الظعط على الزر سوف نقوم باستدعاء الدالة

onclick



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

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








التعديل الأخير كان بواسطة عاشق خيالك; 05 - 01 - 2014 الساعة 21:33

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)


الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif trdVai.zip (http://www.traidnt.net/vb/attachments/619509d1325788221-trdvai.zip) (1.2 كيلوبايت, عدد مرات المشاهدة 52 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©