Подтвердить что ты не робот

Проверка пароля не менее 6 символов

Я написал код подтверждения для пароля и подтвердил пароль, который проверяет, соответствуют ли они или нет. Кроме того, существует условие, которое проверяет, имеет ли длина моего пароля менее 6 символов и записывает/отображает ошибку, если они меньше 6 символов. Но мой код работает некорректно: когда я переключаюсь в поле 2, условие поля 1 не проверяется, и если оба условия верны, ошибка все же появляется.

Вот мой код:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
    else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}  
         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        
4b9b3361

Ответ 1

Используйте код ниже. Во-первых, pass1.length неверно. Вы должны написать pass1.value.length. Во-вторых,, я добавил сравнение двух блоков в конце, так как сначала вы должны проверить длину первого блока. Кроме того, эту функцию следует также вызывать и при изменении первого блока.

Удачи!

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
 	
    if(pass1.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
        return;
    }
  
    if(pass1.value == pass2.value)
    {
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else
    {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
}  
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>
        

Ответ 2

Попробуйте следующее:

if(pass1.value.length > 5)

Ответ 3

перед:

 if(pass1.length > 5)

после

 if(pass1.value.length > 5)

и вы должны проверить равенство после того, как все подходит, например длина или допустимые символы и т.д.

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value.length > 5 && pass2.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"

        if(pass1.value == pass2.value)
        {
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "ok!"
        }
        else
        {
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " These passwords don't match"
        }
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }

}
<input name="password" type="password" placeholder="password"  id="pass1"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>

Ответ 4

if (pass1.value.length > 5)

Удостоверьтесь, что не применяйте trim(), потому что trim удалит пустое пространство, а пустое место в пароле не является допустимым символом.

Ответ 5

Когда вы проверяете длину pass1, вы фактически не проверяете его значение - pass1.length > 5 - вы должны изменить его на pass1.value.length > 5

Ответ 6

Вы можете сделать:

if (pass1.value.trim().length > 5)

Ответ 7

Чтобы проверить длину, вам придется писать вот так

if (pass1.value.length > 5)

а затем ваш код работает нормально

Ответ 8

Вы можете воспользоваться регулярным выражением, чтобы сделать валидацию для вас. Например: я допускаю некоторые специальные символы в этом пароле, и число больше 6

