JavaScript Password Strength Validator Code

Let's see the strength rules first.

1 Any combination of less than 6 characters, weak, a combination of any number of characters of the same character, weak;

2 any number of characters in the combination of two types of characters, in;

3 12-digit characters below the three-or four-class character combinations, strong;

4 12-bit characters above the three-or four-class character combinations, very good.

The code is as follows

Copy Code

<title> Password Strength Detection </title> <style type= "Text/css" > body {font:12px/1.5 Arial; input{float:left;font-size:12px; width:150px;font-family:arial border:1px solid #ccc; padding:3px; input.correct{border:1px Solid Green; input.error{border:1px solid red; #tips {float:left; margin:2px 0 0 20px;} #tips span {float:left; width:50px; height:20px; Color: #fff; Overflow:hidden;background: #ccc; margin-right:2px;line-height:20px; Text-align:center;} #tips. S1. Active {background: #f30;} #tips. S2. Active {background: #fc0;} #tips. S3. Active {background: #cc0;} #tips. S4. Active {background: #090;} </style> <script type= "Text/javascript" > Window.onload = function () { var otips = document.getElementById ("Tips"); var oinput = document.getelementsbytagname ("input") [0]; var Aspan = Otips.getelementsbytagname ("span"); var aStr = ["Weak", "medium", "strong", "very good"]; var i = 0; Oinput.onkeyup = Oinput.onfocus = Oinput.onblur = function () { var index = Checkstrong (this.value); This.classname = index? "Correct": "Error"; Otips.classname = "s" + index; for (i = 0; i < aspan.length i++) Aspan[i].classname = aspan[i].innerhtml = ""; Index && (aspan[index-1].classname = "active", aspan[index-1].innerhtml = Astr[index-1])} }; Detecting Password strength function Checkstrong (svalue) { var modes = 0; if (Svalue.length < 6) return modes; if (/d/.test (svalue)) modes++; Digital if (/[a-z]/.test (svalue)) modes++; Lowercase if (/[a-z]/.test (svalue)) modes++; Capital if (/w/.test (svalue)) modes++; Special characters Switch (modes) { Case 1: return 1; Break Case 2: return 2; Case 3: Case 4: Return Svalue.length < 12? 3:4 Break }         } </script> <body> <input type= "Password" value= "maxlength="/> <div "Tips" > <span></span><span></span><span></span><span></span> </div> </body>