0xD34F

Складываем в массив описания проверок, которым должен быть подвергнут пароль - это будут объекты, состоящие из функции, проверяющей соответствие пароля одному конкретному условию, и сообщения, демонстрируемого пользователю в случае, если проверка прошла неудачно.

Добавляем элементу с паролем обработчик события input, в котором бежим по массиву проверок, передаём функциям текущий пароль, собираем в массив сообщения о допущенных пользователем ошибках.

Как посчитать процент успеха в деле сочинения пароля - это будет отношение количества успешно пройденных проверок к общему количеству проверок, умноженное на сто.

Ну и всё, дальше остаётся только вывести результаты.

<div>
  <input id="password">
</div>
<div>
  <div>Сложность пароля: <span id="strength_percent">0</span>%</div>
  <progress id="strength_progress" max="100" value="0"></progress>
</div>
<div id="errors"></div>

const validations = [
  {
    test: val => val.length >= 8,
    message: 'пароль должен содержать хотя бы 8 символов',
  },
  {
    test: val => /[A-ZА-ЯЁ]/.test(val),
    message: 'пароль должен содержать хотя бы 1 большую букву',
  },
  {
    test: val => /[a-zа-яё]/.test(val),
    message: 'пароль должен содержать хотя бы 1 маленькую букву',
  },
  {
    test: val => /[^\s\da-zа-яё]/i.test(val),
    message: 'пароль должен содержать хотя бы 1 специальный символ (не пробел, букву или цифру)',
  },
  {
    test: val => /\d/.test(val),
    message: 'пароль должен содержать хотя бы 1 цифру',
  },
];

document.querySelector('#password').addEventListener('input', ({ target: { value } }) => {
  const errors = validations.reduce((acc, n) => (
    n.test(value) || acc.push(n.message),
    acc
  ), []);

  const strength = (validations.length - errors.length) / validations.length * 100;

  document.querySelector('#strength_progress').value = strength;
  document.querySelector('#strength_percent').innerText = strength | 0;
  document.querySelector('#errors').innerHTML = errors
    .map(n => `<p>${n}</p>`)
    .join('');
});

Элементам формы добавляем data-атрибут, указывающий, значения каких типов они содержат, и, соответственно, как надо проверять их корректность:

<div class="players">
  <div class="player">
    <input placeholder="*Введите псевдоним" data-type="name">
    <br>
    <input placeholder="*Введите рейтинг" data-type="rating">
  </div>
  <div class="player">
    <input placeholder="*Введите псевдоним" data-type="name">
    <br>
    <input placeholder="*Введите рейтинг" data-type="rating">
  </div>
</div>
<h1 class="message hidden">HELLO, WORLD!!</h1>

Какие вообще есть способы проверки корректности значений - объект, ключами являются имена типов данных, значениями функции, принимающие значения из элементов формы и возвращающие true или false:

const validations = {
  name: val => /\D/.test(val),
  rating: val => /^\d+$/.test(val),
};

Собственно проверка - на форму вешается обработчик события input, внутри которого перебираются элементы формы, из них извлекается имя типа данных, по имени типа данных из объекта с валидаторами извлекается функция проверки, ей передаётся значение элемента, введённое пользователем. Чтобы форма в целом была признана корректно заполненной, каждая из проверок должна оказаться успешной, в зависимости от полученного результата показываем или прячем дополнительный контент. Ну и ещё тот элемент, который пользователь только что редактировал, обрабатывается в особом порядке - в зависимости от результата его проверки у него добавляется или снимается класс, предназначенный для выделения некорректно заполненного элемента:

document.querySelector('.players').addEventListener('input', function(e) {
  const error = Array.from(this.querySelectorAll('[data-type]'), n => {
    const error = !validations[n.dataset.type](n.value);

    if (n === e.target) {
      n.classList.toggle('error', error);
    }

    return error;
  }).some(Boolean);

  document.querySelector('.message').classList.toggle('hidden', error);
});

Остаётся определить стили - для выделения криво заполненных элементов формы и управления видимостью дополнительного контента, который должен стать доступен после корректного заполнения всей формы:

.error {
  color: white;
  background: red;
}

.hidden {
  display: none;
}

data: () => ({
  login: '',
  password: '',
}),

<input v-model="login" name="login" v-validate="{ not_in: password }">
<span v-if="errors.has('login:not_in')">Логин не должен совпадать с паролем</span>

<input v-model="password" name="password" v-validate="{ not_in: login }">
<span v-if="errors.has('password:not_in')">Пароль не должен совпадать с логином</span>

https://jsfiddle.net/o6Lfcajb/