Icontem

File: example4.html

Recommend this page to a friend!
  Classes of Axel Hahn  >  AH JavaScript Password Strength Check  >  example4.html  >  Download  
File: example4.html
Role: Example script
Content type: text/plain
Description: Example script
Class: AH JavaScript Password Strength Check
Calculate and display the strength of a password
Author: By
Last change: added minified version; min version is used in examples now
Date: 2 years ago
Size: 2,878 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
    <head>
        <title>Demo 4 for password checker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="ahpwcheck.class.min.js"></script>
        <link rel="stylesheet" type="text/css" href="example.css" />
        
        <style>
        </style>
    </head>
    <body>
        <h1>Demo 4 for password checker (ahpwcheck.class.js)</h1>
        <nav>
            <a href="example.html">example 1</a>
            <a href="example2.html">example 2</a>
            <a href="example3.html">example 3</a>
            <a href="example4.html" class="active">example 4</a>
            <a href="example5.html">example 5</a>
        </nav>
        
        
        <!-- ************************************************************** -->
        
        
        <h2>Test password on submit</h2>
        <p class="info">
            A demo to react on submit event of a form:<br>
            Type something and press submit. The you get an alert box that shows
            the score of the entered password using the getScore method.
        </p>
        <form onsubmit="return mysubmit();">
            password-field:
            <input type="password" id="ePassword">
            <input type="submit" value="Submit">
        </form>

        <div id="outpwcheck"></div>
        <script id="source">

            var oPwCheck = new ahpwcheck();
            oPwCheck.watch('ePassword', 'outpwcheck');
            
            function mysubmit(){
                var minScore=0.95; // something close to 1 or 1
                var sPassword=document.getElementById('ePassword').value;
                var score=oPwCheck.getScore(sPassword);
                if(score<minScore){
                    alert("Select a better password, please! (score: "+score+")");
                    return false;
                } else {
                    alert("Password is OK. (score: "+score+")");
                    return true;
                }
            }
        </script>

        
        <!-- ************************************************************** -->
        

        <h2>Explaination</h2>
        <p>
            The form contains an attribute "onsubmit"
        </p>
        <pre>&lt;form onsubmit="return mysubmit();"></pre>
        <p>
            In the function "mysubmit()" we can check the score if it is axactly or close to 1.<br>
            With return false the form will not be sent.<br>
        </p>
        
        <script>
            document.write("<pre>" + document.getElementById("source").innerHTML.replace(/</g, "&lt;") + "</pre>");
        </script>
        
        <hr>
        DOCS: <a href="http://www.axel-hahn.de/docs/ahpwcheck/index.htm" target="_blank">http://www.axel-hahn.de/docs/ahpwcheck/index.htm</a>        
    </body>
</html>