دوره مجازی جاوااسکریپت (جلسه 20): عبارت های منظم و اعتبارسنجی فرم ها



visibility  
mode_comment   ۳۴

یکی از مهم ترین مسائلی که با استفاده از زبان جاوااسکریپت در سمت وب قابل اجرا و پیاده سازی هست بحث اعتبار سنجی فرم ها هست. برای اعتبارسنجی فرم ها از دو روش می تونید استفاده کنید . در روش ابتدایی می تونید با چک کردن یک سری شرط های خاص داده ها رو از لحاظ اعتبار بررسی کنید که مشکلات و ضعف هایی داره. روش دیگه استفاده از عبارت های منظم یا همون regular expression ها هست که قدرت فوق العاده ای رو به برنامه نویس میده تا بتونه راحت الگوهایی رو تعریف کنه و اعتبارسنجی رو بر اساس اون انجام بده. جلسه امروز و ابتدای جلسه آینده به آموزش نحوه تعریف عبارت های منظم خواهیم پرداخت تا کاملا با اونها آشنا بشید.

مطالب مطرح شده در این جلسه عبارتند از :

  • مقدمه ای بر عبارت های منظم - regular expression
  • تعریف مفهوم عبارت های با قاعده و کاربردهای آن
  • مقایسه جستجوی دقیق و جستجوی الگوها و بیان مزیت کار با الگوها
  • آشنایی با syntax و قواعد نوشتاری عبارت های منظم در جاوااسکریپت
  • معرفی الگوها، اصلاح کننده ها و نشانگرهای تعداد
  • معرفی و نصب نرم افزار regexBody برای کار با عبارت های منظم
  • آشنایی با Modifire ها و کاربرد آنها در عبارت های منظم
  • آشنایی با نحوه نوشتن الگوهای مختلف
  • سینتکس ساده و پایه الگوها و تطبیق یک رشته مشخص
  • استفاده از wildcard ها و anchor ها
  • تطبیق ابتدا و انتهای خط
  • معرفی عملگرهای گروهبندی
  • معرفی  Quantifire ها و مشخص کننده های تعداد (+,*,? , min , max)
  • معرفی و آشنایی با بازه های کارکتری و تعین حروف مجاز در عمل تطبیق
  • scape کردن کاراکترهای خاص در الگوها
  • آشنایی با عمل Back-referencing و استفاده های جالب آن
  • نمایش بعضی از کاربردهای عبارت های منظم در جایگزینی متن ها
info توجه

این مطلب یک جلسه از آموزش جاوا اسکریپت حرفه ای می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش جاوا اسکریپت حرفه ای

comment دیدگاه کاربران
mehdi karimi replyپاسخ

سلام
استاد آوند یعنی برای اعتبار سنجی فرم ها حتما باید از این ابزار استفاده کنیم ؟ و نمیتونیم تو همون phpstorm کد نویسی رو انجام بدیم ؟

لقمان آوند

آقا مهدی این RegexBuddy رو فقط برای بحثای آموزشی استفاده کردیم که شما خیلی سریع و خوب ببینید الگوها چه بخش هایی رو پیدا می کنن! ما تو برنامه نویسی تحت وب کاری به این ابزار نداریم.
در جلسه آینده خواهید دید که به چه شکل با کدهای جاوااسکریپت میشه از regex ها استفاده کرد برای اعتبار سنجی …

mehdi karimi

من تازه اول ویدیو رو دیده بودم عجله کردم یه مقدار ، مرسی حله 😀

hassani replyپاسخ

من قبلا دنبال این pattern ها بودم ولی همیشه کدهای آماده رو ارایه میدادن خیلی دوست داشتم بدونم که چطور خودم میتونم این الگوها رو بنویسم.ممنونم ازتون
فقط یه نکته رو بگم که در آخر آموزش توی php storm اون قسمتی رو که شما بهش اشاره کردین مربوط میشد به پیدا کردن یک عبارت در سورس کد وبرای دسترسی به قسمت replace باید از منوی view تیک گزینه toolbar رو بزنید و فعالش کنید تا ابزار replace رو به شکل یه ذره بین با حرف A به شما نشون بده. ,و یا اینکه ctrl+r رو بزنید. 😉

لقمان آوند

ممنون

hassani

سلام
کد زیر که در جاوااسکریپت داشتیم رو باید با چه کدی در جی کویری جایگزین کنیم؟


با کد زیر نمیشد:

کیوان علی محمدی


$("#result").val($("#result").val()+'.');

hassani

ممنونم ازتون

hassani

سلام
ببخشید چطوری با جاوااسکریپت میتونم بگم که اگر محتوای یک برچسب بیشتر از عرضش شد مثلا فلان اتفاق بیفته؟
یه سوال دیگه اینکه در سایت w3schools قسمت توضیحات متد replace به صورت زیر مثال زده:


میدونم که با این کد تمام کلمه های blue که در str آمده به کلمه red تغییر پیدا میکنه ولی اگه امکانش هست درمورد تکه کد /blue/gi توضیح کامل بدین که کارش به چه صورته و اگر به این صورت باشه چطور: blue/gi
تشکر

