نحوه اعتبار سنجی فرم های HTML با استفاده از عبارات منظم

عبارات منظم یک ابزار تطبیق الگوی قدرتمند و همه کاره است. دریابید که چگونه آنها می توانند اعتبارسنجی فرم شما را ساده کنند.

هر توسعه‌دهنده وب این احساس را می‌داند: شما یک فرم ساخته‌اید، و وقتی متوجه می‌شوید که اکنون باید هر فیلد را تأیید کنید، ناله می‌کنید.

خوشبختانه، اعتبار سنجی فرم نباید دردناک باشد. شما می توانید از عبارات منظم برای رسیدگی به بسیاری از نیازهای اعتبارسنجی رایج استفاده کنید.

عبارات با قاعده چیست؟

عبارات منظم الگوهایی را توصیف می کنند که با ترکیب کاراکترها در رشته ها مطابقت دارند. می توانید از آنها برای نمایش مفاهیمی مانند “فقط اعداد” یا “دقیقا پنج حرف بزرگ” استفاده کنید.

عبارات منظم (که regex نیز نامیده می شود) ابزار قدرتمندی هستند. آنها کاربردهای زیادی دارند، از جمله عملیات جستجوی پیشرفته، یافتن و جایگزینی و اعتبارسنجی روی رشته ها. یکی از کاربردهای معروف عبارات منظم دستور grep در لینوکس است.

چرا از عبارات منظم برای اعتبار سنجی استفاده می کنیم؟

راه‌های زیادی برای اعتبارسنجی ورودی فرم وجود دارد، اما عبارات منظم برای استفاده ساده، سریع و راحت هستند، اگر بدانید چطور.

جاوا اسکریپت از عبارات منظم پشتیبانی می کند. این بدان معناست که استفاده از آنها برای اعتبار سنجی بر خلاف یک کتابخانه خارجی کمک می کند تا اندازه برنامه وب شما تا حد امکان کوچک باشد.

عبارات منظم همچنین می توانند انواع مختلفی از ورودی فرم را تأیید کنند.

مبانی عبارات منظم

عبارات منظم از نمادهایی تشکیل شده است که الگوهای تشکیل شده توسط کاراکترهای یک رشته را توصیف می کنند. در جاوا اسکریپت، می توانید یک عبارت منظم را با نوشتن آن بین دو اسلش رو به جلو ایجاد کنید. ساده ترین شکل یک عبارت منظم به صورت زیر است:

/abc/

عبارت منظم بالا با هر رشته ای که شامل کاراکترهای “a”، “b” و “c” به ترتیب متوالی است مطابقت دارد. رشته “abc” با عبارت منظم و همچنین رشته ای مانند “abcdef” مطابقت دارد.

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

می توانید از آنها برای تعیین اینکه بخشی از الگو باید تعداد معینی بار تکرار شود یا برای نشان دادن اختیاری بودن برخی از الگوها استفاده کنید.

نمونه ای از یک کاراکتر خاص “*” است. کاراکتر “*” یک نویسه یا گروهی از کاراکترها را که قبل از آن آمده اند تغییر می دهد. اعلام می کند که آن شخصیت ها ممکن است غایب باشند یا ممکن است خود را هر چند بار پشت سر هم تکرار کنند. مثلا:

/abc*/

“ab” به دنبال هر تعداد کاراکتر “c” مطابقت دارد. رشته “ab” یک مثال معتبر از آن الگو است، زیرا کاراکتر “c” اختیاری است. رشته های “abc” و “abccccc” به یک اندازه معتبر هستند، زیرا “*” به این معنی است که “c” می تواند هر تعداد بار تکرار شود.

نحو کامل regex از چندین کاراکتر الگوی دیگر برای توصیف تطابقات احتمالی استفاده می کند. می توانید از دوره تعاملی Regex 101 regexlearn.com بیشتر بیاموزید. راهنمای جاوا اسکریپت MDN نیز بسیار مفید است.

اعتبار سنجی فرم با عبارات منظم

شما می توانید از regex برای اعتبارسنجی ورودی فرم به چند روش استفاده کنید. اولین راه استفاده از جاوا اسکریپت است. این شامل چند مرحله است:

1. مقدار ورودی فرم را دریافت کنید.
2. بررسی کنید که آیا مقدار ورودی با عبارت منظم مطابقت دارد یا خیر.
3. اگر اینطور نیست، به کاربر وب سایت نشان دهید که مقدار فیلد ورودی نامعتبر است.

در اینجا یک مثال کوتاه است. با دادن یک فیلد ورودی مانند این:

<input placeholder="Input field">

شما می توانید یک تابع برای اعتبار سنجی به این صورت بنویسید:

function validate() {
    let value = document.querySelector("input").value;
    const regEx = /^.{3,7}$/;
    return regEx.test(value);
}

راه دیگر استفاده از قابلیت های اعتبارسنجی فرم HTML مرورگر است. چگونه؟ با تعیین regex به عنوان مقدار ویژگی الگوی تگ ورودی HTML.

ویژگی الگو فقط برای انواع ورودی زیر معتبر است: متن، تلفن، ایمیل، آدرس اینترنتی، رمز عبور و جستجو.

در اینجا یک مثال با استفاده از ویژگی الگو آورده شده است:

<form>
    <input placeholder="Input field" required pattern="/^.{3,7}$/">
    <button>Submit</button>
</form>