regex = pass1.value.search(/^[a-zA-Z0-9+&@#/%?=~_|!:,.;]{6,}+$/);

if(regex){
    message.innerHTML="Invalid Password.";
}else{
    message.innerHTML = " you have to enter at least 6 digit!";
}

Ответ 9

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	
	if(pass1.value.length > 5){
		pass1.style.backgroundColor = goodColor;
		message.style.color = goodColor;
		message.innerHTML = "character number ok!"
		}
		else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
	
}  
<input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>

Ответ 10

По-видимому простая задача проверки пароля может быть сложной, и может быть трудно определить, почему код не работает должным образом. Основная задача состоит в том, чтобы определить условную логику, а затем преобразовать эту логику в рабочий код.

Вы хотите выполнить следующее:

  • Введите пароль пользователя длиной не менее 6 символов
  • Подтвердите пароль пользователя
  • Предоставьте пользователю соответствующую обратную связь, помогающую пользователю через процесс.

Один способ преобразования этого в условную логику (в псевдокоде) выглядит следующим образом:

if (password length is less than 6)
  inform user that password should be at least 6 characters
else if (passwords do not match)
  ask user to confirm password
else
  inform user that passwords match, all is ok

Но мой код работает некорректно: когда я переключаюсь в поле 2, условие поля 1 не проверяется, и если оба условия верны, ошибка все же появляется.

Ваш код следует за другой логикой (в псевдокоде):

if (passwords match)
  inform user that passwords match, all is ok
else
  inform user that passwords do not match

if (password is more than 5 characters)
  inform user that the password is long enough
else
  inform user that the password should be at least 6 characters

Одна из проблем в вашем коде заключается в том, что длина пароля - это последнее, что вы проверяете, поэтому первая проверка if/else избыточна (она никогда не даст никакой обратной связи, даже если совпадают пароли), поскольку ваш код всегда заканчивается с предоставлением обратной связи о длине пароля.

Другая проблема заключается в том, что ваш код будет принимать пароли, которые совпадают, даже если они меньше 6 символов, поэтому сначала нужно проверить длину пароля, а затем проверить, совпадают ли оба пароля.

Кроме того, ваш код выполняет эти проверки только тогда, когда пользователь записывает в поле 2 ('# pass2'), вам нужно добавить обработчик событий в 'onkeyup' поля 1.

Таким образом, ваша логика кода должна быть переписана. Вот один из нескольких способов сделать это:

function checkPass() {
  var neutralColor = '#fff'; // 'white';
  var badColor     = '#f66'; // 'red';
  var goodColor    = '#6f6'; // 'green';
  
  var password1 = getElm('pass1').value;
  var password2 = getElm('pass2').value;

  //if password length is less than 6
  if (password1.length < 6) {
    feedback('Enter a password of at least 6 characters');
    //we do not care about pass2 when pass1 is too short
    setBGColor('pass2', neutralColor);
    //if pass1 is blank, set neutral background
    if (password1.length === 0) {
      setBGColor('pass1', neutralColor);
    } else {
      setBGColor('pass1', badColor);
    }
  //else if passwords do not match
  } else if (password2 !== password1) {
    //we now know that pass1 is long enough
    feedback('Confirm password');
    setBGColor('pass1', goodColor);
    //if pass2 is blank, set neutral background
    if (password2.length === 0) {
      setBGColor('pass2', neutralColor);
    } else {
      setBGColor('pass2', badColor);
    }
  //else all is well
  } else {
    feedback('Passwords match');
    setBGColor('pass1', goodColor);
    setBGColor('pass2', goodColor);
  }
}

//helper function for document.getElementById()
function getElm(id) {
  return document.getElementById(id);
}

//helper function for setting background color
function setBGColor(id, value) {
  getElm(id).style.backgroundColor = value;
}

//helper function for feedback message
function feedback(msg) {
  getElm('error-nwl').innerHTML = msg;
}
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass()"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl">Enter a password of at least 6 characters</div>

Ответ 11

Проверка формы здания

Когда проверять?

Прежде всего, есть три места, где мы хотим проверить:

  • Проверка формы, когда пользователь отправляет.
  • Проверка полей, когда пользователь их редактирует.
  • Проверка данных при получении сервером.

Причина, по которой нам нужно проверять данные на стороне сервера (независимо от того, насколько хороши другие две проверки), заключается в том, что злоумышленник может получить доступ к коду HTML и JavaScript, запросам на подделку или обойти проверку на стороне клиента с помощью другие средства.

Зачем нам нужна проверка на стороне клиента, если валидация будет выполняться на стороне разрыва? Короткий ответ заключается в том, что проверка на стороне клиента уменьшает количество плохих представлений и, следовательно, снижает трафик. Вторая мотивация заключается в том, что проверка на стороне клиента позволяет быстрее и проще давать обратную связь пользователю.

С учетом сказанного, текущее сообщение будет касаться только проверки на стороне клиента.

Теперь, чтобы запустить код проверки, нам нужно обработать соответствующие события. Рекомендуемый способ добавления обработчиков событий в JavaScript - это вызов addEventListener в целевом элементе. К сожалению, поддержка браузера не подходит для старых версий Internet Explorer.

Итак, мы собираемся вывести код из Вам не нужно jQuery для добавления обработчиков событий:

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

Примечание: attachEvent является проприетарным расширением Microsoft.


Теперь нам нужно решить, какие события мы хотим обработать...

Первоначальный соблазн состоит в том, чтобы обрабатывать каждое тонкое изменение полей. Недостатком этого является то, что, просто набрав один символ, система может сообщать пользователю, что это неправильно (потому что значение слишком короткое или что-то еще). Это можно интерпретировать так, как если бы этот единственный символ, который был набран, был неправильным, а затем пользователь останавливается, чтобы разобрать, что не так перед разбирательством.

Люк Вроблевски, "Inline Validation in Web Forms" , 2009 показывает, что использование события "размытия" (потеря фокуса) для проверки приводит к тому, что пользователи заполняют формы быстрее.

Ниже приводится выдержка из статьи:

(...) Тот факт, что участники были смущены, когда простые вопросы были отмечены как "правильные", поддерживает эту интерпретацию:

"Вы говорите мне, что я ввел правильное имя или мое имя?"

"Является ли это подтверждением правильно отформатированного почтового индекса или моего правильного почтового индекса?"

Эти типы вопросов участников вызвали некоторые незначительные проблемы во время тестирования. Наши участники знали, что у нас нет возможности узнать их правильное имя или почтовый индекс, поэтому они знали, что зеленый галочка не означает "правильный". Но что они думали, что это значило? Они были уверены - и в этом была проблема. Не зная, что такое сообщение, наши участники перестали задавать вопросы модератора, а не уверенно отвечать на вопросы, которые были очень легкими.

(...)

Когда несколько участников заметили сообщение об ошибке при попытке ответить на вопрос, они ввели один дополнительный символ в поле ввода, чем ожидали обновления сообщения. Если обновленное сообщение продолжало показывать ошибку, они ввели другой символ, затем ожидали, что сообщение проверки будет обновлено снова и т.д., Что приведет к более длительному среднему времени завершения.

(...)

"Его разочаровывает то, что у вас нет шанса поместить что-либо в поле, пока он не станет красным на вас".

"Когда я щелкнул в поле" Имя ", сразу же пришло в голову сказать, что [мое имя] слишком короткое. Ну, конечно, это так! Я даже не начал!"

"Мне было очень неприятно, как появились красные кресты, когда вы не закончили набирать текст. Это просто отвлекает".

Итак, первоначальная рекомендация - использовать событие blur для проверки.

Тем не менее, это еще одна проблема. Если проверка выполняется только на blur, когда статус поля установлен как недействительный, его редактирование будет продолжать отображаться как недопустимое - пока пользователь не покинет поле. Это может привести к тому, что пользователи задаются вопросом, по-прежнему ли они набраны, не подозревая, что проверка не произойдет, пока они не покинут поле.

Чтобы предотвратить эту проблему, у нас будет следующее состояние для каждого поля:

  • Empty. Это оригинальный статус поля. Не начинайте показывать все как недействительные.
  • Validating. Пользователь вводит или редактирует поле. Он не действителен и недействителен.
  • Действительно. Пользователь поместил действительный ввод в поле.
  • Invalid. Пользователь помещает недопустимый ввод в поле.

Это приводит к следующей диаграмме состояний:

Диаграмма состояния проверки

Диаграмма, созданная с помощью yUML.

Примечание: для практических целей Empty и Validating можно считать эквивалентными. В обоих состояниях пользователю не предоставляется статус проверки. Кроме того, должно быть возможно вернуться в состояние Empty, когда пользователь сбрасывает форму (если указан такой параметр).

Тогда мы имеем следующее:

  • Пусто: на reset событие.
  • Validating: on input, change и keyup.
  • Допустимые или Недействительные: на blur.

Примечание. Еще одна вещь, которую вы можете рассмотреть, - использовать timer, чтобы начать проверку, чтобы запустить один раз после некоторого интервала из input, change и keyup. Чтобы правильно это сделать, этот таймер должен быть reset каждый раз, когда выполняется одно из этих событий. Это код, подверженный ошибкам, и для небольшого значения.


Где проверить?

HTML5 уже добавляет различные способы валидация формы данных. Тем не менее поддержка браузера не самая лучшая. Это означает, что даже если мы решим продлить проверку HTML5, она может не работать в зависимости от браузера.

Итак, вместо этого мы пропустим проверку HTML5 и добавим наши события:

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

Теперь, учитывая, что мы только строим проверку формы, а не структуру или библиотеку проверки формы, мы могли бы просто получить элемент и поля формы, чтобы выполнить любую проверку, которую мы хотим. Если мы это сделаем, форма не должна быть параметром.

Чтобы наш код запускался при загрузке страницы, мы можем взять еще один фрагмент из статьи "Вам не нужно jQuery:

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

Теперь нам нужно иметь возможность сохранять статус полей. Это может быть сделано пользовательскими свойствами, атрибутами или классами для элемента элемента. Использование классов для отметки проверки также поможет с представлением формы.

При проверке формы (submitHandler) вам придется решить, хотите ли вы снова полагаться на сохраненную проверку поля или на проверку. Если у вас есть проверка в поле, которое зависит от других полей, вы можете пометить эту проверку как старую, так что код проверки формы будет знать для повторной проверки. В любом случае, проверка будет выполнена путем перехода по каждому полю.

В соответствии с resetHandler и validatingHandler идея состоит в том, чтобы удалить как статус valid, так и invalid по причинам, описанным ранее пользователем.

Готово правильно, не должно быть ситуации, когда пользователю предоставляется ложный сигнал. То есть код никогда не должен показывать поле как недопустимое, когда оно действительно; ни одно из них не должно указывать поле как действительное, если оно недействительно.


Вы можете отключить проверку HTML5. Это можно сделать, добавив в форму атрибут novalidate. Это также можно сделать с помощью JavaScript следующим образом:

form.setAttribute('novalidate', 'novalidate');

Вы также можете увидеть свойство willValidate полей.

Если вы хотите использовать проверку HTML5, вы можете использовать функцию checkValidity.

Далее чтение: Проверка на стороне клиента с HTML5 и HTML5-формы: JavaScript и API проверки достоверности.

Кроме того, статья Проверка ограничений: проверка на стороне клиента для веб-форм У TJ VanToll есть хорошие примеры проверки HTML5.


Если бы мы построили библиотеку проверки полной формы, мы бы столкнулись с проблемой чтения атрибутов проверки HTML5 и имитировали их поведение, чтобы обеспечить его для старых браузеров. Нам также нужно будет беспокоиться о том, как указать другие правила проверки, которые HTML5 не предоставляет (например, проверка соответствия двух полей), без необходимости настраивать код JavaScript для каждого случая (поскольку, как я уже сказал, это то, что мы делаем библиотека).


Где разместить отзывы

Предложение юзабилити состоит в построении обратной связи. То есть добавить встроенные элементы рядом с полем с обратной связью в виде текста. Затем вы можете использовать CSS или JavaScript, чтобы он выглядел фантастически.

Причиной этого предложения является то, что люди, которые полагаются на читателей экрана, получат обратную связь в правильном месте. Кроме того, это будет иметь смысл, даже если CSS отключен или не загружается.

Это в значительной степени то, что вы уже делаете, используя элемент span. Вам понадобится одна на поле. И, возможно, один для всей формы - вы хотите поместить некоторое сообщение, которое НЕ напрямую связано с каким-либо из полей.


Примечание: при чтении значения поля мы обычно используем field.value. Длина значения field.value.length. Однако следует отметить, что в зависимости от типа ввода способ считывания значения изменяется. Для radio и checkbox используйте field.checked. Для select вам нужно field.options (необходимо соблюдать осторожность для полей select, которые могут иметь несколько значений). Наконец image, reset, 'button' и submit не имеют значения, которое нужно проверить.


Слишком много, слишком сложно?

Вам не обязательно это делать! Другие делали это раньше, и вы можете взять код у них! Muahahahah!

Это будет сделано с использованием библиотеки с открытым исходным кодом, такой как validate.js или мой собственный thoth.js. Другие ответы предложили другие библиотеки.

Вы должны иметь возможность найти дополнительные атрибуты. Я не претендую на составление исчерпывающего списка.

Считается хорошей практикой повторного использования кода. Вы также можете изучить код таких библиотек, чтобы узнать, как они работают.


Старый ответ

Начну с добавления комментариев к вашему коду:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}
         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Ответ 12

