حدد Insert > Spry > Spry Validation Password.
تاريخ آخر تحديث
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم Validation Password
عنصر واجهة مستخدم Spry Validation Password عبارة عن حقل نصي لكلمة مرور والذي يمكنك استخدامه لفرض قواعد كلمة المرور (على سبيل المثال، عدد الحروف ونوعها). يوفر عنصر واجهة المستخدم رسائل تحذير أو خطأ وفقًا لإدخال المستخدم.
ملاحظة:
يجب أن تكون متمرسًا في التعامل مع عناصر واجهة مستخدم Spry validation قبل العمل مع عنصر واجهة مستخدم Password. إذا كنت غير معتاد على التعامل معها، فراجع العمل مع عنصر واجهة المستخدم Spry Validation Text Field، أو أي نظرات عامة أخرى على عنصر واجهة مستخدم التحقق قبل المتابعة. لا تقدم هذه النظرة العامة كل مفاهيم عناصر واجهة المستخدم الأساسية.
يبين المثال التالي عنصر واجهة مستخدم Validation Password في حالات متنوعة:
A. عنصر واجهة مستخدم Password، حالة أدنى عدد للحروف B. عنصر واجهة مستخدم Password، حالة أقصى عدد للحروف C. عنصر واجهة مستخدم Password، حالة مطلوبة
يتضمن عنصر واجهة مستخدم Validation Password عددًا من الحالات (على سبيل المثال، صالحة وغير صالحة، وقيمة مطلوبة، وما إلى ذلك). يمكنك تبديل خصائص هذه الحالات عن طريق تحرير ملف CSS المقابل (SpryValidationPassword.css)، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Password إجراء التحقق في مراحل متنوعة— على سبيل المثال، عندما ينقر زائر الموقع خارج حقل النص، أو عندما يكتب، أو عندما يحاول تقديم النموذج.
الحالة Initial
عند تحميل الصفحة في المستعرض، أو عندما يقوم المستخدم بإعادة تعيين النموذج.
الحالة Focus
عندما يضع المستخدم نقطة الإدراج في عنصر واجهة المستخدم.
الحالة Valid
عندما يُدخل المستخدم المعلومات بشكل صحيح، ويمكن تقديم النموذج.
الحالة Invalid strength
عندما يدخل المستخدم نصًا لا يتناسب مع معايير الطول المخصصة لحقل نص كلمة المرور. (على سبيل المثال، إذا قمت بتحديد أن كلمة المرور يجب أن تحتوي على حرفين كبيرين على الأقل، وكانت كلمة المرور المدخلة لا تحتوي على حروف كبيرة أو تحتوي على حرف كبير واحد فقط).
الحالة Required
عندما لا يُدخل المستخدم النص المطلوب في حقل النص.
الحالة Minimum Number Of Characters
عند إدخال المستخدم عددًا من الحروف أقل من العدد الأدنى المطلوب في حقل نص كلمة المرور.
الحالة Maximum Number Of Characters
عند إدخال المستخدم عددًا من الحروف أكثر من العدد الأقصى المسموح به في حقل نص كلمة المرور.
للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Validation Password، وكذلك معلومات إضافية عن بنية عنصر واجهة المستخدم، راجع www.adobe.com/go/learn_dw_sprypassword_ae.
إدراج عنصر واجهة مستخدم Validation Password وتحريره
إدراج عنصر واجهة مستخدم Validation Password
-
-
أكمل مربع الحوار Input Tag Accessibility Attributes، ثم انقر فوق OK.
ملاحظة:
يمكنك أيضًا إدخال عنصر واجهة مستخدم Validation Password باستخدام الفئة Spry في اللوحة Insert.
تغيير الحالة المطلوبة لعنصر واجهة مستخدم Validation Password
افتراضيًا، تتطلب كل عناصر واجهة مستخدم Validation Password التي تقوم بإدراجها مع Dreamweaver إدخالاً من المستخدم عند نشرها على صفحة ويب. ومع ذلك، يمكنك جعل إكمال حقول نص كلمة المرور اختيارية للمستخدم.
-
حدد عنصر واجهة مستخدم Validation Password في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، قم بتحديد الخيار Required أو إلغاء تحديده، وفقًا لتفضيلاتك.
عرض حالات عنصر واجهة المستخدم في طريقة العرض Design
-
حدد عنصر واجهة مستخدم Validation Password في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، حدد الحالة التي تريد رؤيتها من القائمة المنبثقة Preview States. على سبيل المثال، إذا كنت تريد رؤية عنصر واجهة المستخدم في حالته الصالحة، فحدد Valid.
تحديد عن حدوث التحقق
يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر زائر الموقع خارج عنصر واجهة المستخدم، بينما يكتب الزائر، أو عندما يحاول الزائر تقديم النموذج.
-
حدد عنصر واجهة مستخدم Validation Password في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، حدد الخيار الذي يوضح الوقت الذي تريد حدوث التحقق فيه. يمكنك تحديد كل الخيارات أو النقر فوق Submit فقط.
Blur
التحقق في أي وقت يقوم فيه المستخدم بالنقر خارج نص حقل كلمة المرور.
Change
التحقق بينما يقوم المستخدم بتغيير النص داخل حقل نص كلمة المرور.
Submit
التحقق عندما يحاول المستخدم تقديم النموذج. يتم تحديد خيار التقديم افتراضيًا، ولا يمكن إلغاء تحديده.
تعيين طول كلمة المرور
يشير طول كلمة المرور إلى درجة تناسب توليفات معينة من الحروف مع متطلبات حقل نص كلمة المرور. على سبيل المثال، إذا قمت بإنشاء نموذج يقوم فيه المستخدمون بتحديد كلمة مرور، فقد تريد إجبار مستخدميك على تضمين عدد معين من الحروف الكبيرة في كلمة المرور، وعدد معين من الحروف الخاصة، وهكذا.
ملاحظة:
بشكل افتراضي، لن يتم تعيين أي من الخيارات المتاحة لعنصر واجهة مستخدم Password.
انقر فوق علامة التبويب الزرقاء لعنصر واجهة مستخدم Validation Password لتحديده.
قم بتعيين خيارات في عارض الخصائص (Window > Properties) حسب الحاجة. الأرقام التي تدخلها في حقول الخيارات هي الأرقام المطلوبة للتحقق من عنصر واجهة المستخدم. على سبيل المثال، إذا أدخلت 8 في مربع الحروف Minimum، فلن يتسنى لعنصر واجهة المستخدم إجراء عملية التحقق ما لم يكن المستخدم قد أدخل 8 حروف على الأقل في حقل نص كلمة المرور.
Minimum/Maximum characters
يحدد أقصى وأدنى عدد للحروف المطلوبة لكلمة المرور لتكون صالحة.
Minimum/Maximum letters
يحدد أقصى وأدنى عدد للحروف الهجائية (a، b، c، وهكذا) المطلوبة لكلمة المرور لتكون صالحة.
Minimum/Maximum numbers
يحدد أقصى وأدنى عدد للأرقام (1، 2، 3، وهكذا) المطلوبة لكلمة المرور لتكون صالحة.
Minimum/Maximum uppercase
يحدد أقصى وأدنى عدد للحروف الكبيرة (A، B، C، وهكذا) المطلوبة لكلمة المرور لتكون صالحة.
Minimum/Maximum special characters
يحدد أقصى وأدنى عدد للحروف الخاصة (!، @، #، وهكذا) المطلوبة لكلمة المرور لتكون صالحة.
يؤدي ترك أي خيار من الخيارات المذكورة أعلاه فارغًا إلى عدم إجراء عنصر واجهة المستخدم لعملية التحقق التي تتم بمقارنته مع ذلك المعيار. على سبيل المثال، إذا تركتَ خيار أرقام Minimum/Maximum فارغًا، فلن يبحث عنصر واجهة المستخدم عن الأرقام في سلسلة كلمة المرور.
تخصيص عنصر واجهة مستخدم Validation Password
بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم Validation Password، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تغيير CSS لعنصر واجهة مستخدم Validation Password وإنشاء لوحة قابلة للطي مصممة حسب رغبتك. للاطلاع على قائمة أكثر تقدمًا، راجع www.adobe.com/go/learn_dw_sprypassword_custom_ae.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryValidationPassword.css. يقوم Dreamweaver بحفظ ملف SpryValidationPassword.css في المجلد SpryAssets الخاص بموقعك عند إنشاء عنصر واجهة مستخدم Spry Validation Password. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
ملاحظة:
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Validation Password بسهولة مباشرةً في الملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS لعنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
تصميم عنصر واجهة مستخدم Validation Password (إرشادات عامة)
-
افتح الملف SpryValidationPassword.css.
-
حدد موقع قاعدة CSS لجزء عنصر واجهة المستخدم المطلوب تغييره. على سبيل المثال، لتغيير لون خلفية حالة عنصر واجهة مستخدم Password المطلوبة، قم بتحرير القاعدة input.passwordRequiredState في الملف SpryValidationPassword.css.
-
قم بإجراء التغييرات التي تريدها على CSS، ثم احفظ الملف.
يتضمن الملف SpryValidationPassword.css تعليقات ممتدة، تشرح التعليمة البرمجية والغرض من قواعد معينة. لمزيد من المعلومات، راجع التعليقات الموجودة في الملف.
تصميم نص رسالة خطأ عنصر واجهة المستخدم Validation Password
افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Password باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص.
-
لتغيير تصميم نص رسائل خطأ عنصر واجهة مستخدم Validation Password، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك.
النص المطلوب تغييره
قاعدة CSS ذات الصلة
الخصائص ذات الصلة المطلوب تغييرها
نص رسالة الخطأ
.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg color: #CC3333; border: 1px solid #CC3333;
تغيير ألوان خلفية عنصر واجهة مستخدم Validation Password
-
لتغيير ألوان خلفية عنصر واجهة مستخدم Validation Password، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير قيم لون الخلفية الافتراضية.
اللون المطلوب تغييره
قاعدة CSS ذات الصلة
الخاصية ذات الصلة المطلوب تغييرها
لون خلفية عنصر واجهة المستخدم في الحالة الصالحة
.passwordValidState input, input.passwordValidState background-color: #B8F5B1;
لون خلفية عنصر واجهة المستخدم في الحالة غير الصالحة
input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input background-color: #FF9F9F;
لون خلفية عنصر واجهة المستخدم عند التركيز
.passwordFocusState input, input.passwordFocusState background-color: #FFFFCC;
تسجيل الدخول إلى حسابك