حدد Insert > Spry > Spry Validation Text Field.
تاريخ آخر تحديث
6 مايو 2021
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم Validation Text Field
عنصر واجهة مستخدم Spry Validation Text Field هو حقل نصي يعرض الحالات الصالحة أو غير الصالحة عندما يُدخل زائر الموقع نصًا. على سبيل المثال، يمكنك إضافة عنصر واجهة مستخدم Validation Text Field إلى نموذج يكتب فيه الزوار عناوين البريد الإلكتروني الخاصة بهم. إذا لم يكتب الزوار الرمز "@" ونقطة في عنوان البريد الإلكتروني، يُعيد عنصر واجهة المستخدم رسالة توضح أن المعلومات التي أدخلها المستخدم غير صحيحة.
يبين المثال التالي عنصر واجهة مستخدم Validation Text Field في حالات متنوعة:
A. عنصر واجهة مستخدم Textfield، تم تفعيل التلميح B. عنصر واجهة مستخدم Textfield، حالة صالحة C. عنصر واجهة مستخدم Textfield، حالة غير صالحة D. عنصر واجهة مستخدم Textfield، حالة مطلوبة
يتضمن عنصر واجهة مستخدم Validation Text Field عددًا من الحالات (على سبيل المثال، صالحة وغير صالحة، وقيمة مطلوبة، وما إلى ذلك). يمكنك تبديل خصائص هذه الحالات باستخدام عارض الخصائص، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Text Field إجراء التحقق في مراحل متنوعة— على سبيل المثال، عندما ينقر الزائر خارج عنصر واجهة المستخدم، أو عندما يكتب، أو عندما يحاول تقديم النموذج.
الحالة Initial
حالة عنصر واجهة المستخدم عند تحميل الصفحة في المستعرض، أو عندما يقوم المستخدم بإعادة تعيين النموذج.
الحالة Focus
حالة عنصر واجهة المستخدم عندما يضع المستخدم نقطة الإدراج في عنصر واجهة المستخدم.
الحالة Valid
حالة عنصر واجهة المستخدم بعدما دخل أدخل المستخدم المعلومات بشكل صحيح، ويمكن تقديم النموذج.
الحالة Invalid
حالة عنصر واجهة المستخدم بعدما أدخل المستخدم نصًا بتنسيق غير صالح. (على سبيل المثال 06 للسنة بدلاً من 2006).
الحالة Required
حالة عنصر واجهة المستخدم بعدما فشل المستخدم في إدخال النص المطلوب في حقل النص.
الحالة Minimum Number Of Characters
حالة عنصر واجهة المستخدم بعدما أدخل المستخدم عددًا من الحروف أقل من العدد الأدنى المطلوب في حقل النص.
الحالة Maximum Number Of Characters
حالة عنصر واجهة المستخدم بعدما أدخل المستخدم عددًا من الحروف أكثر من العدد الأدنى المسموح به في حقل النص.
الحالة Minimum Value
حالة عنصر واجهة المستخدم بعدما أدخل المستخدم قيمة أقل من القيمة المطلوبة بواسطة حقل النص. (تنطبق على عمليات التحقق من نوع البيانات والأرقام الحقيقية، والأرقام الصحيحة).
الحالة Maximum Value
حالة عنصر واجهة المستخدم بعدما أدخل المستخدم قيمة أكبر من القيمة القصوى المسموح بها في حقل النص. (تنطبق على عمليات التحقق من نوع البيانات والأرقام الحقيقية، والأرقام الصحيحة).
في أي وقت يقوم عنصر واجهة مستخدم Validation Text Field بإدخال إحدى هذه الحالات من خلال تفاعل المستخدم، يتم تطبيق منطق إطار عمل Spry لفئة CSS محددة على حاوية HTML لعنصر واجهة المستخدم في وقت التشغيل. على سبيل المثال، إذا حاول مستخدم تقديم نموذج، ولكنه لم يدخل نصًا في حقل النص المطلوب، يطبق Spry فئة على عنصر واجهة المستخدم الذي يتسبب في عرض رسالة الخطأ، "A value is required". تتوفر القواعد، التي تتحكم في حالات تصميم رسائل الخطأ وعرضها، في ملف CSS المصاحب لعنصر واجهة المستخدم، SpryValidationTextField.css.
تشتمل HTML الافتراضية لعنصر واجهة مستخدم Validation Text Field، الموجود عادةً داخل نموذج، على علامة <span> للحاوية والتي تحيط بالعلامة <input> الخاصة بحقل النص. تتضمن HTML لعنصر واجهة مستخدم Validation Text Field أيضًا علامات برنامج نصي أعلى المستند وبعد علامات التغيير في HTML لعنصر واجهة المستخدم.
للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Validation Text Field، بما في ذلك تحليل كامل للتعليمة البرمجية الخاصة بعنصر واجهة مستخدم Validation Text Field، راجع www.adobe.com/go/learn_dw_sprytextfield_ae.
إدراج عنصر واجهة مستخدم Validation Text Field وتحريره
إدراج عنصر واجهة مستخدم Validation Text Field
-
-
أكمل مربع الحوار Input Tag Accessibility Attributes، ثم انقر فوق OK.
ملاحظة:
يمكنك أيضًا إدراج عنصر واجهة مستخدم Validation Text Field باستخدام الفئة Spry في اللوحة Insert.
تحديد نوع تحقق وتنسيق
يمكنك تحديد أنواع تحقق مختلفة لعنصر واجهة مستخدم Validation Text Field. على سبيل المثال، يمكنك تحديد نوع تحقق بطاقة ائتمان، إذا كان حقل النص سيستقبل أرقام بطاقة ائتمان.
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد نوع تحقق من القائمة Type.
-
إذا كان ذلك قابلاً للتطبيق، حدد تنسيقًا من القائمة المنبثقة Format.
تتسبب أغلب أنواع التحقق في توقع حقل النص لتنسيق قياسي. على سبيل المثال، إذا قمت بتطبيق نوع تحقق العدد الصحيح على حقل نص، فلن يتحقق عنصر واجهة المستخدم ما لم يقم المستخدم بإدخال أرقام في حقل النص. ومع ذلك، تتيح لك بعض أنواع التحقق إمكانية اختيار نوع التنسيق الذي سيقبله حقل النص الخاص بك. يسرد الجدول التالي أنواع التحقق والتنسيقات المتاحة من خلال عارض الخصائص:
نوع التحقق |
Format |
|---|---|
None |
لا يوجد تنسيق معين مطلوب. |
Integer |
حقل النص يقبل الأرقام فقط. |
Email Address |
حقل النص يقبل عناوين البريد الإلكتروني التي تتضمن @ ونقطة (.) يسبقهما ويتبعهما حرف واحد على الأقل. |
Date |
تتباين التنسيقات. قم بالتحديد من القائمة المنبثقة Format الخاصة بعارض الخصائص. |
Time |
تتباين التنسيقات. قم بالتحديد من القائمة المنبثقة Format الخاصة بعارض الخصائص. (يمثل "tt" التنسيق صباحًا/مساءً؛ ويمثل "t" التنسيق ص/م). |
Credit Card |
تتباين التنسيقات. قم بالتحديد من القائمة المنبثقة Format الخاصة بعارض الخصائص. يمكنك اختيار قبول كل بطاقات الائتمان، أو تحديد نوع خاص لبطاقة الائتمان (MasterCard، أو Visa، وما إلى ذلك). لا يقبل حقل النص المسافات بين أرقام بطاقة الائتمان، مثل 4321 3456 4567 4567. |
Zip Code |
تتباين التنسيقات. قم بالتحديد من القائمة المنبثقة Format الخاصة بعارض الخصائص. |
Phone Number |
يقبل حقل النص أرقام الهاتف بتنسيق الولايات المتحدة وكندا (000) 000-0000 أو تنسيقات مخصصة. إذا قمت بتحديد تنسيق مخصص كخيار، فأدخل التنسيق، على سبيل المثال، 000.00(00)، في مربع النص Pattern. |
Social Security Number |
يقبل نص الحقل أرقام التأمين الاجتماعي التي يتم تنسيقها بالشكل 000-00-0000. إذا كنت تريد استخدام تنسيق مختلف، فحدد Custom كنوع التحقق الخاص بك وتحديد نقش. تقبل آلية التحقق من النقش حروف ASCII فقط. |
Currency |
يقبل نص الحقل العملة التي يتم تنسيقها بالشكل 1,000,000.00 أو 1.000.000,00. |
Real Number/Scientific Notation |
التحقق من أنواع عديدة من الأرقام: الأعداد الصحيحة (على سبيل المثال، 1)؛ القيم العشرية المتحركة (على سبيل المثال، 12.123)؛ والقيم العشرية المتحركة في التدوين العلمي (على سبيل المثال، 1.212e+12, 1.221e-12 حيث e تستخدم عوضًا عن 10). |
IP Address |
تتباين التنسيقات. قم بالتحديد من القائمة المنبثقة Format الخاصة بعارض الخصائص. |
URL |
يقبل حقل النص عناوين URL التي يتم تنسيقها بالشكل http://xxx.xxx.xxx أو ftp://xxx.xxx.xxx. |
تخصيص |
يتيح لك تحديد نوع تحقق وتنسيق مخصص. أدخل نقش التنسيق (والتلميح إن أردت) في عارض الخصائص. تقبل آلية التحقق من النقش حروف ASCII فقط. |
تحديد عن حدوث التحقق
يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر زائر الموقع خارج عنصر واجهة المستخدم، بينما يكتب الزائر، أو عندما يحاول الزائر تقديم النموذج.
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد الخيار الذي يوضح الوقت الذي تريد حدوث التحقق فيه. يمكنك تحديد كل الخيارات أو النقر فوق Submit فقط.
Blur
التحقق في أي وقت يقوم فيه المستخدم بالنقر خارج حقل النص.
Change
التحقق بينما يقوم المستخدم بتغيير النص داخل حقل النص.
Submit
التحقق عندما يحاول المستخدم تقديم النموذج. يتم تحديد خيار التقديم افتراضيًا، ولا يمكن إلغاء تحديده.
تحديد أقصى وأدنى حد لعدد الحروف
لن يتوفر هذا الخيار إلا لأنواع التحقق None، وInteger، وE-mail Address، وURL فقط.
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، أدخل رقمًا في المربع Min Chars أو Max Chars. على سبيل المثال، إذا أدخلت القيمة 3 في المربع Min Chars، فلن يُجري عنصر واجهة المستخدم عملية التحقق إلا إذا أدخل المستخدم ثلاثة حروف أو أكثر.
تحديد قيم الحد الأدنى والأقصى
لا يتوفر هذا الخيار إلا لأنواع التحقق Integer، وTime، وCurrency، وReal Number/Scientific Notation.
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، أدخل رقمًا في المربع Min Value أو Max Value. على سبيل المثال، إذا أدخلت القيمة 3 في المربع Min Value، فلن يُجري عنصر واجهة المستخدم عملية التحقق إلا إذا أدخل المستخدم الرقم 3 أو قيمة أكبر (4، 5، 6، وما إلى ذلك) في حقل النص.
عرض حالات عنصر واجهة المستخدم في طريقة العرض Design
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد الحالة التي تريد رؤيتها من القائمة المنبثقة Preview States. على سبيل المثال، إذا كنت تريد رؤية عنصر واجهة المستخدم في حالته الصالحة، فحدد Valid.
تغيير الحالة المطلوبة لحقل نص
افتراضيًا، تتطلب كل عناصر واجهة المستخدم Validation Text Field التي تقوم بإدراجها مع Dreamweaver إدخالاً من المستخدم عند نشرها على صفحة ويب. ومع ذلك، يمكنك جعل إكمال حقول النص اختيارية للمستخدم.
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، قم بتحديد الخيار Required أو إلغاء تحديده، وفقًا لتفضيلاتك.
إنشاء تلميح لحقل نص
نظرًا لوجود العديد من أنواع التنسيقات المختلفة لحقول النص، فإنه من المفيد إعطاء مستخدميك تلميحًا بشأن التنسيق الذي يريدون إدخاله. على سبيل المثال، تعيين حقل نص مع نوع التحقق Phone Number سيقبل أرقام الهاتف فقط التي على شكل (000) 000-0000. يمكنك إدخال هذه الأرقام البسيطة كتلميح حتى يعرض حقل النص التنسيق الصحيح عندما يقوم المستخدم بتحميل الصفحة في مستعرض.
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، أدخل تلميحًا في مربع النص Hint.
حظر الحروف غير الصالحة
يمكنك منع المستخدمين من إدخال حروف غير صالحة في عنصر واجهة مستخدم Validation Text Field. على سبيل المثال، إذا قمت بتحديد هذا الخيار لمجموعة عناصر واجهة مستخدم بنوع التحقق Integer، فلن يظهر شيء في حقل النص، إذا حاول المستخدم كتابة حرف.
-
حدد عنصر واجهة مستخدم Validation Text Field في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد الخيار Enforce Pattern.
تخصيص عنصر واجهة مستخدم Validation Text Field
على الرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة لعنصر واجهة مستخدم Validation Text Field، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تبديل CSS لعنصر واجهة مستخدم Validation Text Field بحيث يمكنك إنشاء عنصر واجهة مستخدم مصمم حسب رغبتك. للاطلاع على قائمة أكثر تقدمًا لمهام التصميم، راجع www.adobe.com/go/learn_dw_sprytextfield_custom_ae.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryValidationTextField.css. يقوم Dreamweaver بحفظ الملف SpryValidationTextField.css في المجلد SpryAssets لموقعك في أي وقت تقوم فيه بإنشاء عنصر واجهة مستخدم Spry Validation Text Field. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
ملاحظة:
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Text Field بسهولة مباشرةً في ملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS عنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
تصميم نص رسالة خطأ عنصر واجهة المستخدم Validation Text Field
افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Text Field باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص.
-
لتغيير تصميم نص رسائل خطأ عنصر واجهة مستخدم Validation Text Field، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك.
النص المطلوب تغييره
قاعدة CSS ذات الصلة
الخصائص ذات الصلة المطلوب تغييرها
نص رسالة الخطأ
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
تغيير ألوان خلفية عنصر واجهة مستخدم Validation Text Field
-
لتغيير ألوان خلفية عنصر واجهة مستخدم Validation Text Field، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير قيم لون الخلفية الافتراضية:
اللون المطلوب تغييره
قاعدة CSS ذات الصلة
الخاصية ذات الصلة المطلوب تغييرها
لون خلفية عنصر واجهة المستخدم في الحالة الصالحة
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
لون خلفية عنصر واجهة المستخدم في الحالة غير الصالحة
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input background-color: #FF9F9F;
لون خلفية عنصر واجهة المستخدم عند التركيز
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