Использовать код ниже

valid=pass1.value.search(/^[[email protected]_]{6,20}$/);

if(valid != 0){
    message.innerHTML="Invalid Password.";
}else if(pass1.value.length < 6){
      message.innerHTML = " you have to enter at least 6 digit!"
}

Ответ 13

Найти добавленный комментарий для выполненных изменений, так как он теперь работает нормально.

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	
	if(pass1.value.length > 5){           ////////just added value here//
		pass1.style.backgroundColor = goodColor;
		message.style.color = goodColor;
		message.innerHTML = "character number ok!"
		}
		else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
	
}
<input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>

Ответ 14

Если вы используете jQuery, вы можете использовать этот плагин jQuery Validation

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Makes "field" required to be the same as #other</title>
        <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
    </head>
    <body>
        <form id="myform">
            <label for="password">Password</label>
            <input id="password" name="password" />
            <br/>
            <input type="submit" value="Validate!">
        </form>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
        <script>
            // just for the demos, avoids form submit
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });
            $( "#myform" ).validate({
                rules: {
                    password: {
                        minlength: 6,
                        maxlength: 25, 
                        required: true
                    }
                }
            });
        </script>
    </body>
</html>

Ответ 15

В вашей проблеме проверяется длина одного DOM node, а не длина значения узлов DOM.

