<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .wrong{
            width: 20px;
        }
    </style>
</head>
<body>
<div class="col-lg-5" style="margin: 5% auto">
    <div class="card p-3">
        <div class="mb-3">
            <input type="text" id="email"  class="form-control" placeholder="Email Id">
        </div>
        <div class="mb-3">
            <input type="text" id="password" class="form-control" placeholder="Password">
        </div>
        <div class="text-center">
            <button id="login" class="btn btn-primary" disabled>Log In</button>
        </div>
    </div>

    <div class="card p-3 mt-3">
        <span><img class="wrong" id="l" src="Imgs/multiply_48px.png">Min 8 and Max 20 Char</span>
        <span><img class="wrong" id="lo" src="Imgs/multiply_48px.png">One Lower Case</span>
        <span><img class="wrong" id="up" src="Imgs/multiply_48px.png">One Upper Case</span>
        <span><img class="wrong" id="nu" src="Imgs/multiply_48px.png">One Number</span>
        <span><img class="wrong" id="sp" src="Imgs/multiply_48px.png">One Special Symbol</span>
    </div>
</div>
<script>
    var password=  document.getElementById('password');
    document.getElementById('password').addEventListener('keyup',function (event) {

        if(password.value.length>7&&password.value.length<21)
        {
            //Check
            document.getElementById('l').src="Imgs/checkmark_48px.png";
        }else
        {
            //wrong
            document.getElementById('l').src="Imgs/multiply_48px.png";
        }

        var regexL = /[a-z]/;
        if(regexL.test(password.value))
        {
            //Check
            document.getElementById('lo').src="Imgs/checkmark_48px.png";
        }else
        {
            //wrong
            document.getElementById('lo').src="Imgs/multiply_48px.png";
        }

        var regexU = /[A-Z]/;
        if(regexU.test(password.value))
        {
            //Check
            document.getElementById('up').src="Imgs/checkmark_48px.png";
        }else
        {
            //wrong
            document.getElementById('up').src="Imgs/multiply_48px.png";
        }

        var regexN = /[0-9]/;
        if(regexN.test(password.value))
        {
            //Check
            document.getElementById('nu').src="Imgs/checkmark_48px.png";
        }else
        {
            //wrong
            document.getElementById('nu').src="Imgs/multiply_48px.png";
        }

        const regex = /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/;

        if(regex.test(password.value))
        {
            //Check
            document.getElementById('sp').src="Imgs/checkmark_48px.png";
        }else
        {
            //wrong
            document.getElementById('sp').src="Imgs/multiply_48px.png";
        }
            if(password.value.length>7&&password.value.length<21&&regexL.test(password.value)&&regexU.test(password.value)&&regexN.test(password.value)&&regex.test(password.value))
            {

                document.getElementById('login').disabled=false;
            }else
            {

                document.getElementById('login').disabled=true;
            }
    });
</script>
</body>
</html>

Comments

Post a Comment