چگونه به کمک javascript به کاربر اجازه ندهیم حروف خاصی را در یک فیلد وارد کند؟
اگر در صفحه وب خود یک فرم داشته باشید، احتمالاً برخی از فیلدهای فرم، شرایط خاصی خواهند داشت.
مثلاً شاید بخواهید در فیلد نام کاربری یا ایمیل به کاربر اجازه ندهید که حروف فارسی را وارد کند.
یا مثلاً در فیلد نام و نام خانوادگی اجازه ندهید عدد وارد کند.
برای این کار در سمت کلاینت یعنی در لحظهای که کاربر در حال پر کردن فرم است، طبیعتاً بهترین حالت استفاده از جاوااسکریپت است.
با یک قطعه کد ساده میتوانید این کار را انجام دهید.
ابتدا به صفحه زیر رفته و خروجی را تست کنید تا متوجه شوید کد چه کار خواهد کرد:
http://tutorials.aftab.cc/web_designing/javascript/forbidden_characters/index.html
برای اینکه کدها را برای خودتان داشته باشید، روی لینک بالا کلیک راست کنید و Save Target/Link As را انتخاب کنید و فایل ذخیره شده را با NotePad باز کنید.
حالا به کد این صفحه وب که در زیر آمده دقت کنید:
الگوریتم کار به صورت زیر است:
- ابتدا یک آرایه تعریف کردهام و حروف غیرمجاز را در آن ریختهام. (شماره 1 در تصویر بالا) شما میتوانید این حروف را به همین ترتیب گسترش دهید... مثلاً تمام حروف الفبا را یکی یکی اضافه کنید. فقط دور هر کدام، دابل کوتیشن و بین هر کدام یک کاما فراموش نشود.
- سپس در فرمی که روی صفحه دارم، از رخداد onKeyUp استفاده کردهام تا هر بار که کلیدی فشرده میشود، تابع مربوط به چک کردن حروف غیرمجاز فراخوانی شود. (شماره 2 در تصویر بالا)
- در تابع check ابتدا مقدار فیلد t را گرفتهام و در متغیر text ریختهام. سپس با تابع substr، آخرین کاراکتر را جدا کردهام (شماره 3 در تصویر بالا) تا بررسی شود که اگر مجاز نیست، پاک شود.
- سپس کاراکتری که جدا شده را با یک حلقه for با عناصر آرایه مقایسه کردهام که اگر آن کاراکتر مساوی با یکی از عناصر آرایه بود (یعنی اگر آن کاراکتر غیرمجاز بود) مقدار فیلد t برابر میشود با کل رشته منهای آخرین کاراکتر که غیرمجاز است. (شماره 4 در تصویر بالا)
همین!
با همین کد ساده میتوانید هر کاراکتر غیرمجازی که میخواهید را از رشته حذف کنید و اجازه وارد کردن ندهید.
در هنگام استفاده از این فطعه کد، به id مربوط به فرم و فیلد دقت کنید. اگر آنها را تغییر میدهید و نام جدیدی در نظر میگیرید، باید در کد جاوااسکریپت نیز آنها را به نامهای جدید تغییر دهید.
یک نکته خیلی حرفهای: دقت کنید که این نوع بررسی، درست است که کاربر را راهنمایی میکند که چه کار کند، اما اصل ماجرا چک کردن حروف غیرمجاز، قبل از ثبت در دیتابیس و یا پردازش روی رشته است. یعنی در کارهای بسیار حرفهای و امنیتی، شما نباید به همین مرحله اکتفا کنید، بلکه باید هنگامی که رشته را از فیلد گرفتید، قبل از ثبت در دیتابیس نیز یک بار چک کنید... دلیل آن هم واضح است! ممکن است یک کاربر زرنگ، خودش یک فرم طراحی کند و دادهها را به سایت شما بفرستد! او میتواند روی فرم خود جاوااسکریپت را پاک کند و هر کاراکتری که خواست وارد آن فیلد کند و یا اینکه کلاً در مرورگرش جاوااسکریپت را غیرفعال کند! بنابراین، فرم شما دیگر کاراکترهای غیرمجاز را پاک نمیکند. اما اگر شما پاتک بزنید و در سمت سرور نیز با توابعی مثل preg_match در PHP، چک کنید، میتوانید کاراکتر غیرمجاز را بیابید و اگر وجود داشت، دادهها را دوباره به کاربر برگردانید و هشدارهای لازم را نیز به او بدهید. البته 99 درصد کاربران اینقدرها زرنگ نیستند، اما به هر حال، باید از همان یک درصد بترسید...
موفق باشید؛
حمید رضا نیرومند
.
- مطالب مرتبط:
- مجموعه كدهای زیبای جاوا همراه با امكان تست آفلاین
- چگونه با جاوا اسکریپت، ساعت سرور را نمایش دهیم؟ (How to show server time with javascript)
- شخصی برای خوش آمدگویی به بازدیدكنندگان سایت یا وبلاگ شما!
- 10 کد جاوا اسکریپت برتر طراحی popup در حالات مختلف
- آموزش ساخت Infobar (نوار پیغام) در بالای وبلاگ و وبسایت
- ایجاد اسکرول بارهایی با رنگها و شمایل مختلف تنها با چند کلیک موس! (معرفی Yaldex Colored ScrollBars 2.0)
- ------------
- چگونه یک آیکون در کنار اسم سایتمان در مرورگر کاربر نمایش دهیم؟
- چگونه یک عکس را در فتوشاپ، برای وب ذخیره کنیم؟ (آموزش save for web در فتوشاپ)
- چگونه دسترسی یک برنامه را به اینترنت در ویندوز 7 یا ویندوز 8 قطع کنیم؟
- چگونه در اکسل با معیار خاصی عمل Sort را انجام دهیم (مثلاً ترتیب حروف الفبا را تغییر دهیم)
- در اکسس چگونه بخشی از یک فیلد را از کاربر بگیریم و مشابهات آن (LIKE) را جستجو کنیم؟
ارسال سؤال یا نظر
1- دیجی سعید خان:
بوسیله: , در: Monday, 2011 December 19-کد: 3739
سلام
کد یه مشکل داره
اونم اینه که اگه دستتو بزاری رو 3 و نگه داری هر چند تا بخای می ذاره یا حتی با کپی و پیست کردن هم میذاره
در کل درسته ولی روش بررسیش اشتباهه
بازم تشکر
2- فرشيد:
بوسیله: , در: Wednesday, 2012 December 05-کد: 5537
با سلام عالي ممنون از لطفتون
3- فروش قطعات کامپیوتر با پست:
بوسیله: , در: Sunday, 2013 January 20-کد: 5999