В настоящее время у вас есть эквивалент

var pass1 = document.getElementById('pass1');

if ( pass1.length > 5 ) {...

Единственный DOM node имеет длину 1, если он найден, он никогда не может быть больше 5.
Вы хотели бы проверить длину значения

var pass1 = document.getElementById('pass1');

if ( pass1.value.length > 5 ) {...

Но вы действительно хотите это сделать при вводе в поле первого пароля, а не во втором.

Используя правильные обработчики событий, лучшие проверки и классы для сообщений, это будет способ сделать это

var pass1   = document.getElementById('pass1');
var pass2   = document.getElementById('pass2');
var message = document.getElementById('error-nwl');

function msg(_msg, good, time) {
    message.innerHTML = _msg;
    message.classList.toggle('bad', !good);
    message.classList.add('visible');
    setTimeout(function() {message.classList.remove('visible')}, time);
}

pass1.addEventListener('input', function() {
    this.classList.remove('bad');
    this.classList.remove('good');
    if (this.value.length > 5) {
        this.classList.add('good');
        msg("Character number ok!", true, 1800);
    }
});

pass1.addEventListener('blur', function() {
    if (this.value.length <= 5) {
        this.classList.remove('good');
        this.classList.add('bad');
        msg("You have to enter at least 6 digit!", false, 1800);
    } else if (pass1.value !== pass2.value) {
    	pass2.classList.remove('good');
        pass2.classList.add('bad');
        msg("Passwords don't match", false, 3000);
    }
});

pass2.addEventListener('input', function() {
    if (this.value.length > 5) {
        var matches  = pass1.value === pass2.value;
        var _message = matches ? "Passwords match!" : "Passwords don't match";
        pass2.classList.toggle('good', matches);
        pass2.classList.toggle('bad', !matches);
        msg(_message, matches, 3000);
    } else {
        message.classList.remove('visible');
        this.classList.remove('good');
        this.classList.remove('bad');
    }
});

pass2.addEventListener('blur', function() {
    var matches  = pass1.value === pass2.value;
    if (!matches) {
        pass2.classList.remove('good');
        pass2.classList.add('bad');
        msg("Passwords don't match", matches, 3000);
    }
});
#pass1.bad,
#pass2.bad {
  background: #ff6666;
}
#pass1.good,
#pass2.good {
  background: #66cc66;
}
#error-nwl {
  opacity: 0;
  color: #66cc66;
  transition: opacity 0.3s ease-in-out;
}
#error-nwl.bad {
  color: #ff6666;
}
#error-nwl.visible {
  opacity: 1;
}
<input name="password" type="password" placeholder="password" id="pass1" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" />
<div id="error-nwl"></div>

