Validate a password using HTML and JavaScript

Validate a password using HTML and JavaScript

Last Updated : 30 Sep, 2024

Validating a password using HTML and JavaScript involves ensuring that user-entered passwords meet certain criteria, such as length, complexity, or character types (e.g., uppercase, lowercase, numbers, and symbols). This process enhances security by enforcing strong password requirements before form submission.

A password is correct if it contains:

At least 1 uppercase character.
At least 1 lowercase character.
At least 1 digit.
At least 1 special character.
Minimum 8 characters.

Approach :

Retrieve Input Value: The test_str() function retrieves the value from the input field with id="t1" using document.getElementById().
Check Password Criteria: Regular expressions are used to check for lowercase, uppercase, digits, special characters, and minimum length of 8 characters.
Set Validation Result: If all conditions are met, the result is set to "TRUE"; otherwise, it is set to "FALSE".
Display Output: The result is displayed in a readonly input field with id="t2", showing whether the password is valid or not.

Example: In this example we are following above-explained approach.

<!DOCTYPE html>
<html>

<head>
    <title>validate password</title>
    <script type="text/javascript">
        function test_str() {
            let res;
            let str =
                document.getElementById("t1").value;
            if (str.match(/[a-z]/g) && str.match(
                /[A-Z]/g) && str.match(
                    /[0-9]/g) && str.match(
                        /[^a-zA-Z\d]/g) && str.length >= 8)
                res = "TRUE";
            else
                res = "FALSE";
            document.getElementById("t2").value = res;

        }
    </script>
</head>

<body>
    <p>
        String:
        <input type="text" placeholder="abc" id="t1" />
        <br />
        <br />
        <input type="button" value="Check" onclick="test_str()" />
        <br />
        <br /> Output:
        <input type="text" id="t2" readonly />
    </p>
</body>

</html>

Output:

Password-validation — Validate a password using HTML and JavaScript Example Output

Validate a password using HTML and JavaScript

A

AnmolAgarwal

Improve

Article Tags :

HTML

Similar Reads

How to Toggle Password Visibility using HTML and JavaScript ?

In this article, we will learn about how to toggle password visibility using HTML and JavaScript. Passwords are those input types that take hidden inputs. It can be shown and hidden from the user by toggling its type between text and password. Approach The following approach will be implemented to t

Build a PIN Pad using HTML CSS & JavaScript

In this article, we will see how to implement a PIN pad for entering and checking whether the PIN is valid with the help of HTML, CSS, and JavaScript. Here, we have provided a numeric keypad/PIN pad through which the user can input the PIN. Once the user enters a PIN and hits "OK", the code validate

JavaScript - How to Validate Form Using Regular Expression?

To validate a form in JavaScript, you can use Regular Expressions (RegExp) to ensure that user input follows the correct format. In this article, we'll explore how to validate common form fields such as email, phone number, and password using RegExp patterns.1. Validating an Email AddressOne of the

HTML | DOM Input Password value Property

The DOM Input Password value Property is used to set or return the value of the value attribute of a Password Field. The Value attribute specifies the initial value of the input Password Field. The value may be a single address or a list of address. Syntax: It is used to return the value property.pa

Design a Tip Calculator using HTML, CSS and JavaScript

The tip is the money given as a gift for good service to the person who serves you in a restaurant. In this project, a simple tip calculator is made that takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person.

JavaScript Application For Email Validation

The Email Validation Project in JavaScript aims to create an efficient system for verifying the authenticity and format of email addresses. This tool ensures data accuracy, reduces errors, and enhances the user experience by preventing invalid email submissions.Project PreviewEmail validation Applic

Hide the Email Id in a form using HTML and JavaScript

Hiding an email ID in a form using HTML and JavaScript involves obfuscating or masking the email address to enhance privacy or security. This can be achieved by partially hiding the email characters or storing the email in hidden fields until needed for processing.Examples:Input :robin_singh@gmail.c

JavaScript Form Validation

JavaScript form validation checks user input before submitting the form to ensure it's correct. It helps catch errors and improves the user experience.What we are going to CreateIn this article, we will guide you through creating a form validation application. This application will validate essentia

HTML | DOM Input Password size Property

The DOM Input Password size Property is used to set or return the value of the size attribute of an Input Password Field. The size attribute is used to define the width of an Input Password field. Its default value is 20. Syntax: It is used to return the size property.passwordObject.sizeIt is used t

HTML | DOM Input Password select() Method

The Input Password select() Method in HTML DOM is used in selecting the content of the password field. Syntax: passwordObject.select() Parameters: It does not accepts any parameter. Return Value: It does not return any value. Example: This example uses Input Password select() Method to select passwo