ویژگی HTML: الگو

ویژگی الگو یک عبارت منظم را مشخص می کند که مقدار کنترل فرم باید مطابقت داشته باشد. اگر یک مقدار غیر تهی با محدودیت های تعیین شده توسط مقدار الگو مطابقت نداشته باشد، ویژگی patteMismatch فقط خواندنی شی ValidityState درست خواهد بود.

آن را امتحان کنید

بررسی اجمالی

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

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

اگر الگوی مشخص شده مشخص نشده باشد یا نامعتبر باشد، هیچ عبارت منظمی اعمال نمی شود و این ویژگی نادیده گرفته می شود.

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

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

قابلیت استفاده

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

اعتبار سنجی محدودیت

اگر مقدار ورودی رشته خالی نباشد و مقدار آن با کل بیان منظم مطابقت نداشته باشد ، یک نقض محدودیت گزارش شده توسط ویژگی الگوی شیء ResorityState که دارای خاصیت است. بیان منظم این الگوی ، هنگامی که در برابر مقدار مطابقت داشته باشد ، باید شروع خود را با شروع رشته و انتهای آن به انتهای رشته لنگر انداخته باشد ، که کمی متفاوت از عبارات منظم JavaScript است: در مورد ویژگی الگوی ، ماآیا مطابق با کل ارزش ، نه فقط هر زیر مجموعه ، گویی A ^(؟: در شروع الگوی و) در پایان $.

توجه: اگر ویژگی الگوی بدون هیچ مقدار مشخص شده باشد ، مقدار آن به طور ضمنی رشته خالی است. بنابراین ، هر مقدار ورودی غیر خالی منجر به نقض محدودیت خواهد شد.

مثال ها

مطابقت با شماره تلفن

با توجه به موارد زیر:

p> برچسب>شماره تلفن خود را در قالب (123) - 456 - 7890 وارد کنید (ورودی نام="TEL1" نوع="تلفن" الگو="[0-9]" محل نگهدارنده="###" دارای برچسب آریا="کد منطقه 3 رقمی" اندازه="2" />) - ورودی نام="tel2" نوع="تلفن" الگو="[0-9]" محل نگهدارنده="###" دارای برچسب آریا="پیشوند 3 رقمی" اندازه="2" /> - ورودی نام="TEL3" نوع="تلفن" الگو="[0-9]" محل نگهدارنده="####" دارای برچسب آریا="شماره 4 رقمی" اندازه="3" /> برچسب> p> 

در اینجا ما 3 بخش برای شماره تلفن آمریکای شمالی با یک برچسب ضمنی شامل هر سه مؤلفه شماره تلفن ، انتظار داریم که به ترتیب 3 رقمی ، 3 رقم و 4 رقمی انتظار داشته باشیم ، همانطور که توسط ویژگی الگوی تنظیم شده در هر یک تعریف شده است.

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

ورودی: نامعتبر است  مرز:قرمز جامد 3px; > 

اگر به جای آن از ویژگی های minl طول و حداکثر استفاده کرده بودیم ، ممکن است ما اعتبار را مشاهده کرده ایم.

مشخص کردن یک الگوی

شما می توانید از ویژگی الگوی استفاده کنید تا یک عبارت منظم را مشخص کنید که مقدار ورودی باید مطابقت داشته باشد تا معتبر باشد (به اعتبارسنجی در برابر یک عبارت معمولی برای یک دوره تصادف ساده در استفاده از عبارات منظم برای اعتبارسنجی ورودی مراجعه کنید).

مثال زیر مقدار را به 4-8 کاراکتر محدود می کند و نیاز دارد که فقط حروف کمتری داشته باشد.

فرم> قسمت> برچسب برای="اسم شما">یک نام کاربری انتخاب کنید:برچسب> ورودی نوع="متن" id="اسم شما" نام="نام" ضروری اندازه="45" الگو="[A-Z]" عنوان="4 تا 8 حرف کوچک" /> طول طبقه="اعتبار">طول> p>نام های کاربری باید حروف کوچک و طول 4-8 باشد.p> قسمت> قسمت> دکمه>ارسالدکمه> قسمت> فرم> 

قسمت  حاشیه پایین:10 عدد; موقعیت:نسبت فامیلی; > p  اندازه فونت:80 ٪; رنگ:#999; > ورودی + دهانه  حق بالشتک:30 px; > ورودی: نامعتبر + دهانه :: بعد از  موقعیت:مطلق; محتوا: "✖"; دست چپ:5 عدد; > ورودی: معتبر + دهانه :: بعد از  موقعیت:مطلق; محتوا: "✓"; دست چپ:5 عدد; > 

این مانند چنین است:

نگرانی های دسترسی

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

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

مشخصات فنی

سازگاری مرورگر

جداول BCD فقط در مرورگر بارگیری می شود

همچنین ببینید

• اعتبار سنجی محدودیت
• فرم ها: اعتبار سنجی فرم داده
• عبارات با قاعده