Jquery strong password validation

Question

I'm sorry to ask but I'm soo new to javascript and Jquery!
I've been struggling to make this piece of code from a plugin I'm using to accept only strong passwords.

It meets the minimum length requirement, matching fields and checks the field is not empty; but I can not get it to incorporate AZ, az, 1-0 etc...Here is my best try that doesn't work

Any help would be much appreciated!

function strongpass_submit(url) {   

    jQuery("#strong-error", jQuery("#action")).hide();
    var witherror = false;
    var passval = jQuery("#strong-pw", jQuery("#action")).val();
    var okval = jQuery("#strong-pw-confirm", jQuery("#action")).val();
    if (passVal == '') {
            jQuery("#strong-error", jQuery("#action")).html('Please enter a password.').fadeIn();
            return false;

//THIS IS THE PART I'M HAVING TROUBLE WITH
    } else if (okval.search(/^([A-Z0-9.%+-]+@@[A-Z0-9.-]+.[A-Z]{2,6})*([,;][\s]*([A-Z0-9.%+-]+@@[A-Z0-9.-]+.[A-Z]{2,6}))*$/i)) {
        jQuery("#strong-error", jQuery("#action")).html('Password must be strong.').fadeIn();
        return false;
// UNTIL HERE

    } else if (okval.length < 8) {
        jQuery("#strong-error", jQuery("#action")).html('Password must be at least 8 characters.').fadeIn();
        return false;

    } else if (okval == '') {
        jQuery("#strong-error", jQuery("#action")).html('Please re-enter your password.').fadeIn();
        return false;
    } else if (passval != okval ) {
        jQuery("#pass-error", jQuery("#action")).html('Passwords do not match.').fadeIn();
        return false;
    }
    jQuery('#action #maindiv').fadeOut('fast', function(){
        jQuery('#popout').show();
        jQuery.ajax({
            url: url,
            dataType: 'json',
            type: 'post',
            data: jQuery('#action form').serialize(),
            success: function(data){
                if(data.confirm == 'success'){
                    jQuery('#cboxLoadingGraphic').fadeOut('fast', function(){
                        jQuery('#action #second').fadeIn();
                    });
                }
                else {
                    jQuery('#cboxLoadingGraphic').fadeOut('fast', function(){
                        jQuery('#action #openerror').fadeIn();
                    });
                }
            }
        });
    });
};

Answer 1

<style>
   .weak{
   color:red;
   font-size: 17px;
   }
   .good{
   color: #17da17;
   font-size: 17px;
   }
   .strong{
   color: #339333;
   font-size: 17px;
   }
</style>
<form id="password-check">
   <label>Password : </label>
   <input name="pass" id="pass" type="password"/>
   <span id="message"></span>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(document).ready(function()
   {
   $('#pass').keyup(function()
   {
   $('#message').html(checkStrength($('#pass').val()))
   }) 
   function checkStrength(password)
   {
    var useremail="testing@gmail.com";
    var username="testing";
   
    var strength = 0
    if (password.length < 6) { 
        $('#message').removeClass();
        $('#message').addClass('weak');
        return 'Too short!';
    }
    if ((username.indexOf(password) > -1) || (password.indexOf(username)> -1))
    {
        $('#message').removeClass();
        $('#message').addClass('weak');
        return "Password must be different from user name!"; 
    }
    if ((useremail.indexOf(password) > -1) || (password.indexOf(useremail)> -1))
    {
        $('#message').removeClass();
        $('#message').addClass('weak');
        return "Password must be different from user email!"; 
    }
    if (password.length > 7) strength += 1
    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
    if (strength < 2 )
    {
        $('#message').removeClass();
        $('#message').addClass('weak');
        return 'Weak!';   
    }
    else if (strength == 2 )
    {
        $('#message').removeClass();
        $('#message').addClass('good');
        return 'Good!';  
    }
    else
    {
        $('#message').removeClass();
        $('#message').addClass('strong');
        return 'Strong!';
    }
   }
   });
</script>

Answer 2

It seems your regex in these problematic lines is wrong.
In order to validate an input with such requirements you can use this code, with multiple regular expressions:

 var okval = "Abcd123!"; var print = (/[AZ]/.test(okval) && /[0-9]/.test(okval) && /[^A-Za-z0-9]/.test(okval) && okval.length>7); console.log(print);