Password Input
کامپوننت x-password-input یک ورودی رمز عبور پیشرفته برای فرمها است که امکانات متنوعی مانند نمایش قدرت رمز عبور (strength meter)، کنترل الزامات رمز (حروف بزرگ، کوچک، عدد، کاراکتر خاص)، پیشوند و پسوند، کنترل طول، قابلیت نمایش/مخفیسازی رمز، حالت فقطخواندنی، پیام راهنما، پیام خطا و ... را ارائه میدهد.
ویژگیها
- نمایش قدرت رمز عبور (strength meter)
- امکان تعیین پیشوند (
prefix) و پسوند (suffix) - کنترل حداقل و حداکثر طول رمز (
minLength,maxLength) - الزام وجود حروف بزرگ، کوچک، عدد و کاراکتر خاص در رمز
- قابلیت نمایش/مخفیسازی رمز (visibility toggle)
- پشتیبانی از حالت فقطخواندنی (
readonly) - پشتیبانی از autofocus
- نمایش پیام راهنما هنگام غیرفعال بودن (
disabledTooltip) - نمایش پیام خطا و پیامهای سفارشی با استایلهای مختلف
- امکان شخصیسازی کلاسهای CSS برای خود و کانتینر
- پشتیبانی از پیام راهنما (
hint) - پشتیبانی از لیبل و فضای رزرو لیبل
- امکان تنظیم autocomplete
ورودیهای کامپوننت
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
name | string | — | نام فیلد (اجباری) |
label | string | null | لیبل اصلی |
labelSpaceReserved | bool | false | آیا فضای لیبل حتی بدون مقدار رزرو شود؟ |
id | string | null | شناسه یکتا برای ورودی |
placeholder | string | null | placeholder برای ورودی |
prefix | string | null | پیشوند |
suffix | string | null | پسوند |
minLength | int | null | حداقل طول مجاز |
maxLength | int | null | حداکثر طول مجاز |
showStrengthMeter | bool | true | نمایش قدرت رمز عبور |
requireUppercase | bool | true | الزام وجود حرف بزرگ |
requireNumber | bool | true | الزام وجود عدد |
requireLowercase | bool | true | الزام وجود حرف کوچک |
requireSpecialChar | bool | true | الزام وجود کاراکتر خاص |
required | bool | false | اجباری بودن فیلد |
disabled | bool | false | غیرفعال بودن ورودی |
readonly | bool | false | فقطخواندنی بودن ورودی |
messageStyle | string/enum | "message" | استایل نمایش پیام (message, tooltip, ...) |
defaultMessageType | string/enum | "warning" | نوع پیام پیشفرض (info, error, warning, ...) |
defaultMessage | string | null | پیام پیشفرض برای نمایش |
hint | string | null | پیام راهنما یا توضیح کوتاه |
class | string | null | کلاس CSS سفارشی برای خود ورودی |
containerClass | string | null | کلاس CSS سفارشی برای کانتینر |
autoFocus | bool | false | فوکوس خودکار روی ورودی |
visibilityToggle | bool | true | نمایش دکمه نمایش/مخفیسازی رمز |
autocomplete | string | 'off' | مقدار autocomplete برای ورودی |
suppressLogicMessages | bool | false | عدم نمایش پیامهای منطقی |
disabledTooltip | string | null | پیام راهنما هنگام غیرفعال بودن ورودی |
مثالها
نمونه پایه
<x-password-input
label="کلمه عبور"
name="password"
id="password"
container-class="col-md-6"
placeholder="رمز عبور خود را وارد نمایید"
prefix="$"
suffix="USD"
message-style="message"
default-message-type="warning"
default-message="رمز عبور شما شامل حروف بزرگ و کوچک و عدد می باشد"
min-length="8"
max-length="12"
show-strength-meter
require-uppercase
require-number
require-lowercase
require-special-char
:disabled="false"
:readonly="false"
/>