شماره کارت
فیلد شماره کارت بانکی با گروه‌بندی خودکار، تشخیص بانک و اعتبارسنجی Luhn.
import { CardNumberInput } from "@kashi-ui/react";نمونه
شش رقم اول را تایپ کنید، مثلاً 603799 یا 610433، تا لوگو و نام بانک نمایش داده شوند.
با تایپ شش رقم اول، نام بانک نمایش داده می‌شود.
<CardNumberInput
label="شماره کارت"
name="card"
onValueChange={(value, valid, bank) => console.log(value, valid, bank)}
/>رفتار
- گروه‌بندی: ارقام به‌صورت خودکار در گروه‌های چهارتایی نمایش داده می‌شوند. هنگام ویرایش وسط شماره، مکان‌نما سر جای درستش می‌ماند.
- چسباندن: شماره‌ای که با فاصله، خط تیره یا ارقام فارسی کپی شده هم درست خوانده می‌شود.
- تشخیص بانک: لوگو و نام بانک از شش رقم اول (BIN) تشخیص داده می‌شوند. لوگوها فقط وقتی بانک شناخته شد بارگذاری می‌شوند و حجم اولیهٔ برنامه را زیاد نمی‌کنند (لوگوی بانک‌ها). فهرست بانک‌ها ممکن است کامل نباشد؛ از آن فقط برای راهنمایی کاربر استفاده کنید.
- اعتبارسنجی: شمارهٔ ۱۶ رقمی با الگوریتم Luhn بررسی می‌شود.
- تکمیل خودکار: با
autocomplete="cc-number"، مرورگر می‌تواند کارت ذخیره‌شده را پیشنهاد دهد.
این فیلد شماره را فقط در مرورگر قالب‌بندی می‌کند. شمارهٔ کارت داده‌ای حساس است؛ آن را فقط از طریق HTTPS ارسال کنید و بدون نیاز ذخیره نکنید.
ویژگی‌ها
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
value | string | — | مقدار کنترل‌شده: ۱۶ رقم انگلیسی بدون فاصله |
defaultValue | string | "" | مقدار اولیه |
onValueChange | (value: string, valid: boolean, bank: string | null) => void | — | با هر تغییر |
digits | "fa" | "latin" | "fa" | خط ارقام نمایشی |
showBank | boolean | true | نمایش نام بانک |
showBankLogo | boolean | true | نمایش لوگوی بانک (بارگذاری تنبل) |
invalidMessage | ReactNode | "شماره کارت معتبر نیست." | پیام خطا |
name | string | — | نام فیلد مخفی فرم با ارقام بدون فاصله |
بدون React
import { isValidCardNumber, getBankByCard, formatCardNumber } from "@kashi-ui/persian";
formatCardNumber("6037991234567890"); // "6037 9912 3456 7890"
getBankByCard("603799")?.name; // "بانک ملی"
isValidCardNumber("4111 1111 1111 1111"); // trueدسترس‌پذیری
- نام بانک با
aria-describedbyبه فیلد متصل است و صفحه‌خوان آن را همراه فیلد می‌خواند. - خطا پس از خروج از فیلد یا کامل شدن ۱۶ رقم نمایش داده می‌شود، نه هنگام تایپ.