密碼強度 JavaScript

Question

你能幫我找出為什么我的代碼不起作用嗎？ 我必須檢查密碼是否為 a)4-6 個字符長（必須包含一個或多個數字），以便密碼為中等 b）7 個字符（必須包含一個或多個數字）為強密碼。 c) 除了 a) 和 b) 之外的任何東西都是弱的。

<!DOCTYPE html>
    <html lang="pl">
    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>
    <body>    

    <form>
        <p>
            <input type="password" id="password" />
            <button onlick="spr()">check</button>
        </p>
    </form>
    <div id="result"></div>     

    <script>
    function spr()
    {
        var str = document.getElementById("password");
        var medium = /^[A-Za-z0-9]{4,6}$/;
        var strong = /^[A-Za-z0-9]{7,}$/;

        if(medium.test(str))
        document.getElementById("result").innerHTML="medium";
        else if(silne.test(str))
        document.getElementById("result").innerHTML="strong";
        else
        document.getElementById("result").innerHTML="weak";

        return false;
    }   
    </script>
</body>
</html>

Answer 1

按照這個https://jsfiddle.net/umesh1990/hxjf74cz/35/#我已經使用javascript完成了

 function password_validate(txt) { var val1 = 0; var val2 = 0; var val3 = 0; var val4 = 0; var val5 = 0; var counter, color, result; var flag = false; if (txt.value.length <= 0) { counter = 0; color = "transparent"; result = ""; } if (txt.value.length < 8 & txt.value.length > 0) { counter = 20; color = "red"; result = "Short"; } else { document.getElementById(txt.id + "error").innerHTML = " "; txt.style.borderColor = "grey"; var regex = /^(?=.*\\d)(?=.*[az])(?=.*[AZ])(?=.*[^a-zA-Z0-9])(?!.*\\s).{8,15}$/; // document.getElementById("pass_veri").style.display="block"; var fletter = /[az]/; if (fletter.test(txt.value)) { val1 = 20; } else { val1 = 0; } //macth special character var special_char = /[-!$%^&*()_+|~=`{}\\[\\]:";'<>?,.\\/]/; if (special_char.test(txt.value)) { val2 = 30; } else { val = 0; } /*capital_letter*/ var cap_lett = /[AZ]/; if (cap_lett.test(txt.value)) { val3 = 20; } else { val = 0; } /*one numeric*/ var num = /[0-9]/; if (num.test(txt.value)) { val4 = 20; } else { val4 = 0; } /* 8-15 character*/ var range = /^.{8,50}$/; if (range.test(txt.value)) { val5 = 10; } else { val5 = 0; } counter = val1 + val2 + val3 + val4 + val5; if (counter >= 30) { color = "skyblue"; result = "Fair"; } if (counter >= 50) { color = "gold"; result = "Good"; } if (counter >= 80) { color = "green"; result = "Strong"; } if (counter >= 90) { color = "green"; result = "Very Strong"; } } document.getElementById("prog").style.width = counter + "%"; document.getElementById("prog").style.backgroundColor = color; document.getElementById("result").innerHTML = result; document.getElementById("result").style.color = color; }

 body { font-family: 'Rajdhani', sans-serif; background-color: #E4E4E4; } /* tooltip*/ .hint { width: 258px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: absolute; left: 0px; border: 1px solid #CC9933; background-color: #FFFFCC; display: none; padding: 20px; font-size: 11px; } .hint:before { content: ""; position: absolute; left: 100%; top: 24px; width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 1px solid transparent; border-left: 22px solid #CC9933; } .hint:after { content: ""; position: absolute; left: 100%; top: 26px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 1px solid transparent; border-left: 20px solid #FFFFCC; } .parent { position: relative; } .progress { height: 7px; } #progres { display: block; } p { margin: 0px; font-weight: normal; } .form-control { width: none; margin-left: 260px; margin-top: 25px; width: 200px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group col-lg-12 parent "> <label class="hint" id="pass-hint"> Password Strength:<span id="result"></span> <br> <div class="progress" id="progres"> <div class="progress-bar progress-bar-danger" role="progressbar" id="prog"> </div> </div> <p> passowrd must have atleast 8 charatcer</p> </label> <input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********" oninput="password_validate(this);document.getElementById('progres').style.display='block';"> <i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i> <span id="passerror" class="help-block error"></span> </div>

它可能會幫助你

密碼強度 JavaScript

問題描述

1 個解決方案

解決方案1
0 2017-02-18 09:22:52

密碼強度 JavaScript

問題描述

1 個解決方案

解決方案1 0 2017-02-18 09:22:52

解決方案1
0 2017-02-18 09:22:52