لقمان آوند

مگه این جلسه رو ندیدی؟ تابع replace به عنوان پارامتر اول می تونه یه regex بگیره و پارامتر دوم رو با همه چیزهایی که با اون مچ میشه جایگزین کنه. regex مذکور خیلی سادست و تمامی کلامات blue در سراسر str رو پیدا می کنه و با red جایگزین میکنه. اگه این جلسه رو دیده باشی باید بدونی که پترن ما اینجا blue هست و modifire ها هم i و g هستند که تو همین جلسه گفتیم چی هستند.
البته ناگفته نمونه ابتدای جلسه آینده در مورد توابع جاوااسکریپتی که با regex ها کار می کنن و مینی پروژمون صحبت می کنیم !

hassani

ای وای درست میگین.ببخشید اصلا حواسم نبود.
سوال اولم رو راهنمایی نمیکنین؟

لقمان آوند

ببخشید منظورتو از سوال اول متوجه نشدم
میشه دقیقتر بگی چی میخوای؟

hassani

چطوری با جاوااسکریپت میتونم بگم که اگر محتوای یک برچسب بیشتر از عرضش شد مثلا فلان اتفاق بیفته؟

لقمان آوند

اینو که همونجا هم گفتی! منظورت از برچسب چیه ؟ و چه محتوایی رو میگی ؟

hassani

ببینید یه div داریم با عرض 200px و ارتفاع 30px .حالا کاربر با فشردن کلیدهای کیبورد میتونه کاراکترهایی رو به عنوان محتوا در این برچسب div وارد کنه من میخوام وقتی محتوایی که کاربر وارد میکنه مقدارش اونقدر زیاد شد که از کادر div بیرون زد یه تیکه کد اجرا بشه تا محتوای خارج از محدوده div نمایش داده نشه و به کاربر یه علامت بده که مثلا محتوا بیشتر از محدوده کادر هست.این نکته هم مهمه که محتوای اضافی به div اضافه میشن ولی فقط نمایش داده نمیشن.در ضمن استفاده از overflow هم به تنهایی کارساز نیست.مشکل من اینه که با جاوااسکریپت چطور بگم وقتی محتوا از حد تعیین شده بیشتر شد…
نمیدونم بالاخره متوجه شدید یا باید خودمو به کشتن بدم. 😀 😀 😀

لقمان آوند

می تونی بررسی کنی و در هر سطر div تعداد کاراکتر خاصی رو مجاز بدونی و بعد از اون br اضافه کنی به محتوا. مثلا هر 70 کاراکتر یه تگ br اضافه کنی. به شرطی که وسط کلمه برش ندی !
عرض متن درون یک دایو رو با همین تعداد کاراکترهاش می تونی بدست بیاری تقریبا …
قشنگ بگو تگ html به جای برچست که مبهم نباشه! داری کتاب فارسی می خونی حتما …

hassani

در عبارت زیر اگر بخوایم فقط کاراکتر اسلشی که دو طرفش عدد هست رو بهش دسترسی داشته باشیم باید پترن ما چطور باشه؟
we love 7learn, javascript and 2/3 jquery 2 / 3
/
البته دوطرف اسلش فقط عدد باشه نه space.
ببخشید که تعداد سوالام داره زیاد میشه. 🙁 🙁 🙁

لقمان آوند

اینو امتحان کن :
/\d\/\d/

hassani

اینو که خودمم میدونستم ولی من فقط میخوام اون اسلش انتخاب بشه با این کد کل عبارت 2/3 انتخاب میشه.

لقمان آوند

اینکه بخوای چک کنی قبل و بعد یه چیزی که میخوای رشته ی خاصی وجود داشته باشه تو regex معرفه به lookbehind و lookahead ! تو جاوااسکریپت lookbehind ساپورت نمیشه . یعنی نمی تونی بگی مثلا یه کاراکتری رو می خوام که قبلش اسلش بوده. (البته ترفندهایی وجود داره) . ولی برای lookahead پشتیبانی می کنه. یعنی می تونی بگی مثلا اسلشی رو می خوام که یه رقم بعدش باشه (بدون اینکه خود رقم تو نتیجه باشه). که کدش اینطوریه : (=؟ علامت lookahead (نگاه به جلو!) هست !)
\/(?=\d)
برای اون ترفندی که بهت گفتم برای lookbehind دو روز می سپرم به خودت! تمرین ;D . باید با کمی کدهای جاوااسکریپت و استفاده از پرانتز و همون بحث شماره گزاری پرانتزها و … استفاده کنی تا اسلشی رو برگردونی که دو تا عدد احاطش کردن !

hassani

