چگونه به کمک javascript به کاربر اجازه ندهیم حروف خاصی را در یک فیلد وارد کند؟

Thursday, 2011 March 31 نویسنده: Hamid تعداد بازدید: 10886 بار #آموزش جاوا اسکریپت - Java Script‏ امتیاز متوسط: امتیازی داده نشده است

اگر در صفحه وب خود یک فرم داشته باشید، احتمالاً برخی از فیلدهای فرم، شرایط خاصی خواهند داشت.

مثلاً شاید بخواهید در فیلد نام کاربری یا ایمیل به کاربر اجازه ندهید که حروف فارسی را وارد کند.

یا مثلاً در فیلد نام و نام خانوادگی اجازه ندهید عدد وارد کند.

برای این کار در سمت کلاینت یعنی در لحظه‌ای که کاربر در حال پر کردن فرم است، طبیعتاً بهترین حالت استفاده از جاوااسکریپت است.

با یک قطعه کد ساده می‌توانید این کار را انجام دهید.

ابتدا به صفحه زیر رفته و خروجی را تست کنید تا متوجه شوید کد چه کار خواهد کرد:

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 درصد کاربران اینقدرها زرنگ نیستند، اما به هر حال، باید از همان یک درصد بترسید...

موفق باشید؛
حمید رضا نیرومند

ارسال سؤال یا نظر

1- دیجی سعید خان:
بوسیله: , در: Monday, 2011 December 19-کد: 3739
سلام
کد یه مشکل داره
اونم اینه که اگه دستتو بزاری رو 3 و نگه داری هر چند تا بخای می ذاره یا حتی با کپی و پیست کردن هم میذاره

در کل درسته ولی روش بررسیش اشتباهه

بازم تشکر

2- فرشيد:
بوسیله: , در: Wednesday, 2012 December 05-کد: 5537
با سلام عالي ممنون از لطفتون

3- فروش قطعات کامپیوتر با پست:
بوسیله: , در: Sunday, 2013 January 20-کد: 5999