اگر فرم را ارسال کنید و مقدار ورودی با کل regex مطابقت نداشته باشد، فرم یک خطای پیش‌فرض را نمایش می‌دهد که به شکل زیر است:

اگر عبارت منظم ارائه شده به ویژگی الگو نامعتبر باشد، مرورگر این ویژگی را نادیده می گیرد.

الگوهای Regex رایج برای اعتبار سنجی فرم

ساختن و اشکال زدایی regex از ابتدا ممکن است کمی طول بکشد. در اینجا برخی از دستورات regex وجود دارد که می توانید از آنها برای تأیید اعتبار برخی از رایج ترین انواع داده های فرم استفاده کنید.

عبارت منظم برای اعتبارسنجی طول رشته

یکی از رایج ترین الزامات اعتبار سنجی، محدودیت در طول یک رشته است. عبارت منظمی که با یک رشته هفت نویسه مطابقت دارد این است:

/^.{7}$/

“.” یک مکان نگهدار است که با هر کاراکتری مطابقت دارد و “7” در براکت های فرفری محدودیت طول رشته را مشخص می کند. اگر لازم بود رشته در محدوده مشخصی از طول باشد، مثلاً بین سه تا هفت، عبارت منظم به این شکل خواهد بود:

/^.{3,7}$/

و اگر لازم باشد که رشته حداقل سه کاراکتر داشته باشد و محدودیت بالایی نداشته باشد، به شکل زیر خواهد بود:

/^.{3,}$/

بعید است که طول تنها شرط اعتبارسنجی برای ورودی فرم باشد. اما شما اغلب از آن به عنوان بخشی از یک عبارت منظم پیچیده تر از جمله شرایط دیگر استفاده می کنید.

عبارت منظم برای اعتبارسنجی فیلدهای فقط حروف

برخی از ورودی های فرم برای معتبر بودن نیاز به چیزی جز حروف ندارند. عبارت منظم زیر فقط با این رشته ها مطابقت دارد:

/^[a-zA-Z]+$/

این عبارت منظم مجموعه ای از کاراکترها را مشخص می کند که از کل الفبا تشکیل شده است. کاراکتر ویژه “+” به این معنی است که نویسه قبلی باید حداقل یک بار و بدون محدودیت بالایی رخ دهد.

عبارت منظم برای اعتبارسنجی فیلدهای فقط عددی

عبارت منظم زیر فقط با رشته هایی که کاملاً از ارقام تشکیل شده اند مطابقت دارد:

/^\d+$/

عبارت منظم بالا اساساً همان عبارت قبلی است. تنها تفاوت این است که از یک کاراکتر ویژه “\d” برای نشان دادن محدوده ارقام به جای نوشتن آنها استفاده می کند.

عبارت منظم برای اعتبارسنجی فیلدهای الفبایی

عبارات منظم اعتبار فیلدهای الفبایی عددی را نیز آسان می کند. در اینجا یک عبارت منظم وجود دارد که فقط با رشته های تشکیل شده از حروف و اعداد مطابقت دارد:

/^[a-zA-Z\d]+$/

برخی از فیلدها حروف عددی هستند، اما به چند کاراکتر دیگر مانند خط فاصله و زیرخط اجازه می دهند. یک نمونه از این فیلدها نام کاربری است. در زیر یک عبارت منظم وجود دارد که با رشته ای متشکل از حروف، اعداد، زیرخط و خط فاصله مطابقت دارد:

/^(\w|-)+$/

کاراکتر ویژه “\w” با کل کلاس کاراکترها مطابقت دارد، مانند “\d”. محدوده حروف الفبا، اعداد و کاراکتر زیرخط (“_”) را نشان می دهد.

عبارت منظم برای اعتبارسنجی شماره تلفن

یک شماره تلفن می‌تواند یک فیلد پیچیده برای تأیید اعتبار باشد زیرا کشورهای مختلف از قالب‌های متفاوتی استفاده می‌کنند. یک رویکرد بسیار کلی این است که اطمینان حاصل شود که رشته فقط دارای اعداد است و طول آن در محدوده خاصی است:

/^\d{9,15}$/

یک رویکرد پیچیده‌تر ممکن است شبیه این باشد که از MDN گرفته شده است، که شماره‌های تلفن را در قالب ###-###-#### تأیید می‌کند:

/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/

عبارت منظم برای اعتبارسنجی تاریخ ها

مانند شماره تلفن، تاریخ ها نیز می توانند چندین فرمت داشته باشند. تاریخ ها معمولاً نسبت به شماره تلفن پیچیده تر از اعتبارسنجی هستند. چرا؟ تاریخ ها هیچ کاراکتری به جز رقم و خط فاصله ندارند.

در اینجا مثالی وجود دارد که تاریخ‌های قالب «DD-MM-YYYY» را تأیید می‌کند.

/^\d{2}-\d{2}-\d{4}$/

اعتبارسنجی با Regex آسان است

عبارات منظم الگوهایی را توصیف می کنند که با ترکیب کاراکترها در رشته ها مطابقت دارند. آنها برنامه های متنوعی دارند، مانند اعتبارسنجی ورودی کاربر از فرم های HTML.

می توانید از regex برای اعتبارسنجی با جاوا اسکریپت یا از طریق ویژگی الگوی HTML استفاده کنید. ساخت عبارات منظم برای اعتبارسنجی انواع رایج ورودی های فرم مانند تاریخ ها و نام های کاربری آسان است.

منبع مقاله