Как сделать скрипт для поля пароля. JavaScript [закрыт]

151

18 февраля 2022, 09:00

Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 2 года назад.

Улучшить вопрос

Я первокурсник, никогда ранее не изучал программирование, делайте поправку:) Я пишу сайт HTML, знаю, что выглядит всё криво, но нужна форма регистрации. Вообще моя идея: кликаешь на ссылку, тебя перекидывает на новую страницу с регистрацией. Вроде всё нормально, лишь когда пользователь должен создать пароль — возникают проблемы. Пароль должен иметь не меньше 8 символов, сделано: minlength="8"
Также в нём надо как минимум одну букву заглавную, одну маленькую и одну цифру. Вот только почему-то не выходит у меня сделать проверку. JavaScript я не знаю от слова совсем;)
Вот скрипт, будьте добры, помогите!

var password = document.getElementById("password"); 
var letter = document.getElementById("letter"); 
var capital = document.getElementById("capital"); 
var number = document.getElementById("number"); 
var length = document.getElementById("length"); 
var message = document.getElementById("message"); 
var lowerCaseLetters = /[a-z]/g; 
var upperCaseLetters = /[A-Z]/g; 
var numbers = /[0-9]/g; 
	/*password.onfocus = function() { 
		document.getElementById("message").style.display = "block"; 
	} 
	password.onblur = function() { 
		document.getElementById("message").style.display = "none"; 
	}*/ 
	password.onkeyup = function() { 
		 
		if(password.value.match(lowerCaseLetters)) { 
			letter.classList.remove("invalid"); 
			letter.classList.add("valid"); 
		} else { 
			letter.classList.remove("valid"); 
			letter.classList.add("invalid"); 
			password.validity = false; 
		} 
		 
		if(password.value.match(upperCaseLetters)) { 
			capital.classList.remove("invalid"); 
			capital.classList.add("valid"); 
		} else { 
			capital.classList.remove("valid"); 
			capital.classList.add("invalid"); 
			password.validity = false; 
		} 
		 
		if(password.value.match(numbers)) { 
			number.classList.remove("invalid"); 
			number.classList.add("valid"); 
		} else { 
			number.classList.remove("valid"); 
			number.classList.add("invalid"); 
			password.validity = false; 
		} 
		if(password.value.length >= 8) { 
			length.classList.remove("invalid"); 
			length.classList.add("valid"); 
		} else { 
			length.classList.remove("valid"); 
			length.classList.add("invalid"); 
			password.validity = false; 
		} 
	}	/*The script is not mine, I found it on Google :)*/ 
	 
/*var inputCustomValidation = new CustomValidation(); 
	 
CustomValidation.prototype.checkValidity = function(input) { 
 
  if (!password.value.match(lowerCaseLetters)) { 
	this.validity = false; 
  } 
 
  if (!password.value.match(upperCaseLetters)) { 
	this.validity = false; 
  } 
   
  if(!password.value.match(numbers)) { 
	  this.validity = false; 
  } 
};*/

Answer 1

JavaScript я не знаю от слова совсем;)

Не знаешь - не используй.

input:valid { border: 1px solid green } 
input:invalid { border: 1px solid red }

<form> 
  <input type=text name=login required> 
  <input type=password name=pass required pattern=(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{8,} title="Пароль должен быть не короче 8 символов и содержать строчную и заглавную буквы и цифру"> 
  <button>Зарегистрироваться</button> 
</form>

Answer 2

На js:

    function Validation(text) {
            var validate = /(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{8,}/;
            if (validate.test(text)) {
                letter.classList.remove("invalid");
                letter.classList.add("valid");
            } else {
                letter.classList.remove("valid");
                letter.classList.add("invalid");
                password.validity = false;
            }
    }

Пример (По Вашим данным - проверка большой и маленькой буквы - именно латинской):

function Validation(text) { 
        var validate = /(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{8,}/; 
        if (validate.test(text)) { 
            document.getElementById("err").innerHTML="<p>Пароль корректен</p>"; 
        } else { 
            document.getElementById("err").innerHTML="<p>Пароль НЕ корректный</p>"; 
        } 
}

<form> 
<div> 
<input type=text name=login required> 
<input name=pass id="pass" onkeyup="Validation(this.value)" title="Пароль 8 символов + строчную + заглавную буквы + цифру"> 
<button>Зарегистрироваться</button> 
</div> 
<div id="err"></div> 
</form>

Пример с проверкой любой(русской или латинской) маленькой и большой буквы.

function Validation(text) { 
        var validate = /(?=.*\d)(?=.*[A-ZА-ЯЁ])(?=.*[a-zа-яё]).{8,}/; 
        if (validate.test(text)) { 
            document.getElementById("err").innerHTML="<p>Пароль корректен</p>"; 
        } else { 
            document.getElementById("err").innerHTML="<p>Пароль НЕ корректный</p>"; 
        } 
}

<form> 
<div> 
<input type=text name=login required> 
<input name=pass id="pass" onkeyup="Validation(this.value)" title="Пароль 8 символов + строчную + заглавную буквы + цифру"> 
<button>Зарегистрироваться</button> 
</div> 
<div id="err"></div> 
</form>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Координаты мыши внутри div не зависимо от окна браузера

Как можно узнать координаты курсора мыши, относительно div, а вернее внутри него? Потому что если использовать clientX/clientY или pageX/pageY, то стоит...

100

javascript

Как сделать скрипт для поля пароля. JavaScript [закрыт]

Координаты мыши внутри div не зависимо от окна браузера

Привести в верхний регистр

Как обновлять значения в массиве?

Как вывести определенные свойства из массива объектов. JS