Frontend Password validation with Regex

To do a frontend password validation with Regex we need 2 things, a form with a password field, and a js that does the job.

  1. the fields:
    [code]
    <form class=”form-horizontal” action=”” method=”POST” role=”form”>

    <div class=”form-group”>
    <label for=”password” class=”col-md-4 control-label”>New Password</label>

    <div class=”col-md-6″>
    <input type=”password” name=”password” id=”password” class=”form-control pwd” pattern=”^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$”>
    <div class=”progress”>
    <div class=”progress-bar progress-bar-danger” id=”password-progress-bar” role=”progressbar” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 0″>
    <span class=”sr-only” >0% Complete (danger)</span>
    <span id=”progress-bar-text” style=”color:#000;”></span>
    </div>
    </div>
    <p class=”control-label” style=”text-align: left;” id=”changethecolor”>A password should contain at <span class=”sixChar”>minimum 10 letters</span>, <span class=”specialChar”>a special character</span>, at least an Uppercase letter and <span class=”number”>at least a number.</span></p>
    </div>
    </div>
    <div class=”form-group{{ $errors->has(‘password_confirmation’) ? ‘ has-error’ : ” }}”>
    <label for=”password-confirm” class=”col-md-4 control-label”>Confirm New Password</label>
    <div class=”col-md-6″>
    <input id=”password-confirm” type=”password” class=”form-control” name=”password_confirmation” required>
    </div>
    </div>

    <div class=”form-group”>
    <div class=”col-md-7″>
    <button type=”submit” class=”btn btn-primary update-password pull-right” style=”margin-right: 33px;”>
    <i class=”fa fa-btn fa-pencil”></i> Change Password
    </button>
    </div>
    <div class=”col-md-3″>
    <button class=”btn btn-danger” style=”margin-left: 50px;” onclick=”window.history.back()”>
    <i class=”fa fa-btn”></i> Cancel
    </button>
    </div>
    </div>
    </form>

    [/code]

  2. The js.
    [code]
    function changePasswordProgressBar(ev) {
    // less than 8 characters
    var wrost = 5,
    // minimum 8 characters
    bad = /^(?=.{6,}).*/,
    //Alpha Numeric plus minimum 8
    good = /^(?=.*?[a-z]).{5,}$/, //pattern=”^(?=.*[A-Za-z])(?=.*d)(?=.*[$@$!%*#?&])[A-Za-zd$@$!%*#?&]{6,}$”
    //Must contain at least one upper case letter, one lower case letter and (one number OR one special char).
    better = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{10,}$/,
    betterOne = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$/,
    betterTwo = /^(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$/,
    betterthree = /^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$/,
    //Must contain at least one upper case letter, one lower case letter and (one number AND one special char).
    best = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-/=)+(]).{10,}$/,
    password = $(ev.target).val(),
    strength = ‘0’,
    progressClass = ‘progress-bar progress-bar-‘,
    ariaMsg = ‘0% Complete (danger)’,
    $progressBarElement = $(‘#password-progress-bar’),
    $something = $(‘#changethecolor’);

    if (best.test(password) === true) {
    strength = ‘100%’;
    progressClass += ‘success’;
    ariaMsg = ‘100% Complete’;
    } else if (better.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    } else if (betterOne.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    }
    else if (betterTwo.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    }
    else if (betterthree.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    }
    else if (good.test(password) === true) {
    strength = ‘50%’;
    progressClass += ‘warning’;
    ariaMsg = ‘50% Complete’;
    } else if (bad.test(password) === true) {
    strength = ‘30%’;
    progressClass += ‘warning’;
    ariaMsg = ‘Still too low’;
    } else if (password.length >= 1 && password.length <= wrost) {
    strength = ‘10%’;
    progressClass += ‘danger’;
    ariaMsg = ‘Too low’;
    } else if (password.length < 1) {
    strength = ‘0’;
    progressClass += ‘danger’;
    ariaMsg = ‘0% Complete’;
    }

    $progressBarElement.removeClass().addClass(progressClass);
    $progressBarElement.attr(‘aria-valuenow’, strength);
    $progressBarElement.css(‘width’, strength);
    $progressBarElement.find(‘span.sr-only’).text(ariaMsg);
    }

    $(document).ready(function () {
    $(“.pwd”).first().on(‘keyup’, changePasswordProgressBar);
    });
    [/code]

CategoriesUncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *