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:
    <br />
    &lt;form class="form-horizontal" action="" method="POST" role="form"&gt;</p>
    <p>&lt;div class="form-group"&gt;<br />
    &lt;label for="password" class="col-md-4 control-label"&gt;New Password&lt;/label&gt;</p>
    <p>&lt;div class="col-md-6"&gt;<br />
    &lt;input type="password" name="password" id="password" class="form-control pwd" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&amp;*-+/=)(]).{10,}$"&gt;<br />
    &lt;div class="progress"&gt;<br />
    &lt;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"&gt;<br />
    &lt;span class="sr-only" &gt;0% Complete (danger)&lt;/span&gt;<br />
    &lt;span id="progress-bar-text" style="color:#000;"&gt;&lt;/span&gt;<br />
    &lt;/div&gt;<br />
    &lt;/div&gt;<br />
    &lt;p class="control-label" style="text-align: left;" id="changethecolor"&gt;A password should contain at &lt;span class="sixChar"&gt;minimum 10 letters&lt;/span&gt;, &lt;span class="specialChar"&gt;a special character&lt;/span&gt;, at least an Uppercase letter and &lt;span class="number"&gt;at least a number.&lt;/span&gt;&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class="form-group{{ $errors-&gt;has('password_confirmation') ? ' has-error' : '' }}"&gt;<br />
    &lt;label for="password-confirm" class="col-md-4 control-label"&gt;Confirm New Password&lt;/label&gt;<br />
    &lt;div class="col-md-6"&gt;<br />
    &lt;input id="password-confirm" type="password" class="form-control" name="password_confirmation" required&gt;<br />
    &lt;/div&gt;<br />
    &lt;/div&gt;</p>
    <p>&lt;div class="form-group"&gt;<br />
    &lt;div class="col-md-7"&gt;<br />
    &lt;button type="submit" class="btn btn-primary update-password pull-right" style="margin-right: 33px;"&gt;<br />
    &lt;i class="fa fa-btn fa-pencil"&gt;&lt;/i&gt; Change Password<br />
    &lt;/button&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class="col-md-3"&gt;<br />
    &lt;button class="btn btn-danger" style="margin-left: 50px;" onclick="window.history.back()"&gt;<br />
    &lt;i class="fa fa-btn"&gt;&lt;/i&gt; Cancel<br />
    &lt;/button&gt;<br />
    &lt;/div&gt;<br />
    &lt;/div&gt;<br />
    &lt;/form&gt;</p>
    <p>
  2. The js.
    <br />
    function changePasswordProgressBar(ev) {<br />
    // less than 8 characters<br />
    var wrost = 5,<br />
    // minimum 8 characters<br />
    bad = /^(?=.{6,}).*/,<br />
    //Alpha Numeric plus minimum 8<br />
    good = /^(?=.*?[a-z]).{5,}$/, //pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&amp;])[A-Za-z\d$@$!%*#?&amp;]{6,}$"<br />
    //Must contain at least one upper case letter, one lower case letter and (one number OR one special char).<br />
    better = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{10,}$/,<br />
    betterOne = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[#?!@$%^&amp;*-+/=)(]).{10,}$/,<br />
    betterTwo = /^(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&amp;*-+/=)(]).{10,}$/,<br />
    betterthree = /^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&amp;*-+/=)(]).{10,}$/,<br />
    //Must contain at least one upper case letter, one lower case letter and (one number AND one special char).<br />
    best = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&amp;*-/=)+(]).{10,}$/,<br />
    password = $(ev.target).val(),<br />
    strength = '0',<br />
    progressClass = 'progress-bar progress-bar-',<br />
    ariaMsg = '0% Complete (danger)',<br />
    $progressBarElement = $('#password-progress-bar'),<br />
    $something = $('#changethecolor');</p>
    <p>if (best.test(password) === true) {<br />
    strength = '100%';<br />
    progressClass += 'success';<br />
    ariaMsg = '100% Complete';<br />
    } else if (better.test(password) === true) {<br />
    strength = '80%';<br />
    progressClass += 'info';<br />
    ariaMsg = 'Almost Complete';<br />
    } else if (betterOne.test(password) === true) {<br />
    strength = '80%';<br />
    progressClass += 'info';<br />
    ariaMsg = 'Almost Complete';<br />
    }<br />
    else if (betterTwo.test(password) === true) {<br />
    strength = '80%';<br />
    progressClass += 'info';<br />
    ariaMsg = 'Almost Complete';<br />
    }<br />
    else if (betterthree.test(password) === true) {<br />
    strength = '80%';<br />
    progressClass += 'info';<br />
    ariaMsg = 'Almost Complete';<br />
    }<br />
    else if (good.test(password) === true) {<br />
    strength = '50%';<br />
    progressClass += 'warning';<br />
    ariaMsg = '50% Complete';<br />
    } else if (bad.test(password) === true) {<br />
    strength = '30%';<br />
    progressClass += 'warning';<br />
    ariaMsg = 'Still too low';<br />
    } else if (password.length &gt;= 1 &amp;&amp; password.length &lt;= wrost) {<br />
    strength = '10%';<br />
    progressClass += 'danger';<br />
    ariaMsg = 'Too low';<br />
    } else if (password.length &lt; 1) {<br />
    strength = '0';<br />
    progressClass += 'danger';<br />
    ariaMsg = '0% Complete';<br />
    }</p>
    <p>$progressBarElement.removeClass().addClass(progressClass);<br />
    $progressBarElement.attr('aria-valuenow', strength);<br />
    $progressBarElement.css('width', strength);<br />
    $progressBarElement.find('span.sr-only').text(ariaMsg);<br />
    }</p>
    <p>$(document).ready(function () {<br />
    $(".pwd").first().on('keyup', changePasswordProgressBar);<br />
    });<br />
    

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/lagjjail/public_html/kushtrim.net/wp-includes/functions.php on line 3729

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/lagjjail/public_html/kushtrim.net/wp-includes/functions.php on line 3729