How To Validate Password In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to validate password in JavaScript, here we sets some pattern for password when user giving password it is compare with pattern whether it is similar to pattern then password is correct otherwise notifying user to give correct password.
It is done by match method in regex, it is used to matching pattern with user password if match it returns true otherwise return false.
Step By Step Guide On How To Validate Password In JavaScript :-
Here we defined one input tag for collect password from user and another input for create submit button then one <p> tag defined to show password error or success message for user.
When given password and clicks submit it calls validPass() method.
Here we collects user password and defined password pattern and stored those to respective variables ‘input,pass’.
Then using match() method we checks user given password whether matching with pattern or not, depends on message will displayed to user.
<!DOCTYPE html>
<html>
<head>
<title>
Password Validation
</title>
</head>
<body>
<input type="text" id="p">
<input type="submit" value="Submit" onclick="validPass()">
<p id="msg">Enter Password</p>
<script>
function validPass()
{
var input=document.getElementById('p');
var pass= /^[A-Za-z]\w{7,14}$/;
if(input.value.match(pass)){
document.getElementById('msg').innerHTML='Password correct';
return true;
}
else{
document.getElementById('msg').innerHTML='Must Password Start With Letter and Length Between 7 to 15...';
return false;
}
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined input tag for collects user password with attributes ‘id’ value ‘p’ and another input tag defined for create submit button with ‘onclick’ event to define ‘validPass()’ function call. The <p> tag defined with id ‘msg’ for show message to user on webpage.
- Within <script> tag we defined validPass() function, here we declared variable ‘input’ for stores user password and variable ‘pass’ used to store password pattern.
- Then using if condition we checks whether given password matched with defined pattern then it appends message ‘Password correct’ on <p> tag and returns true.
- Otherwise it appends message ‘Must Password Start with Letter and Length between 7 to 15...’ for notifying user and returns false.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to validate password using javascript.
When we executes our program on browser we can see one input field and submit button user needs to enter password on the input fields after that when user clicks on submit it loads ‘validPass()’ method to match with pattern and if it’s matched then it will return success message otherwise it will return notifying message so user can give expected password on webpage.
I hope this tutorial on how to validate password in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