Ответ 16

Кажется, что есть несколько вещей, которые вы хотите сделать.

  • Пароль должен иметь длину не менее 6 символов, иначе сообщение "вам нужно ввести не менее 6 цифр!". в красном.
  • Retype должен совпадать с паролем, иначе появится сообщение "Эти пароли не совпадают" в красном.
  • Если условие "Both" прошло, тогда отобразите зеленое сообщение "ok!". (Мое предположение).
  • Если поля пусты, то нет специального цвета. (Мое предположение.)
  • Если пароль действителен, но тип повтора пуст, тогда отобразите зеленый номер сообщения "ok"! (Опять же, думаю).

Мои предложения,

  • Если вы собираетесь использовать onkeyup на pass2, то почему бы не сделать то же самое в pass1?
  • рассмотрим возможность использования onfocusout, а не onkeyup.

Следующий код должен делать то, что вы ищете.

function checkPass() {
  var getTag = Id => document.getElementById(Id);
  var pass1 = getTag('pass1');
  var pass2 = getTag('pass2');
  var message = getTag('error-nwl');
  var str;

  //Logic that handles Password.
  if (!pass1.value)
    pass1.removeAttribute('valid');
  else if (pass1.value.length < 6) {
    pass1.setAttribute('valid', false)
    str = " you have to enter at least 6 digit!";
  } else {
    if (!pass2.value)
      str=" character number ok!";
    pass1.setAttribute('valid', true);}

  //Logic that handles Retype.
  if (!pass2.value)
    pass2.removeAttribute('valid');
  else if (pass1.value != pass2.value) {
    pass2.setAttribute('valid', false);
    str = " These passwords don't match";
  } else
    pass2.setAttribute('valid', true);

  
  //Logic that handles the display of message.
  message.removeAttribute('valid');
  if (pass1.value && pass2.value && !str) {
    message.setAttribute('valid', true);
    message.innerHTML = "ok!"
  } else if (str) {
    message.innerHTML = str;
  } else
    message.innerHTML = '';
  return !!message.valid;

}
#pass1[valid=true] {
  background: #66cc66
}
#pass1[valid=false] {
  background: #ff6666
}
#pass2[valid=true] {
  background: #66cc66
}
#pass2[valid=false] {
  background: #ff6666
}
#error-nwl {
  color: #ff6666
}
#error-nwl[valid=true] {
  color: #66cc66
}
<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl"></div>

