ใน workshop นี้จะขอแจก workshop เช็คความแข็งแรงของ password ให้ไปพัฒนาต่อนะครับ โดยจะใช้ JQuery เข้ามามีส่วนช่วยในการจัดการให้ทำทำงานง่ายขึ้น เขียน Code น้อยขึ้น…
เริ่มต้นด้วยหน้าฟอร์มเช็ค password จะใช้ html ทำงานร่วมกัน JQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>How to check password strength using jQuery</title> <!--jQuery Library--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="script.js"></script> </head> <body> <div id="container"> <div id="header"> <h2>Password Strength Checking<h2> </div> <div id="content"> <!-- form start--> <form id="register"> <label for="password">Password : </label> <input name="password" id="password" type="password"/> <span id="result"></span> </form> <!-- form end--> </div> </div> </body> </html> |
ไฟล์ Script ที่ใช้เช็คความแข็งแรงของ Password โดยเช็คตามรูปที่ได้กำหนดไปใน code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
/* jQuery document ready. */ $(document).ready(function() { /* assigning keyup event to password field so everytime user type code will execute */ $('#password').keyup(function() { $('#result').html(checkStrength($('#password').val())) }) /* checkStrength is function which will do the main password strength checking for us */ function checkStrength(password) { //initial strength var strength = 0 //if the password length is less than 6, return message. if (password.length < 6) { $('#result').removeClass() $('#result').addClass('short') return 'Too short' } //length is ok, lets continue. //if length is 8 characters or more, increase strength value if (password.length > 7) strength += 1 //if password contains both lower and uppercase characters, increase strength value if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1 //if it has numbers and characters, increase strength value if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1 //if it has one special character, increase strength value if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 //if it has two special characters, increase strength value if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 //now we have calculated strength value, we can return messages //if value is less than 2 if (strength < 2 ) { $('#result').removeClass() $('#result').addClass('weak') return 'Weak' } else if (strength == 2 ) { $('#result').removeClass() $('#result').addClass('good') return 'Good' } else { $('#result').removeClass() $('#result').addClass('strong') return 'Strong' } } }); |
ต่อด้วยไฟล์ CSS ที่ไว้จัดหน้าตาของโปรแกรมให้มีความสวยงาม สามารถไปพัฒนาต่อได้นะครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
html, body, ul, ol, li, form, fieldset, legend{ margin: 0; padding: 0; } body{ background: #CCC repeat; font-family: 'Vollkorn', serif, Arial; font-size: 15px; line-height: 1.5; } h1, h2, h3, h4, h5, h6, p { margin: 0; color: blue; } p{ margin-bottom:15px; } a{ color:#0073BF; text-decoration:none; } #container{ width:600px; margin:0 auto; background:#ffffff; padding:20px; } #header{ text-align:center; margin:20px 0 40px; } #footer{ text-align:center; margin-top:40px; } #register { margin-left:100px; } #register label{ margin-right:5px; } #register input { padding:5px 7px; border:1px solid #d5d9da; box-shadow: 0 0 5px #e8e9eb inset; width:250px; font-size:1em; outline:0; } #result{ margin-left:5px; } #register .short{ color:#FF0000; } #register .weak{ color:#E66C2C; } #register .good{ color:#2D98F3; } #register .strong{ color:#006400; } input{ focus:green; } |
ผลการทำงาน
