הערה:

רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry‏.

אודות רכיב Widget מסוג אימות סיסמה

רכיב Widget מסוג אימות סיסמה של Spry הוא שדה טקסט לסיסמה, שניתן להשתמש בו כדי לכפות כללי סיסמה (לדוגמה, מספר וסוג התווים). רכיב Widget מציג אזהרות או הודעות שגיאה לפי הקלט של המשתמש.

הערה:

יש להכיר את רכיבי Widget מסוג אימות של Spry לפני שתתחיל לעבוד עם רכיב Spry מסוג סיסמה. If you’re not familiar with them, see עבודה עם רכיב Widget מסוג אימות שדה טקסט או כל אחת מהסקירות על יתר רכיבי Widget מסוג אימות לפני שתמשיך. בסקירה זו לא מוצגים כל המושגים הבסיסיים לגבי רכיבי Widget מסוג אימות.

בדוגמה הבאה מוצג רכיב Widget מסוג אימות סיסמה במצבים שונים:

רכיב Widget מסוג אימות סיסמה במצבים שונים
רכיב Widget מסוג אימות סיסמה במצבים שונים

A. רכיב Widget מסוג סיסמה, מצב מספר מינימלי של תווים B. רכיב Widget מסוג סיסמה, מצב מספר מקסימלי של תווים C. רכיב Widget מסוג סיסמה, מצב דרוש 

רכיב Widget מסוג אימות סיסמה כולל מספר מצבים (לדוגמה, חוקי, לא חוקי, ערך דרוש, מספר מינימלי של תווים וכולי). ניתן לשנות את המאפיינים של מצבים אלה בעזרת עריכת קובץ CSS המתאים (SpryValidationPassword.css), בהתאם לתוצאות האימות הרצויות. רכיב Widget מסוג אימות סיסמה יכול לבצע אימות במספר שלבים – לדוגמה, כשמבקר באתר לוחץ מחוץ לשדה טקסט, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.

מצב Initial

המצב כשהדף נטען בדפדפן, או כשמשתמש מאפס את הטופס.

מצב Focus

כשהמשתמש ממקם את נקודת ההכנסה בתוך רכיב Widget.

מצב Valid

כשהמשתמש מזין נתונים כהלכה וניתן למסור את הטופס.

מצב Invalid strength

כשהמשתמש מזין טקסט שאינו עומד בקריטריונים של סיסמה בטוחה לשדה הטקסט של הסיסמה. ‏(לדוגמה, אם תציין שסיסמה חייבת לכלול לפחות שתי אותיות גדולות, והסיסמה שהוזנה אינה כוללת אותיות גדולות או כוללת אות גדולה אחת בלבד).

מצב Required

כשהמשתמש אינו מזין טקסט דרוש בשדה הטקסט.

מצב Minimum Number Of Characters

כשהמשתמש מזין פחות מהמספר המינימלי של תווים הדרוש בשדה הטקסט של הסיסמה.

מצב Maximum Number Of Characters

כשהמשתמש מזין יותר מהמספר המקסימלי של תווים המותר בשדה הטקסט של הסיסמה.

לקבלת הסבר מקיף יותר לגבי אופן הפעולה של רכיבי Widget מסוג אימות סיסמה ומידע נוסף לגבי מבנה רכיבי Widget, ראה www.adobe.com/go/learn_dw_sprypassword_il.

הוספה ועריכה של רכיב Widget מסוג אימות סיסמה

הוספת רכיב Widget מסוג אימות סיסמה

  1. בחר Insert >‏ Spry >‏ Spry Validation Password.
  2. הגדר את האפשרויות בתיבת הדו-שיח Input Tag Accessibility Attributes ולחץ על OK.

הערה:

ניתן גם להוסיף רכיב Widget מסוג אימות סיסמה בעזרת הקטגוריה Spry בחלונית Insert.

שינוי מצב דרוש של רכיב Widget מסוג אימות סיסמה

כברירת מחדל, כל רכיבי widget מסוג אימות סיסמה שתוסיף בעזרת Dreamweaver דורשים קלט של המשתמש כשהם מתפרסמים באתר אינטרנט. עם זאת, תוכל להגדיר שמילוי שדות הטקסט של הסיסמה על-ידי המשתמש יהיה אופציונלי.

  1. בחר רכיב Widget מסוג אימות סיסמה בחלון Document בלחיצה על הכרטיסייה הכחולה של הרכיב.
  2. ב-Property inspector ‏(Window >‏ Properties), סמן או בטל את הסימון באפשרות Required, בהתאם להעדפותיך.

הצגת מצבי רכיב Widget בתצוגת Design

  1. בחר רכיב Widget מסוג אימות סיסמה בחלון Document בלחיצה על הכרטיסייה הכחולה של הרכיב.
  2. ב-Property inspector ‏(Window >‏ Properties), בחר במצב שברצונך לראות מהתפריט הנפתח Preview States. לדוגמה, אם ברצונך לראות רכיב Widget במצבו החוקי, בחר Valid.

קביעה מתי יתבצע האימות

