כיצד ליצור מספר טלפון פשוט בודק

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

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

במדריך זה, תראה כיצד הוסף בורר מספר טלפון פשוט לשדה קלט. אנו נשתמש HTML5, CSS3 ו- JavaScript כדי להגיע GUI אתה יכול לראות ולבדוק את ההדגמה להלן. אנו גם נשתמש בביטויים רגילים כדי לוודא שהמשתמשים באמת מזינים מספר טלפון חוקי.

1. צור את שדה מספר הטלפון

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

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

.2 צור את מסך החיוג

ה מסך חיוג J רשת של מספרים מ 0 עד 9 ועוד כמה תווים מיוחדים. זה יכול להיעשות עם או HTML

הנה, אני אראה לך כיצד ליצור את הטבלה מסך חיוג ב- JavaScript. אתה יכול, כמובן, להוסיף את הטבלה ישירות קוד המקור HTML אם אתה מעדיף את זה ככה.

ראשית, ליצור חדש 'שולחן' רכיב ב DOM באמצעות createElement () שיטה. גם לתת את זה 'חייג' מזהה.

 / * יצירת מסך חיוג * / var dial = document.createElement ('טבלה'); dial.id = 'dial'; 

הוסף ל לולאה כדי להכניס את ארבע שורות שולחן החיוג. לאחר מכן, עבור כל שורה, לרוץ אחרת ל לולאה על מנת להוסיף שלושה תאים לכל שורה. סמן כל תא עם ה 'dialDigit' מעמד.

 עבור (var rowNum = 0; rowNum < 4; rowNum++)  var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++)  var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();   

השניים ל לולאות מעל לחשב את הספרות כי נכנס לתאי השולחן חיוג - את הערכים של cell.textContent רכוש - בדרך הבאה:

 (1 + 1) + (3 +) + * (* 1) + (0 + 3) + (0 + 3) + 0 * 3) = 3 / * שורה שניה * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * וכו '* / 

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

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

 עבור (var rowNum = 0; rowNum < 4; rowNum++)  var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++)  /* if last row */ if (rowNum === 3)  cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break;  cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();   

ה מסך החיוג הושלם כעת, הוסף אותו #dialWrapper מיכל HTML שיצרת בשלב 1 באמצעות שתי שיטות DOMYou

1. ה querySelector () השיטה post בחר את המיכל
2. ה appendChild () השיטה post צירוף מסך החיוג - שנערך ב חייג משתנה - למכולה

 Document.querySelector ('# dialWrapper'). appendChild (חיוג); 

.3 הגדר את מסך החיוג

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

אתה לא בהכרח צריך להישאר עם הסטיילינג שלי, אבל לא לשכוח הוסף user-select: none; רכוש post #dial מיכל כך שבעוד המשתמש לוחץ על הספרות, את הטקסט לא ייבחר על ידי הסמן.

 #dial width: 200px; גובה: 200px; border-קריסה: קריסה; text-align: center; מקומות קרובים -ms-user-select: none; -webkit-user-select: none; -Moz-user-select: none; user-select: none; צבע: # 000; box-shadow: 0 0 6px # 999;  .dialDigit border: 1px solid #fff; הסמן: מצביע; צבע רקע: rgba (255,228,142, .7);  

.4 הצג את מסך החיוג בלחיצה

ראשית, הוסף את נראות: מוסתר; כלל סגנון #dial בקובץ CSS ל הסתר את מסך החיוג כברירת מחדל. הוא יוצג רק כאשר המשתמש לוחץ על סמל החיוג.

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

לשם כך, עליך להשתמש לעיל querySelector () וה addEventListener () שיטות. האחרון מצרף אירוע קליקים כדי לחייג את הסמל חיוג שיחות toggleDial () פונקציה.

ה toggleDial () פונקציה משנה את החשיפה של המסך חיוג מוסתר אל גלוי, ובחזרה.

 Document.querySelector ('# dialIcon'). addEventListener ('לחץ', toggleDial); הפונקציה toggleDial () dial.style.visibility = dial.style.visibility === 'מוסתר' || dial.style.visibility === "? '' גלוי ':' מוסתר '; 

5. הוסף את הפונקציונליות

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

ה dialNumber () פונקציה מוסיף את הספרות אחת אחת אל ה תוכן המאפיין של שדה הקלט המסומן ב- #בטלפון מזהה.

 phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent;  dialDigits = document.querySelectorAll ('dialDigit'); (var i = 0; i < dialDigits.length; i++)  dialDigits[i].addEventListener('click', dialNumber);  

עכשיו, יש לך מסך חיוג עובד כדי להזין שדה מספר טלפון.

כדי לשמור על קשר עם CSS, לשנות את צבע הרקע של הספרות שלהם : רחף ו : פעילים (כאשר המשתמש לוחץ על זה) קובע.

 .מחוון background-color: rgb (255,228,142);  .dialDigit: פעיל background-color: # FF6478;  

6. הוסף אימות ביטוי רגיל

הוסף אימות פשוט regex - - כדי לאמת את מספר הטלפון בזמן שהמשתמש מזין את הספרות לשדה הקלט. על פי חוקי האימות אני משתמש, מספר הטלפון יכול להתחיל רק עם ספרה או + אופי, ולקבל את - אופי אחר.

אתה יכול לראות את הדמיה של הביטוי הרגיל שלי על המסכים איך מתחת נוצר עם App Debuggex.

ניתן גם לאמת את מספר הטלפון בהתאם לתבנית מספר הטלפון של המדינה או האזור שלך.

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

כאשר הקלט אינו מאמת, אמת () צריך לתפקד תן משוב למשתמש.

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

 תבנית = חדש regExp ("^ ^ \\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); פונקציה לאמת (txt) / 8 לפחות 8 תווים עבור טלפון תקף לא. אם (! template.test (txt) || txt.length < 8)  phoneNo.style.border = '2px solid red'; return false;  else phoneNo.style.border = 'initial'; return true;  

7. בצע את האימות

ה אמת () פונקציות צריך להיקרא על מנת לבצע את האימות. התקשר אליה dialNumber () פונקציה שיצרת בשלב 5 כדי לאמת את הערך של בטלפון משתנה.

שים לב שאני גם הוסיף אימות נוסף עבור תווים מקסימליים (לא יכול להיות יותר מ 15) באמצעות אם הצהרה.

 פונקציה dialNumber () var val = phoneNo.value + this.textContent; / / מקסימום תווים מותר, 15 אם (val.length> 15) לחזור שווא; אימות (val); phoneNo.value = val;  

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

כיצד ליצור בלוג סטטי באמצעות קקטוס [OS X]

כיצד ליצור סיסמה חזקה (ולזכור את זה)

כיצד ליצור קיצור דרך כדי לשנות את שרת ה- DNS שלך ב - Windows

המאמר הבא

כיצד ליצור מערך RAID תוכנה ב - Windows 7

המאמר הקודם

כיצד ליצור קיצור דרך ל - Windows Update ב - Windows