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

ایجاد فرم‌های وب همیشه یک کار پیچیده بوده است. در حالی که نشانه‌گذاری خود فرم آسان است، بررسی اینکه آیا هر فیلد دارای مقدار معتبر و منسجمی است یا خیر، دشوارتر است و اطلاع‌رسانی به کاربر در مورد مشکل ممکن است به یک سردرد تبدیل شود. HTML5 مکانیسم‌های جدیدی را برای فرم‌ها معرفی کرد: انواع معنایی جدیدی را برای عنصر <input> و اعتبارسنجی محدودیت اضافه کرد تا کار بررسی محتوای فرم در سمت کلاینت را آسان‌تر کند. محدودیت‌های اساسی و معمول را می‌توان بدون نیاز به جاوا اسکریپت، با تنظیم ویژگی‌های جدید بررسی کرد. محدودیت‌های پیچیده‌تر را می‌توان با استفاده از API اعتبارسنجی محدودیت آزمایش کرد.

اعتبارسنجی قید HTML نیاز به اعتبارسنجی در سمت سرور را از بین نمی‌برد. اگرچه انتظار می‌رود درخواست‌های نامعتبر فرم بسیار کمتری ارسال شوند، اما همچنان می‌توان درخواست‌های نامعتبر را از طرق مختلف ارسال کرد: - با تغییر HTML از طریق ابزارهای توسعه‌دهنده مرورگر. - با ساخت دستی یک درخواست HTTP بدون استفاده از فرم. - با نوشتن محتوا در فرم به صورت برنامه‌نویسی (اعتبارسنجی‌های قید خاص فقط برای ورودی کاربر اجرا می‌شوند و اگر مقدار یک فیلد فرم را با استفاده از جاوا اسکریپت تنظیم کنید، اجرا نمی‌شوند). بنابراین، همیشه باید داده‌های فرم را در سمت سرور، مطابق با آنچه در سمت کلاینت انجام می‌شود، اعتبارسنجی کنید.

محدودیت‌های ذاتی و اساسی

در HTML، محدودیت‌های اساسی به دو روش تعریف می‌شوند: - با انتخاب مناسب‌ترین مقدار از نظر معنایی برای ویژگی type عنصر ، مثلاً انتخاب نوع ایمیل، به طور خودکار محدودیتی ایجاد می‌کند که بررسی می‌کند آیا مقدار، یک آدرس ایمیل معتبر است یا خیر. - با تنظیم مقادیر روی ویژگی‌های مرتبط با اعتبارسنجی، امکان توصیف محدودیت‌های اساسی بدون نیاز به جاوا اسکریپت فراهم می‌شود.

انواع input معنایی

محدودیت‌های ذاتی برای ویژگی type عبارتند از:

نوع اینپوت	شرح محدودیت
<input type="URL">	مقدار باید یک URL مطلق باشد،
<input type="email">	این مقدار باید یک آدرس ایمیل معتبر از نظر نحوی باشد که عموماً فرمت آن username@hostname.tld است، اما می‌تواند به صورت محلی مانند username@hostname نیز باشد.

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

ویژگی	انواع ورودی که از ویژگی پشتیبانی می‌کنند	مقادیر ممکن	شرح محدودیت
pattern	text, search, url, tel, email, password	یک عبارت منظم جاوا اسکریپت (کامپایل شده با غیرفعال بودن پرچم‌های سراسری، ignoreCase و چندخطی)	مقدار باید با الگو مطابقت داشته باشد.
min	range, number, date, month, week, datetime-local, time	شماره معتبر (range, number) تاریخ معتبر (date, month, week) تاریخ و زمان معتبر ( datetime-local, time )	مقدار باید بزرگتر یا مساوی مقدار باشد.
max	range, number, date, month, week, datetime-local, time	شماره معتبر (range, number) تاریخ معتبر (date, month, week) تاریخ و زمان معتبر ( datetime-local, time )	مقدار باید کمتر یا مساوی مقدار باشد
required	text, search, url, tel, email, password, date, datetime-local, month, week, time, number, checkbox, radio, file; همچنین در عناصر <select> و <textarea>	هیچکدام، زیرا یک ویژگی بولی است: وجود آن به معنای درست و عدم وجود آن به معنای بولی منفی یا false است.	باید یک مقدار (در صورت تنظیم) وجود داشته باشد.
step	date, month, week, datetime-local, time , range, number	تعداد صحیحی از روزها (date) تعداد صحیحی از ماه‌ها (month) تعداد صحیحی از هفته‌ها (week) تعداد صحیحی از ثانیه‌ها (datetime-local, time) یک عدد صحیح (range,number)	مگر اینکه step روی any literal تنظیم شده باشد، مقدار باید min + مضرب صحیحی از step باشد.
minlength	text, search, url, tel, email, password; also on the <textarea> element	عدد صحیح	تعداد کاراکترها نباید کمتر از مقدار ویژگی باشد، اگر خالی نباشد. تمام خطوط جدید برای <textarea> به یک کاراکتر واحد (برخلاف جفت‌های CRLF) نرمال‌سازی می‌شوند.
maxlength	text, search, url, tel, email, password; also on the <textarea> element	عدد صحیح	تعداد کاراکترها نباید از مقدار ویژگی بیشتر باشد.