ניתן להגדיר מתי יתבצע האימות – כשמבקר באתר לוחץ מחוץ לרכיב Widget, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.

  1. בחר רכיב Widget מסוג אימות סיסמה בחלון Document בלחיצה על הכרטיסייה הכחולה של הרכיב.
  2. ב-Property inspector ‏(Window >‏ Properties), בחר באפשרות המציינת מתי ברצונך שהאימות יתבצע. ניתן לבחור בכל האפשרויות או באפשרות Submit בלבד.

    Blur

    מבצע אימות בכל פעם שמשתמש לוחץ מחוץ לשדה הטקסט של הסיסמה.

    Change

    מבצע אימות כשהמשתמש משנה טקסט בתוך שדה הטקסט של הסיסמה.

    Submit

    מבצע אימות כשהמשתמש מנסה למסור את הטופס. אפשרות המסירה נבחרת כברירת מחדל, ולא ניתן לבטל את הבחירה בה.

קביעת סיסמה בטוחה

סיסמה בטוחה מתייחסת לדרגה שבה צירופים של תווים מסוימים מתאימים לדרישות שנקבעו לשדה הטקסט של הסיסמה. לדוגמה, אם יצרת טופס שבו המשתמש בוחר סיסמה, ייתכן שתרצה לכפות על המשתמש לכלול מספר מסוים של אותיות גדולות בסיסמה, מספר מסוים של תווים מיוחדים וכן הלאה.

הערה:

כברירת מחדל, אף אחת מהאפשרויות אינה מוגדרת לרכיב Widget מסוג סיסמה.

  1. לחץ על הכרטיסייה הכחולה של רכיב Widget מסוג אימות סיסמה כדי לבחור בה.

  2. הגדר אפשרויות ב-Property inspector (Window >‏ ‏Properties) בהתאם לצורך. המספרים שתזין בשדות האפשרויות הם המספרים הדרושים שהרכיב יאמת. לדוגמה, אם תזין 8 בתיבה Minimum characters, רכיב Widget לא יבצע אימות, אלא אם כן המשתמש יזין שמונה תווים לפחות בשדה הטקסט של הסיסמה.

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

מציין את המספר המינימלי והמקסימלי של תווים מיוחדים (!, @, # וכן הלאה) הדרוש כדי שהסיסמה תהיה חוקית.

אם משאירים כל אחת מהאפשרויות שלעיל ריקות, הדבר גורם לרכיב Widget לא לבצע אימות לפי קריטריון זה. לדוגמה, אם תשאיר את האפשרות Minimum/Maximum numbers ריקה, הרכיב לא יחפש מספרים במחרוזת של הסיסמה.

התאמה אישית של רכיב Widget מסוג אימות סיסמה

למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג אימות סיסמה, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות את כלל CSS לרכיב Widget מסוג אימות סיסמה כדי שתוכל ליצור רכיב בסגנון הרצוי לך. לרשימה מתקדמת של משימות עיצוב סגנונות, ראה www.adobe.com/go/learn_dw_sprypassword_custom_il.

כל כללי CSS המתוארים בסעיפים הבאים מתייחסים לכללי ברירת המחדל המאוחסנים בקובץ SpryValidationPassword.css. Dreamweaver שומר את הקובץ SpryValidationPassword.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב widget של Spry מסוג אימות סיסמה. עיון בקובץ זה יכול להועיל, משום שהוא כולל מידע לגבי סגנונות שונים החלים על רכיב זה.

הערה:

למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג אימות סיסמה בקובץ CSS הנלווה, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך את סגנון CSS של הרכיב. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.

קביעת סגנון לרכיב Widget מסוג אימות סיסמה (הנחיות כלליות)

  1. פתח את הקובץ SpryValidationPassword.css.

  2. אתר את כלל CSS לשינוי חלק מהרכיב. לדוגמה, לשינוי צבע הרקע של מצב נדרש של רכיב Widget מסוג אימות סיסמה, ערוך את הכלל input.passwordRequiredState בקובץ SpryValidationPassword.css.

  3. הכנס שינויים בכלל CSS ושמור את הקובץ.

הקובץ SpryValidationPassword.css כולל הערות מפורטות, המסבירות את הקוד ואת המטרה של כללים מסוימים. למידע נוסף, ראה ההערות בקובץ.

סגנון טקסט הודעת שגיאה ברכיב Widget מסוג אימות סיסמה

כברירת מחדל, הודעות שגיאה לרכיב Widget מסוג אימות סיסמה מופיעות באדום, עם גבול אחיד בעובי פיקסל אחד מסביב לטקסט.

  1. לשינוי סגנון הטקסט של רכיב Widget מסוג אימות סיסמה, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את מאפייני ברירת המחדל, או הוסף מאפייני וערכי סגנון טקסט משלך.

    טקסט לשינוי

    כלל CSS מתאים

    מאפיינים רלוונטיים לשינוי

    טקסט של הודעת שגיאה

    .passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg

    color: #CC3333; border: 1px solid #CC3333;

שינוי צבעי רקע של רכיב Widget מסוג אימות סיסמה

  1. לשינוי צבעי הרקע של רכיב Widget מסוג אימות סיסמה במצבים שונים, השתמש בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את ערכי ברירת המחדל של צבע הרקע.

    צבע לשינוי

    כלל CSS מתאים

    מאפיין רלוונטי לשינוי

    צבע רקע של רכיב Widget במצב חוקי

    .passwordValidState input, input.passwordValidState

    background-color: #B8F5B1;‎

    צבע רקע של רכיב Widget במצב לא חוקי

    input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input

    background-color: #FF9F9F;‎

    צבע רקע של רכיב Widget במצב התמקדות

    .passwordFocusState input, input.passwordFocusState

    background-color: #FFFFCC;

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת