This article mainly introduces PHP to determine the strength of the password method, involving PHP regular judgment, Ajax interaction and page element dynamic operation related implementation skills, the need for friends can refer to the next
Specific as follows:
First, PHP page
$score = 0;if (!empty ($_get[' value ')) {//received value $str = $_get[' value ');} else{ $str = ';} if (Preg_match ("/[0-9]+/", $str)) { $score + +;} if (Preg_match ("/[0-9]{3,}/", $str)) { $score + +;} if (Preg_match ("/[a-z]+/", $str)) { $score + +;} if (Preg_match ("/[a-z]{3,}/", $str)) { $score + +;} if (Preg_match ("/[a-z]+/", $str)) { $score + +;} if (Preg_match ("/[a-z]{3,}/", $str)) { $score + +;} if (Preg_match ("/[_|\-|+|=|*|!| @|#|$|%| ^|&| (|)] +/", $str)) { $score + = 2;} if (Preg_match ("/[_|\-|+|=|*|!| @|#|$|%| ^|&| (|)] {3,}/", $str)) { $score + +;} if (strlen ($STR) >=) { $score + +;} echo $score; exit;
Second, HTML page
<table cellspacing= "0" cellpadding= "0" ><tr><td> Enter password: </TD><TD colspan= "4" ><input type= "Password" value= "name=" Newpwd "onblur=" GetPassword (); "/></tr><tr><td> Password strength: </td ><TD id= "idSM1" align= "Middle" width= "20%" ><span style= "height:0px; line-height:0px; " > </span><span id= "idSMT1" style= "Display:none" > Weak </span></td><td id= "idSM2" style= " Border-left: #fff 1px solid "align=" middle "width=" 20% "><span style=" height:0px; line-height:0px; " > </span><span id= "idSMT0" style= "display:inline; Font-weight:normal; COLOR: #666 "> No </span><span id=" idSMT2 "style=" Display:none "> Medium </span></td><td id=" IdSM3 "style=" Border-left: #fff 1px solid "align=" middle "width=" 20% "><span style=" height:0px; line-height:0px; " > </span><span id= "idSMT3" style= "Display:none" > Strong </span></td><td id= "idSM4" style= " Border-left: #fff 1px solid "AligN= "Middle" width= "20%" > <span style= "height:0px; line-height:0px; " > </span><span id= "idSMT4" style= "Display:none" > Excellent </span></td></tr></table >
Third, JS
<script>function GetPassword () {var value = $ ("input[name= ' newpwd ')"). attr (' value '); $.get (' Index.php?r=account/testpwd ', {value:value},function (data) {if (data>=1 && data<=3) { $ (' #idSM1 '). attr (' class ', ' PwdChkCon1 '); Weak $ (' #idSM2 '). attr (' class ', ' PwdChkCon0 '); $ (' #idSM3 '). attr (' class ', ' PwdChkCon0 '); $ (' #idSM4 '). attr (' class ', ' PwdChkCon0 '); $ (' #idSMT1 '). Show (); $ (' #idSMT0 '). Hide (); $ (' #idSMT2 '). Hide (); $ (' #idSMT3 '). Hide (); $ (' #idSMT4 '). Hide (); } else if (data>=4 && data<=6) {//Medium $ (' #idSM1 '). attr (' class ', ' PwdChkCon2 '); $ (' #idSM2 '). attr (' class ', ' PwdChkCon2 '); $ (' #idSM3 '). attr (' class ', ' PwdChkCon0 '); $ (' #idSM4 '). attr (' class ', ' PwdChkCon0 '); $ (' #idSMT0 '). Hide (); $ (' #idSMT1 '). Hide (); $ (' #idSMT2 '). Show (); $ (' #idSMT3 '). Hide (); $ (' #idSMT4 '). Hide (); } else if (data>=7 && data<=8) {//strong $ (' #idSM1 '). attr (' class ', ' PwdChkCon3 '); $ (' #idSM2 '). attr (' class ', ' PwdChkCon3 '); $ (' #idSM3 '). attr (' class ', ' PwdChkCon3 '); $ (' #idSM4 '). attr (' class ', ' PwdChkCon0 '); $ (' #idSMT0 '). Hide (); $ (' #idSMT1 '). Hide (); $ (' #idSMT2 '). Hide (); $ (' #idSMT3 '). Show (); $ (' #idSMT4 '). Hide (); } else if (data>=9 && data<=10) {//excellent $ (' #idSM1 '). attr (' class ', ' pwdChkCon4 '); $ (' #idSM2 '). attr (' class ', ' pwdChkCon4 '); $ (' #idSM3 '). attr (' class ', ' pwdChkCon4 '); $ (' #idSM4 '). attr (' class ', ' pwdChkCon4 '); $ (' #idSMT0 '). Hide (); $ (' #idSMT1 '). Hide (); $ (' #idSMT2 '). Hide (); $ (' #idSMT3 '). Hide (); $ (' #idSMT4 '). Show (); } });}
Iv. CSS
<style>.pwdchkcon0 {border-right: #bebebe 1px solid; Border-bottom: #bebebe 1px solid; Background-color: #ebebeb; Text-align:center;}. PwdChkCon1 {border-right: #bb2b2b 1px solid; Border-bottom: #bb2b2b 1px solid; Background-color: #ff4545; Text-align:center;}. PwdChkCon2 {border-right: #e9ae10 1px solid; Border-bottom: #e9ae10 1px solid; Background-color: #ffd35e; Text-align:center;}. PwdChkCon3 {border-right: #267a12 1px solid; Border-bottom: #267a12 1px solid; Background-color: #3abb1c; Text-align:center;}. PwdChkCon4 {border-right: #267a12 1px solid; Border-bottom: #267a12 1px solid; Background-color: #3abb1c; Text-align:center;} </style>
Related recommendations:
JS uses regular password strength verification
JS password strength check Regular expression (with code)
Verify user-set password strength Regular expression