PhoneInput — شماره همراه ایرانی

شماره همراه برای ورود، ثبت‌نام و تأیید هویت است. کاربر شماره را با قالب خوانا تایپ می‌کند؛ اما سرور همیشه یک رشتهٔ ساده دریافت می‌کند، مثل 09123456789کپی کد، بدون فاصله، بدون +98کپی کد و بدون علامت. این کامپوننت پایهٔ ظاهر و دسترس‌پذیری Inputکپی کد را دارد و فقط منطق شماره را اضافه می‌کند.

وضعیت: beta · لایه: ۳ (@tokapps/tukکپی کد) · کد: packages/tuk/src/controls/phone-input/کپی کد

import { PhoneInput } from '@tokapps/tuk';

نمونهٔ زنده

ارقام فارسی، +98 912…کپی کد، یا فقط 9123…کپی کد را تایپ یا بچسبانید؛ کامپوننت آن را به قالب ملی تبدیل می‌کند. هنگام ترک فیلد با شماره ناقص یا نامعتبر، پیام خطا ظاهر می‌شود.

کد قابل کپی

فرم با ارسال یک رشته

nameکپی کد یک فیلد پنهان می‌سازد که فقط ارقام شماره معتبر را دارد. اگر شماره معتبر نباشد، مقدار آن خالی است.

import { PhoneInput } from '@tokapps/tuk';export function MobileStep() {  return (    <form      onSubmit={(e) => {        e.preventDefault();        const mobile = new FormData(e.currentTarget).get('mobile');        if (typeof mobile === 'string' && mobile) sendOtp(mobile);      }}    >      <PhoneInput name="mobile" isRequired />      <button type="submit">ارسال کد</button>    </form>  );}

کنترل‌شده با state

onChangeکپی کد شماره معتبر کامل را می‌دهد؛ برای ناقص یا نامعتبر ''کپی کد می‌دهد.

const [mobile, setMobile] = useState('');<PhoneInput label="شماره همراه" value={mobile} onChange={setMobile} />// mobile === '09123456789' وقتی شماره کامل و معتبر است، و '' در غیر این صورت

الگوی سفارشی (اپراتور یا قاعدهٔ دیگر)

<PhoneInput label="شماره همراه" pattern={/^09\d{9}$/} />

همهٔ پیکربندی‌ها

توابع کمکی خالص (برای سرور و تست)

قواعد اعتبارسنجی

• شماره باید ۱۱ رقم و با 09کپی کد شروع شود.
• پیشوند بعد از 09کپی کد باید یکی از بلوک‌های الگو باشد: 0901کپی کد تا 0905کپی کد، 091xکپی کد، 092xکپی کد، 093xکپی کد، 0941کپی کد و 099xکپی کد.
• شماره ناقص یا با پیشوند ثابت‌نشده خطا می‌دهد.

نکتهٔ نگهداری: بلوک‌های اپراتور با زمان تغییر می‌کنند. الگوی پیش‌فرض را با جدول رسمی تخصیص شماره در اجرای نهایی تطبیق دهید؛ اگر لازم شد، patternکپی کد را در سطح محصول بازنویسی کنید تا بدون تغییر کامپوننت به‌روز شود.

خروجی به فرم و سرور

• در فرم فقط nameکپی کد مقدار را می‌فرستد و آن هم فقط ارقام است: 09123456789کپی کد.
• onChangeکپی کد همان رشته را می‌دهد یا ''کپی کد.
• نمایش 0912 345 6789کپی کد هرگز به سرور نمی‌رود.
• سرور باید همچنان شماره را اعتبارسنجی کند؛ این کامپوننت در مرورگر است.

حالت‌ها

RTL، کیبورد و صفحه‌خوان

• ورودی همیشه چپ‌به‌راست است؛ شماره لاتین نمایش داده می‌شود، حتی در صفحهٔ فارسی.
• inputmodeکپی کد و autocomplete="tel-national"کپی کد برای صفحه‌کلید عددی و پیشنهاد شماره.
• برچسب، توضیح و خطا با همان مسیرهای Input به فیلد وصل‌اند.

صدا، حرکت، چاپ

• صدا: پیش‌فرض tapکپی کد، opt-in و همراه معادل بصری. sound={false}کپی کد برای فرم‌های حساس.
• حرکت: همان گذار حاشیهٔ Input؛ در کاهش حرکت بی‌انیمیشن.
• چاپ: print="show"کپی کد پیش‌فرض.

توکن‌ها

از Input به ارث می‌رسد: --tds-input-*کپی کد و توکن‌های معنایی. هیچ توکن جدیدی تعریف نشده است.

قرارداد ARCH

• ظاهر و رفتار فقط از Input است؛ تم فقط حرکت و توکن‌ها را تغییر می‌دهد.
• منطق شماره در PhoneInput.logic.tsکپی کد است و بدون وابستگی به React تست می‌شود.
• اعتبارسنجی در مرورگر است؛ تأیید مالکیت شماره با کد پیامکی (CodeCells) انجام می‌شود.

نکات

• برای کد تأیید پیامکی از CodeCells استفاده کنید.
• برای ورودی آزاد یا غیرایرانی از Input استفاده کنید.