سلامی دوباره اگه میشه اینایی رو که گفتین خودتون توی جلسه بعد اموزش بدین باور کنین موخم داغ کرده دیگه دارم شیوه کدنویسی جدیدی رو اختراع میکنم 😀
چطور از regexها در دستورات شرطی استفاده کنیم؟
اصلا میتونیم در چه دستورهایی به کار بگیریم؟
چطور بگم اگر تعداد کارکتر در یک خط یک تگ بیشتر از nتا شد به آخر همون خط یه br اضافه کن؟
چطور بگم که وقتی br رو اضافه میکنه کلمه آخر رو نشکن؟
و برای lookbehind هم نشد هر کاری کردم.
البته کار من با همون lookahead راه افتاد و برای محدودیت در تگ div هم از length استفاده کردم و بازم کارم راه افتاد.
اگه میشه درمورد نحوه به کارگیری regex ها و اینکه کجاها میتونیم و باید از ش استفاده کنیم توضیح بیشتر و مثالهای کاربردی تری بزنید.

لقمان آوند

عرض کردم بخشی از مبحث regex مونده که تو جلسه بعد بهش میپردازیم. ایشالله همین هفته منتشر میشه. بعد از اون اگر سوالی در این مورد باقی بود بپرسید. سعی می کنیم این موارد رو آموزش بدیم توش.

مجتبی

😆 اذیـــــــت میـــــکــــونـــــی…؟؟؟؟

hassani

سلام آقای آوند.
از بزرگی مشکل شما و بیماری که درگیر دوا و درمانش هستین خبر ندارم. فقط اینو میدونم که مشکلتون اونقدر بزرگه که شما رو یه مدت از سون لرن که با شور و شوق و علاقه زیاد در اون فعالیت میکردین دور کرده.امیدوارم مشکلات شما هرچه زودتر برطرف بشه تا شما دوباره بتونین آموزش های ارزان ولی پرمحتوا و با کیفیت تون رو در سون لرن برای ما قرار بدین.
در ضمن من توی این مدت که جلسه جدیدی نداشتیم سعی کردم روی پروژه هایی که قبلا دوست داشتم با جاوااسکریپت و جی کویری انجام بدم کار کنم.مثلا اون ماشین حسابی که طراحی کرده بودم نقص های زیادی داشت که دارم سعی میکنم اونا رو برطرف کنم.
به دوستان دیگه هم توصیه میکنم فقط به دیدن آموزش های ویدیویی اکتفا نکنن و از هر فرصتی برای تمرین بیشتر استفاده کنن.اینطوری اگر وقفه ای هم در آموزش ها پیش بیاد کسی ضرر نمیکنه .
با تشکر از سون لرن

وحید صالحی

ممنون از درک و لطف شما

mehdi karimi replyپاسخ

سلام ، استاد آوند لطفا در مورد easing ها در جلسات بعدی بیشتر توضیح بدید و مثال های کاربردی ازشون بزنید
ممنون

فرهاد replyپاسخ

خسته نباشید استاد. ببخشید میشه درون عبارت های منظم از پزانتز های تو در تو استفاده کرد؟ من مشکلم اینجاست که می خوام عبارت منظم عباراتی رو برگردونه که 3 یا 5 بار از محتوای داخل یک پرانتز رو تکرار کرده باشن. من به این صورت نوشتم ولی کار نکرد.

لقمان آوند

بله میشه و اشکالی نداره

فرهاد

ممنون استاد فقط وقتی که پرانتزهای تو در تو استفاده کنیم چطور باید از back reference ها برای دسترسی به پرانتزهای داخلی استفاده کنیم؟
با تشکر از وقتی که می ذارید

لقمان آوند

ترتیب شروع پرانتزها رو در نظر بگیرید و شماره گزاری کنید.

مجید زارعی هوشیار replyپاسخ

سلام آقای آوند خسته نباشید ….عالی بووووووود……….خیلی وقهت بود واسم سوال چطوری وقتی تو یه سایتی ثبت نام میکنی از ایمیل ایراد میگیره……..پیش خودم فک میکردم یه ایمیل میزنه به yahoomail بد از سرور اونا ج میاد که همچین ایمیلی وجود دارد یانه بد میفهمه که ایمیل اشتباهی وارد کردیم.. 😆 😆 😆 😆 ….الان به فک میکنم به این نتیجه میرسم چقدر مسخره فک میکردم…..بحث خیلی خوبی بود …..واقعا خسته هم نباشید………..
فقط یه سوال دارم اونم این است که آیا استفاده بیش از حد ازاین الگوها آیا تاثیری براجرای کدها از لحاظ سرعت داره؟….

لقمان آوند

سلام و ممنون
در حد عرف اگه استفاده کنید مشکلی نداره. مثلا 10-20 تا هم که تو یه صفحه بخواید استفاده کنید مشکلی نداره. چون معمولا همه پترن ها با هم فعال نیستند و بر اساس رخداد یه event فعال میشن.

MRZ65 replyپاسخ

با اجازه استاد آوند.وقتی نرم افزار regexBody را نصب کردید در منوی کشویی List All گزینه line by line را انتخاب کنید تا نویسه های ^ , $ را بتونید در الگوها Match کنید.(بطور پیش فرض گزینه whole file ست شده است) 😉

لقمان آوند

خواهش می کنم
نکته خوبی رو ذکر کردید…

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.