فرض كنيد مواردي در فرم وجود دارد كه حتما بايد تكميل شود همان ند طرح ما كه موارد ستاره دار بايد تكميل مي شد حال اگر كاربري فراموش كرد يك قسمت را تكميل كند و فرم را ارسال كند چه اتفاقي خواهد افتاد خب فرم ابتدا به سرور رفته و در آنجا پردازش شده و پيغام خطا داده شده مجددا به سمت كاربر ارسال مي گردد
اين امر مدت زماني طول خواهد كشيد و هيچ چيز زجر آورتر از اين نيست كه پس از چند لحظه انتظار كاربر با پيغام خطا مواجه شود .پس ما بايد بتوانيم فرم را در همان كامپيوتر كاربر اعتبار سنجي كرده و كاربر را ياري دهيم تا فرم تكميل شده و بدن نقصي را به سرور ارسال كند كه اين كار از طريق جاوا اسكريپت انجام خواهد شد زيرا جاوا اسكريپت از جمله ، زبانهاي سمت كلاينت است كه مستقيما در كامپيوتر كاربر اجرا خواهد شد و زماني براي رفت و برگشت فرم به سرور و كاربر تلف نخواهد شد.
با استفاده از جاوا اسكريپت مي توان در صورتي كه كاربر فيلد ضروري را پر نكرده فرم را ارسال كند پيغام خطايي صادر كنيم تا كاربر متوجه اشتباه خود گردد و حتي فراتر مي توانيم كاري كنيم كه در كادرهاي مربوط به اعداد يا ايميل اگر موارد نادرست تايپ شد هم پيغام خطا صادر شود دريم ويور تمام اين اعمال را با چند كليك ساده برايتان انجام داده و كد م ورد نياز را توليد خواهد كرد و شما احتياجي به حتي يك خط كد نويسي هم نداريد پس شروع مي كنيم.
براي آغاز كار پانل Behaviors (رفتارها ) را باز كنيد براي اين كار گروه tag inspector را از گروه پانلها باز كرده و بر روي تب behaviors كليك كنيد تا باز شود
اگر هم اين گروه از پانلها را كلا بسته بوديد از طريق منوي window مي توانيد آن را فعال كنيد يا مستقيما از كليد ميانبر صفحه كليد استفاده shift+F3كنيد
پس از باز نمودن اين پانل در صفحه بر روي فيلدي كه مايليد عمليات تعيين اعتبار انجام گيرد كليك كنيد تا انتخاب شود حال به پانل behaviors نگاه كنيد.
اولا عنوان پالت به tag <input> تغيير يافته كه اين به معني انتخاب يك input يا كادر متني است در حال حاضر ۴ گزينه هم در اين پانل ظاهر شده است كه ما دراين قسمت فقط به گزينه onBlur كار داريم.
onBlur رويدادي است كه به ترك فيلد اش اره دارد ( ترك كردن فيلد مي تواند كليك بر روي فيلد ديگر يا زدن كليد باشد Tab) تا اكشن مورد نظر در اسكريپت اعمال شود در اين جا توضيحي در اين مورد بدهم كلا اسكريپتها زماني عمل مي كنند كه رويدادي رخ دهد كه اين رويداد مي تواند باز شدن پنجره ، بستن آن ، رد شدن ماوس از قسمتي ، كليك ماوس و نظائر اين را شامل مي شود يا اين گونه بگويم هر action براي event خاصي تعريف و عمل خواهد كرد كه در اين جا event همان رويدادها و action عكس العملي است تعريف شده در قبال آن رويداد در پنجره behaviors دو قسمت وجود دارد
قسمتي كه روي دادهاي خاص آبجكت منتخب را درج نموده ( در اين مورد ۴ رويداد براي كادرهاي متني درج شده ) شما اگر بر روي هر كدام از اين گزينه ها كليك كنيد آن كادر تبديل به يك منو مي شود كه مي توانيد رويداد مورد نظرتان را انتخاب كنيد.
قسمت دوم مربوط به عكس العملي است كه بر اي آن رويداد خاص بايد تعريف شود اين قسمت هم قابليت تبديل به منو را دارد مشروط به اين كه عكس العملهاي بيشتر از يكي براي همان رويداد در نظر گرفته شود البته مي توانيد در اين مورد خودتان مستقيما هم كد تايپ كنيد براي اين منظور در قسمت اكشن كليك كنيد تا تبديل به يك كادر متني شود
اما ما براي معتبر سازي احتياجي به تايپ كد نداريم همانطور كه فيلد مورد نظرتان انتخاب شده در اين پانل رويداد onBlur را انتخاب كرده و در سمت مقابل آن كليك كنيد تا كادر اكشن هم فعال شود ( همانند شكل بالا ) حال بر روي پيكان كوچك واقع در زير علامت + بالا كليك كنيد تا باز شود در اين ليست تعدادي از اكشنهاي متناسب با شي ء و رويداد انتخابي قابل دسترسي است از اين ليست گزينه validate form را انتخاب كنيد تا با كادر زير مواجه شويد.
در اين كادر نام فيد مورد نظر تان را انتخاب كنيد.با تيك زدن گزينه value required پر كردن آن فيلد الزامي خواهد شد يعني كاربر تا زماني كه اين فيلد را پر نكرده حق ترك آن را ندارد از قسمت accept نوع داده آن فيلد را مشخص كنيد اگر گزينه Email address را انتخاب كنيد اطلاعات ورودي كاربر بايد منطبق بر آدرسهاي ايميل باشد ( يعني وجود mailname @ mail server ضروري است )
اگر number را انتخاب كنيد كاربر فقط در اين فيلد حق تايپ اعداد را دارد و اگر هم number from را انتخاب كنيد كاربر مي بايست اعدادي را در فيلد وارد كند كه در محدوده اعداد منتخب شما باشد پس از اين انتخابها بر ر وي ok كليك كنيد تا دريم ويور عمليات اعتبار سنجي فيلد مورد نظرتان را با درج كدهاي متناسب تكميل كند.
به همين ترتيب ساير فيلدها را هم كه لازم مي دانيد اعتبار سنجي كنيد.
تغيير گزينه هاي فرم اعتبار سنجي شده
اگر شما يك فيلد را اعتبار سنجي نموديد و مايل بوديد گزينه هاي آن را تغيير دهيد نگاهي با پانل behaviors بيندازيد در اين جا در قسمت اكشن رويداد onBlur عبارت Validate Form درج شده كه به معني اين است كه اين فيلد قبلا اعتبار سنجي شده حال اگر بر روي همين قسمت اكشن دابل كليك كنيد باز كادر Validate Form ظاهر مي شود و شما مي توانيد گزينه هاي قبلي خود را ويرايش نمائييد
توضيحاتي پيرامون پانل behaviors
با نگاهي دوباره به اين پانل گزينه هايي كه در اين جا وجود دارد را برسي مي كنيم
آيكن اول show set events حالت نمايش رويدادها را مشخص مي كند كه در اين مورد تمام رويدادها در داخل منويي قرار مي گيرد كه شما بايد رويداد مورد نظرتان را از داخل اين منو انتخاب كنيد.
گزينه show all events همان حالتي بود كه تا بحال برسي كرديم يعني ليست تمام رويدادها را در اين پانل مي ديديم و براي تعريف اكشن در كادر روبروي آن كليك مي كرديم
آيكن بعد add behavior مي تواند رفتار جديدي تعريف كند كه در بالا با آن كار كرديم
آيكن remove event مي تواند اكشن يك رويداد را حذف كند كه با پاك شدن اكشن در حقيقت خود رويداد حذف شده آيكن انتهايي هم براي ترتيب اكشنها است در صورتي كه براي يك رويداد بيش از يك اكشن تعريف كرده باشيم.
دريم ويور مي تواند كدهاي جاوا اسكريپت را متناسب با نوع مرورگري كه شما براي آن طراحي مي كنيد ايجاد كند در حالت عادي تمام رويدادها بر مبناي اينترنت اكسپلورر ۳ در نظر گرفته شده اما اگر خواستيد كدهايتان را بر مبناي مرورگرهاي بالاتر ايجاد كنيد اين مسير را طي كنيد
از آيكن هاي بالاي پانل behaviors آيكن add behavior را كليك كرده و متعاقب آن بر روي گزينه show event for قرار بگيريد و از ليست مرورگرهاي آن مرورگر دلخواهتان را انتخاب كنيد
در حال حاضر شما مي توانيد براي مرورگر اينترنت اكسپلورر ۵,۵ كدهايتان را ايجاد كنيد و مطمئن باشيد ۹۵ درصد از بازديد كنندگانتان قادر به مشاهده صفحه تان آنطور كه شما طراحي كرده ايد هستند.
با انتخاب ورژن بالاتري از يك مرورگر ليست رويدادها در پانل behavior بيشتر شده و دست شما در طراحي بيشتر باز خواهد شد.
|