Password Validation


Author: Vincent Berger
Created: Jan 25, 2019






Check if your password is secure enough.
The code will check if a password contains a lowercase, uppercase, number & symbol. If not, then it is not a secure password.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div id="wrapper">
            <h3>Password Validation</h3>
            <input type="text" id="input" placeholder="Insert password"/>
            <br />
            <div id="output">
                
            </div>
        </div>
    </body>
</html>
				

CSS:

body {
    margin:0px;
}
h3 {
    color:#379;
}

#wrapper {
    position:absolute; padding:10px;
    top:20vh; left:25vw; 
}
#input {
    outline:none; border:0px;
    border-bottom:solid 3px #379;
}
				

Javascript:

window.onload=(inp,out)=>{
    inp=document.getElementById("input");
    out=document.getElementById("output");
    inp.addEventListener("keyup",()=>{
        if(/^[a-z]+$/g.test(inp.value)){
            out.style.color="red";
            out.innerHTML=`Insecure password: <br>${inp.value}`;
        }else if(/^[a-zA-Z]+$/g.test(inp.value)){
            out.style.color="red";
            out.innerHTML=`Insecure password: <br>${inp.value}`;
        }else if(/^[a-zA-Z0-9]+$/ig.test(inp.value)){
            out.style.color="red";
            out.innerHTML=`Insecure password: <br>${inp.value}`;
        }else if(/^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/ig.test(inp.value)){
            out.style.color="green";
            out.innerHTML=`Secure password: <br>${inp.value}`;
        }else if(inp.value===""){
            out.style.color="white";
            out.innerHTML=("");
        }
    });
}
				


Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top