Ответ 17

function checkPassSize(field) {
	var pass = document.getElementById(field);
	var message = document.getElementById('error-nwl');
	var goodColor = "#66cc66";
	var badColor = "#ff6666";		
	if (pass.value && pass.value.length > 5) {
		pass.style.backgroundColor = goodColor;
		message.style.color = goodColor;
		message.innerHTML = "character number ok!"
		return true;
	} else {
		pass.style.backgroundColor = badColor;
		message.style.color = badColor;
		message.innerHTML = " you have to enter at least 6 digit!"
		return false;
	}
}

function checkPass() {
	var pass1 = document.getElementById('pass1');
	var pass2 = document.getElementById('pass2');
	var message = document.getElementById('error-nwl');
	var goodColor = "#66cc66";
	var badColor = "#ff6666";
	
	if(checkPassSize('pass1') && checkPassSize('pass2')){
		if (pass1.value == pass2.value) {
			pass2.style.backgroundColor = goodColor;
			message.style.color = goodColor;
			message.innerHTML = "ok!"
		} else {
			pass2.style.backgroundColor = badColor;
			message.style.color = badColor;
			message.innerHTML = " These passwords don't match"
		}
	}								
}
<input name="password" type="password" placeholder="password"
	id="pass1" onkeyup="checkPassSize('pass1');" />
