JAVASCRIPT

Javascript validate password

let pattern = new RegExp("^(?=(.*[a-zA-Z]){1,})(?=(.*[0-9]){2,}).{8,}$"); //Regex: At least 8 characters with at least 2 numericals
    let inputToListen = document.getElementById('pass-one'); // Get Input where psw is write
    let valide = document.getElementsByClassName('indicator')[0]; //little indicator of validity of psw

    inputToListen.addEventListener('input', function () { // Add event listener on input
        if(pattern.test(inputToListen.value)){
            valide.innerHTML = 'ok';
        }else{
            valide.innerHTML = 'not ok'
        }
    });

js password check

var code = document.getElementById("password");

var strengthbar = document.getElementById("meter");
var display = document.getElementsByClassName("textbox")[0];

code.addEventListener("keyup", function() {
  checkpassword(code.value);
});


function checkpassword(password) {
  var strength = 0;
  if (password.match(/[a-z]+/)) {
    strength += 1;
  }
  if (password.match(/[A-Z]+/)) {
    strength += 1;
  }
  if (password.match(/[0-9]+/)) {
    strength += 1;
  }
  if (password.match(/[$@#&!]+/)) {
    strength += 1;

  }

  if (password.length < 6) {
    display.innerHTML = "minimum number of characters is 6";
  }

  if (password.length > 12) {
    display.innerHTML = "maximum number of characters is 12";
  }

  switch (strength) {
    case 0:
      strengthbar.value = 0;
      break;

    case 1:
      strengthbar.value = 25;
      break;

    case 2:
      strengthbar.value = 50;
      break;

    case 3:
      strengthbar.value = 75;
      break;

    case 4:
      strengthbar.value = 100;
      break;
  }
}

check passwords match javascript

function checkPasswordsMatch(input1, input2) {
  if (input1.value !== input2.value) {
    console.log('Passwords do not match')
    // showError(input2, 'Passwords do not match')
    //its better practice to create a css class that will show a red border
    //or a css class that will show some text under the input than to call 
    //the class, see below for example and see source for complete project 
  }
}
//all other code is below
//! Show Success Outline
function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

//! Show input Error Message
function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const small = formControl.querySelector('small');
  small.innerText = message;
}

//css
.form-control.error small{
  visibility: visible;
}


.form-control small {
  color:var(--error-color);
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
}


.form-control.success input{
  border-color: red;
}

//html
<div class="form-control">
          <label for="password">Password</label>
          <input type="password" id="password" placeholder="Enter password" />
          <small>Error message</small>
        </div>
        <div class="form-control">
          <label for="password2">Confirm Password</label>
          <input
            type="password"
            id="password2"
            placeholder="Enter password again"
          />
          <small>Error message</small>
        </div>