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: Update of example4.html
Date: 2 years ago
Size: 2,878 bytes


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();'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="" target="_blank"></a> </body> </html>