<input name="repeatpassword" type="password"
	placeholder="confirm password" id="pass2"
	onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>

Ответ 18

Вот с рабочим кодом.. Измените pass1.length на pass1.value.length и обновите цвета обоих текстовых полей на основе проверок.

<html>

<head>
    <script>
    function checkPass() {
        var pass1 = document.getElementById('pass1');
        var pass2 = document.getElementById('pass2');
        var message = document.getElementById('error-nwl');
        var goodColor = "#66cc66";
        var badColor = "#ff6666";
        if (pass1.value == pass2.value) {
            pass2.style.backgroundColor = goodColor;
            pass1.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "ok!"
        } else {
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " These passwords don't match"
        }

        if (pass1.value.length > 5 && pass1.value == pass2.value) {
            pass1.style.backgroundColor = goodColor;
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "character number ok!"
        } else {
            pass1.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " you have to enter at least 6 digit!"
        }

    }
    </script>

</head>

<body>
  <input name="password" type="password" placeholder="password" onkeyup="checkPass();" id="pass1" />
  <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass();  return false;" />
  <div id="error-nwl"></div>
</body>
</html>

Ответ 19

Этот код проверяет оба поля во время ввода.

<!DOCTYPE html>
<html>

<body>

    <input name="password" type="password" placeholder="password" id="pass1" onkeyup="setStyle(this,document.getElementById('pass2'));" />
    <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="setStyle(this,document.getElementById('pass1'));" />
    <div id="error-nwl"></div>


    <script>
      function isValidLength(element) {
          return (element.value.length > 5);
      }

      function isEqual(element1, element2) {
          if (element1.value.length > 0 && element2.value.length > 0)
              return (element1.value == element2.value);
          return true;
      }

      function setStyle(element, element2) {
          var message = document.getElementById('error-nwl');
          var goodColor = "#66cc66";
          var badColor = "#ff6666";
          var isValidPWD = isValidLength(element) && isEqual(element, element2);

          if (isValidPWD) {
              if (isValidLength(element)) {
                  element.style.backgroundColor = goodColor;
                  message.style.color = goodColor;
                  message.innerHTML = "character number ok!"
              }
              if (isEqual(element, element2)) {
                  element.style.backgroundColor = goodColor;
                  message.style.color = goodColor;
                  message.innerHTML = "ok!"
              }
          } else {
              if (!isValidLength(element)) {
                  element.style.backgroundColor = badColor;
                  message.style.color = badColor;
                  message.innerHTML = " you have to enter at least 6 digit!"
              }

              if (!isEqual(element, element2)) {
                  element.style.backgroundColor = badColor;
                  message.style.color = badColor;
                  message.innerHTML = " These passwords don't match"
              }
          }
      }
  </script>


</body>

</html>

Ответ 20

Вы можете переместить второй блок if else в первый if и получить то, что вы, возможно, захотели. Вам также необходимо изменить pass1.length на pass1.value.length.

Я также думаю, что вы должны проверять изменения в обоих коробках ввода. Если вы этого не сделаете, пользователь может вернуться в первое поле ввода и впоследствии изменить пароль, а состояния проверки не будут обновляться.

Вот обновленный код.

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
	
    if(pass1.value.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        //message.innerHTML = "character number ok!"
        if(pass1.value == pass2.value) {
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "Ok!"
        }
    	else{
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "These passwords don't match!"
        }
    }
    else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "You have to enter at least 6 digits!"
    }
}  
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>
        

Ответ 21

вы можете использовать validform.js.

Например:

<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script>
<script>
$(".demoform").Validform();

