شرح وافي لطالبات جامعة ام القرى لطريقه كتابه كود كلمه السر والتحقق منه وتطابق الكود

السلام عليكم

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

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

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

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

رمز PHP:<form action="trdVai.php" method="post" enctype="multipart/form-data" name="myForm" id="myForm">
</form>

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

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

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

رمز PHP:<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

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

كود الجاف

رمز PHP:
<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(numericExpression) ) {
            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:

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 == "" ) { alert ( "حقل اسم المستخدم فارغ" ); isValid = false; }

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

رمز Code:

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

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

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

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

رمز Code:

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

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

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

رمز Code:

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

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

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

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

رمز Code:

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

قيمة العمر

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

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

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

رمز Code:

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

onclick

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

المصدر: من كتب برمجة الجافا اسكريبت بجامعه دمياط

التحميلات المرفقة

trdVai.zip