Svelte / الأساسي: المكونات التفاعلية والملكية / الدرس 5
الربط والنماذج وعقود الإدخال المتاحة
استعمل ربط المتصفح الميسر مع حفظ أنواع القيم والتحقق وسلطة الخادم صراحة.
في هذه الصفحة
أهداف الدرس
- اشرح bind:value ولماذا لا تعوض قيود المتصفح التحقق الفعلي.
- صمم حقولاً مسماة وتغذية انتظار وخطأ مفهومة.
الربط مع المتصفح آلية واجهة
تصل bind:value قيمة حقل مدعوم بالحالة ولا تجعلها كمية مجال صحيحة تلقائياً. للعدد إكراه وسلوك فارغ أو مخالف موثقان فيحتاج الغياب معالجة. تحسن min وmax وrequired التفاعل ولا تفرض مخططاً غير قابل للتجاوز أو تفويضاً. افصل النص والقيمة المحللة والمقبولة. لا يصير التغيير المحلي كتابة دائمة لأنه مرتبط بالحالة. يساعد الفرق عند مسح حقل عددي: قد لا تكون القيمة الحالية صفراً، ولا ينبغي أن تعوضها الخدمة بصفر ثم تحفظه من دون أن يكون ذلك معنى العقد المعلن.
سم عنصر التحكم واحم المعاينة المشتقة
يربط الجزء عدداً ويشتق جواز المعاينة، ويلف label الحقل دون معرف عام غير مملوك. يعرض حالة ولا يرسل. لم تختبر معالجة DOM أو ترتيب تحديثه. يربط النموذج الحقيقي الخطأ والنتيجة بالحقل ويحفظ النص المفيد عند رفض متوقع. يحسن تعطيل الزر التفاعل ولا يضمن أثراً واحداً أو يمنع تزوير الطلب. يظل تحليل الخادم وسياسة الكائن لازمين. ينبغي أن تخبر الرسالة المستخدم لماذا لا تقبل القيمة وكيف يصلحها، لا أن يتغير لون وحده بلا وصف يمكن أن تدركه أدوات المساعدة.
<script>
let seats = $state(1);
let valid = $derived(Number.isInteger(seats) && seats >= 1 && seats <= 20);
</script>
<label>Seats <input type="number" min="1" max="20" bind:value={seats} /></label>
<p>{valid ? "Valid preview" : "Enter a whole number from 1 to 20"}</p>المدى عقد معاينة اصطناعي؛ لم يشغل حقل أو إكراه ربط أو إرسال نموذج.
حلل القيم المرسلة عند حد الخادم
قد ينتج النموذج أسماء مكررة ونصاً أو ملفاً أو null. لا تحول كل شيء لنص صالح. حدد المجهول وعدد القيم ووجود حقل التحديث؛ يختلف الغياب والمسح والفارغ. اختر تمثيلاً معتمداً ومشاكل حقول آمنة لا استثناء المصدر. لا ينفذ الربط أو تعليق TypeScript التحقق. توفر أفعال Kit مدخلاً لاحقاً وتفرض أنت العقد فيه. ينبغي أن تبقى قيمة معرف مخفي أو حقل مالك غير متوقع خاضعة للسياسة، حتى إن لم تعرض الواجهة وسيلة عادية لتعديلها، لأن المستدعي يستطيع بناء الطلب نفسه خارج النموذج.
ارفض التحليل العددي الجزئي محلياً
يطلب المحلل نصاً عشرياً موجباً كاملاً حتى عشرين ويرفض مصفوفة ونصاً لاحقاً وتجاوزاً قبل وجود أثر. اتفاق عينة لا محلل عام، ولا يحاكي ربط المتصفح أو لغة الكتابة أو واجهة الصلاحية. يطبق الخادم القاعدة عبر FormData ويختبر الغياب والتكرار منفصلين. لا تسمح لـparseInt ببادئة تجعل نصاً غير متعلق كمية عمل صحيحة. يفيد التأكيد المحلي في إثبات قرار التحويل، ويبقى على موائم النقل إثبات أنه اختار قيمة واحدة من الحقل الصحيح ولم يسقط التكرار قبل وصوله لهذا المحقق.
function seatCount(value) {
if(typeof value!=="string" || !/^[1-9][0-9]*$/.test(value))throw new Error("INVALID_SEATS");
const n=Number(value);if(!Number.isInteger(n)||n>20)throw new Error("INVALID_SEATS");return n;
}
console.assert(seatCount("12")===12);
for(const value of ["12seats","21",["2","3"]]){let rejected=false;try{seatCount(value);}catch{rejected=true;}console.assert(rejected);}يقبل اثني عشر ويرفض الجزئي والزائد والمصفوفة دون DOM أو فعل خادم.
تحقق من مهمة التحرير كاملة
استخدم عنصراً دلالياً ووسماً مفهوماً ولوحة مفاتيح وخطأ مرتبطاً. يوضح الانتظار ما يجري دون مسح المفيد أو إخفاء النتيجة. قد يختلف التحقق والتحسين بلا JavaScript فاختبر التدفق المختار بقصد. احفظ الخصوصية ولا تعكس حساساً في خطأ عام. يشغل المقرر seatCount فقط دون ربط أو إعادة نموذج أو قارئ شاشة أو رفض خادم. يحتاج الباقي متصفحاً وخادماً مأذونين بسجلات آمنة ونسخ دقيقة. لا تجعل نجاح قاعدة عددية دليلاً على أن المستخدم يستطيع إتمام النموذج أو فهم سبب رفضه في الواجهة المعروضة.
الأخطاء الشائعة وإصلاحها
تعامل min وmax كتحقق كامل
- لماذا يحدث؟
- اختلطت قيود الواجهة بعقد خادم لا يمكن تجاوزه.
- كيف تصلحه؟
- تحقق من القيم المرسلة والسلطة الحالية في الخادم.
- كيف تتجنب تكراره؟
- اختبر طلباً معيباً مباشراً مستقلاً عن الواجهة.
تصبح 12seats عدداً مقبولاً من اثني عشر
- لماذا يحدث؟
- حل تحليل البادئة محل التحقق من القيمة كلها.
- كيف تصلحه؟
- افحص الصياغة الكاملة والمدى قبل التحويل.
- كيف تتجنب تكراره؟
- احتفظ بعينات النص اللاحق وحدود المدى.
يفقد نموذج مرفوض كل إدخال مفيد
- لماذا يحدث؟
- عولجت مشاكل الحقل المتوقعة كإعادة ضبط غامضة.
- كيف تصلحه؟
- أعد تغذية منظمة آمنة واحفظ قيم المسودة المناسبة.
- كيف تتجنب تكراره؟
- اختبر التعافي بلوحة المفاتيح مع التحسين وبدونه.
اختبر فهمك
1. هل يفوض عدد مقاعد صحيح مرتبط بالحالة حجزها؟
اعرض الحل المشروح
لا. يصف قيمة واجهة محلية، ويتحقق الخادم من النوع والتوفر والهوية والفعل ثم يستخدم بروتوكول كتابة متماسكاً. يمكن تجاوز الربط والقيود تماماً. اختبر المنع والتعارض بجانب المعاينة الصحيحة.
2. لماذا لا تختبر seatCount سلوك bind:value العددية؟
اعرض الحل المشروح
تستقبل قيمة صريحة وتحللها ولا تنشئ حقلاً أو حدثاً أو كود ربط. احتفظ بالقاعدة النقية وافحص الفراغ والمخالفة وإعادة الضبط وتفاعل اللغة في التحكم المترجم الفعلي عند الإذن.
أهم ما تعلمته
- يحسن الربط التفاعل ولا يعوض تحقق الخادم.
- التغذية المتاحة ومعنى الإدخال المعتمد جزء من العقد.