</script>
<form class="demoform">
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="Password range between 6~15 bits!" />
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="The account passwords you entered for the two time were not consistent." /></form>

Ответ 22

Попробуйте это!

function resetcol() 
{
    pass1.style = "";
    pass2.style = "";

}

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if (pass1.value == pass2.value && pass1.value.length > 5){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else{
        pass1.style = 
        message.style.color = badColor;
        message.innerHTML = "Bad input. your passwords must match, and be at least 6 characters long."
    }
	    	
}  
         <input name="password" type="password" placeholder="password"  id="pass1" onkeyup="resetcol();"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="resetcol();" onchange="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Ответ 23

Лучше назначить прослушиватель событий элементам в коде после загрузки DOM, поэтому вы можете опустить несколько вызовов getElementById, но в любом случае это ваш код исправлен:

var goodColor = "#66cc66", badColor = "#ff6666";

function checkPass() {
  
  message = document.getElementById('error-nwl');
  pass1 = document.getElementById('pass1');
  pass2 = document.getElementById('pass2');

  if (pass1.value.length > 5) {
    pass1.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    message.innerHTML = "character number ok!"

    if (pass2.value == pass1.value) {
      pass2.style.backgroundColor = goodColor;
      message.style.color = goodColor;
      message.innerHTML = "ok!"
    }
    else {
      pass2.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " These passwords don't match"
    }

  }
  else {
    pass1.style.backgroundColor = badColor;
    message.style.color = badColor;
    message.innerHTML = " you have to enter at least 6 digit!"
  }

}  
<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl"></div>

Ответ 24

Вы должны иметь в виду, что существует множество возможностей события и порядка события.

if(user>0 and user<5){//output username should be 6}
if(pass>0 and pass<5){//output password should be 6}
if(user>5 and pass>5){
    if(user==pass){//password match}
    else{//invalid password}
}

Я изменил ваш код для работы

function checkPass() {
  var pass1 = document.getElementById('pass1');
  var pass2 = document.getElementById('pass2');
  var message = document.getElementById('error-nwl');
  var goodColor = "#66cc66";
  var badColor = "#ff6666";

  if (pass1.value.length > 5) {

    pass1.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    if (pass1.value == pass2.value) {
      pass1.style.backgroundColor = goodColor;
      pass2.style.backgroundColor = goodColor;
      message.style.color = goodColor;
      message.innerHTML = "ok!";
    } else {
      if (pass2.value.length > 0) {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match";
      }
    }
  } else {
    if (pass1.value.length <= 5 && pass1.value.length > 0) {
      pass1.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " you have to enter at least 6 digit user!";
      if (pass2.value.length > 0) {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
      }
    }
    if (pass2.value.length <= 5 && pass2.value.length > 0) {
      pass2.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " you have to enter at least 6 digit pass!"
    }
  }

}
<html>

<body>
  <input name="password" type="password" placeholder="password" onkeyup="checkPass();" id="pass1" />
  <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass();" />
  <div id="error-nwl"></div>
</body>

</html>

Ответ 25

вы можете использовать две функции для выполнения этого задания.

checkPass1() проверяет, что пароль достаточно длинный. checkPass2() проверяет соответствие этих паролей. В случае, если какой-либо пользователь может сначала заполнить # pass2, я добавляю checkPass2() в checkPass1().

function checkPass1() 
{
    var pass1 = document.getElementById('pass1');
    var message = document.getElementById('length-error');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    var normalColor = "#ffffff"
    if (pass1.value.length <= 5)
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
    else
    {
        pass1.style.backgroundColor = normalColor;
        message.style.color = goodColor;
        message.innerHTML = " the length of password is long enough";
    }
    checkPass2();
}
function checkPass2()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('confirm-error');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value)
    {
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
    else
    {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
}
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass1()"/>
    <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass2()" />
    <div id="length-error"></div>
    <div id="confirm-error"></div>