JQuery Strong Random Password Generator Plugin

The jQuery fast password generator is a powerful random passwords app that generates random passwords based on combinations of user-defined password strength rules.

javascript strong password generator, generate random password using jquery, script to generate random password, generate random password in javascript

How to make use of it:

1. Add options to the password generator.

<form class="formulario">
  <div class="alert alert-warning" id="alert-no-option" role="alert">
    Select at least one option!
  </div>
  <div class="col-sm">
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="numbers">
      <label class="form-check-label" for="numbers">Numbers [0-9]</label>
    </div>
  </div>
  <div class="col-sm">
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="lowercase">
      <label class="form-check-label" for="lowercase">Lowercase letters [a-z]</label>
    </div>
  </div>
  <div class="col-sm">
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="uppercase">
      <label class="form-check-label" for="uppercase">Uppercase letters [A-Z]</label>
    </div>
  </div>
  <div class="col-sm">
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="special">
      <label class="form-check-label" for="special">Special characters [[email protected]#$%^&*()?]</label>
    </div>
  </div>
  <div class="col-sm">
    <div class="form-floating mb-3" id="quantity-form">
      <input type="number" min="8" class="form-control" id="quantity" value=8 required>
      <label for="quantity">Characters quantity</label>
    </div>
  </div>
  <button type="submit" id="send-button" class="btn btn-primary">Generate</button>
</form>

2. Create an input field to hold the generated password.

<input class="form-control" id="password" type="text" readonly>
<br>
<div class=" text-center alert alert-success" id="copied-alert" role="alert">
  Copied!
</div>

3. Hide the ‘No Option’ and ‘Password Copied’ messages on the web page.

#alert-no-option{
  display: none;
}

#copied-alert{
  display: none;
  margin: 0 auto;
  width: 300px;
  font-size: 20px;
}

4. Load the primary password generator script after the jQuery library and executed it.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/scripts.js"></script>

Strong Random Password Generator Plugin/Github, random password generator html code, password generator, generate password from string, javascript password generator tutorial


See Demo And Download

Official Website(ssokurenko): Click Here

This superior jQuery/javascript plugin is developed by ssokurenko. For extra Advanced Usages, please go to the official website.

Related Posts

Iconpicker-Bootstrap-5

[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…

bootstrap-multiple-image-upload-with-preview

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…

Animating-Split-Flap-Displays-fallblatt

A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

jQuery-SyoTimer-Plugin

jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…

vue-js-periodic-table

Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…