keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Password Meter

Password Meter.

Password Meter is a custom jQuery plugin that visually displays password strength based on defined rules like length, digits, symbols, and letter casing.

Basic Example

Dynamically measure and display password strength to help users create secure and robust passwords.

visibility visibility_off
Use 8+ characters with a mix of letters, numbers, and symbols.

<div class="password-meter-wrap">
  <label for="pass1" class="form-label">New Password</label>
  <div class="position-relative mb-2">
    <input type="password" class="form-control password-meter dz-password"
	  placeholder="Enter your password"
	  data-password-length="8"
	  data-digit="true"
	  data-symbol="true"
	  data-uppercase="true"
	  data-lowercase="true"
	  placeholder="Enter Password">
	  <span class="show-pass position-absolute top-50 end-0 me-2 translate-middle">
		<span class="show"><i class="material-symbols-outlined">visibility</i></span>
		<span class="hide"><i class="material-symbols-outlined">visibility_off</i></span>
	  </span>
  </div>
  <div class="meter-wrap"></div>
  <div class="form-text mt-2">Use 8+ characters with a mix of letters, numbers, and symbols.</div>
</div>

Password Strength

Validate and guide users by visually indicating password complexity and strength in real time.

visibility visibility_off 

<div class="password-strength-wrap">
  <div class="position-relative mb-2">
    <label for="passwordLabel2" class="form-label">New Password</label>
	<input type="password" class="form-control dz-password password-strength" id="passwordLabel2" placeholder="Enter your password">
	<span class="show-pass position-absolute top-50 end-0 me-2 translate-middle">
	  <span class="show"><i class="material-symbols-outlined">visibility</i></span>
	  <span class="hide"><i class="material-symbols-outlined">visibility_off</i></span>
	</span>
    </div>
  <div class="strength-message"></div>
</div>