اعتبارسنجی محدودیت از طریق API اعتبارسنجی محدودیت یا روی یک عنصر فرم یا در سطح فرم، روی خود عنصر فرم انجام می‌شود. اعتبارسنجی محدودیت به روش‌های زیر انجام می‌شود: با فراخوانی متد یا از یک رابط DOM مرتبط با فرم، ( یا )، که محدودیت‌ها را فقط روی این عنصر ارزیابی می‌کند و به یک اسکریپت اجازه می‌دهد این اطلاعات را دریافت کند. متد یک مقدار بولی برمی‌گرداند که نشان می‌دهد آیا مقدار عنصر از محدودیت‌های آن عبور می‌کند یا خیر. (این کار معمولاً توسط عامل کاربر هنگام تعیین اینکه کدام یک از شبه کلاس‌های CSS، یا ، اعمال می‌شود، انجام می‌شود.) در مقابل، متد هرگونه شکست محدودیت را به کاربر گزارش می‌دهد. با فراخوانی متد یا در رابط HTMLFormElement. با ارسال خود فرم. فراخوانی به معنای اعتبارسنجی ایستا برای محدودیت‌ها است، در حالی که فراخوانی یا ارسال فرم به معنای اعتبارسنجی تعاملی برای محدودیت‌ها است. اگر ویژگی novalidate روی عنصر تنظیم شده باشد، اعتبارسنجی تعاملی محدودیت‌ها اتفاق نمی‌افتد. فراخوانی متد در رابط HTMLFormElement اعتبارسنجی محدودیت را آغاز نمی‌کند. به عبارت دیگر، این متد داده‌های فرم را حتی اگر محدودیت‌ها را برآورده نکند، به سرور ارسال می‌کند. در عوض، متد را روی دکمه ارسال فراخوانی کنید. محدودیت‌های minlength و maxlength فقط روی ورودی ارائه شده توسط کاربر بررسی می‌شوند. اگر مقداری به صورت برنامه‌نویسی تنظیم شود، حتی زمانی که به صراحت یا را فراخوانی کنید، بررسی نمی‌شوند.

جدا از تنظیم محدودیت‌ها، توسعه‌دهندگان وب می‌خواهند پیام‌هایی که به کاربران نمایش داده می‌شوند و نحوه استایل‌بندی آنها را کنترل کنند. کنترل ظاهر عناصر ظاهر عناصر را می‌توان از طریق شبه کلاس‌های CSS کنترل کرد. شبه کلاس‌های CSS و شبه کلاس‌های و امکان نوشتن انتخابگرهایی را فراهم می‌کنند که با عناصر فرمی که ویژگی required را دارند یا ندارند، مطابقت دارند. شبه کلاس CSS به مراجعه کنید. شبه کلاس‌های CSS شبه کلاس‌های و برای نمایش عناصر استفاده می‌شوند که محتوای آنها به ترتیب بر اساس تنظیم نوع ورودی، اعتبارسنجی می‌شود و اعتبارسنجی نمی‌شود. این کلاس‌ها به کاربر اجازه می‌دهند عناصر فرم معتبر یا نامعتبر را استایل‌بندی کند تا شناسایی عناصری که به درستی یا نادرست قالب‌بندی شده‌اند، آسان‌تر شود. کنترل متن نقض محدودیت موارد زیر می‌توانند به کنترل متن نقض محدودیت کمک کنند: متد روی عناصر زیر: تنظیم یک پیام اعتبارسنجی سفارشی روی عناصر fieldset مانع از ارسال فرم در اکثر مرورگرها نمی‌شود. دکمه‌های ارسال (ایجاد شده با یک عنصر با type submit، یا یک عنصر ورودی با نوع ارسال. انواع دیگر دکمه‌ها در اعتبارسنجی محدودیت شرکت نمی‌کنند. رابط ValidityState شیء برگردانده شده توسط ویژگی اعتبارسنجی انواع عناصر ذکر شده در بالا را توصیف می‌کند. این رابط روش‌های مختلفی را نشان می‌دهد که یک مقدار وارد شده می‌تواند نامعتبر باشد. آنها در کنار هم به توضیح این موضوع کمک می‌کنند که چرا مقدار یک عنصر در صورت معتبر نبودن، اعتبارسنجی نمی‌شود.