Как проверить электронную почту и пароли, как я сделал с именем и фамилией?

Question

Вот кодовая ссылка: https://codepen.io/Filizof/pen/qMLbKg HTML: просто обычная форма с полями

<div id="maindiv">
  <h2 id="signup">Free enrollments end in <img id="myimg" src="https://image.flaticon.com/icons/svg/69/69637.svg"> days!</h2>
<form id="myform">
<label class="labels" for="fname">Firstname</label><br/><input class="inputs" type="text" id="fname"><img id="check1" class="imgs" src=""><br/><br/>
<label class="labels" for="lname">Surname</label><br/><input class="inputs" type="text" id="lname"><img id="check2" class="imgs" src=""><br/><br/>
<label class="labels" for="email">Email</label><br/><input class="inputs" type="text" id="email"><img id="check3" class="imgs" src=""><br/><br/>
<label class="labels" for="pword">Create password</label><br/><input class="inputs" type="password" id="pword"><img id="check4" class="imgs" src=""><br/><br/>
<label class="labels" for="pword2">Confirm password</label><br/><input class="inputs" type="password" id="pword2"><img id="check5" class="imgs" src=""><br/><br/>
<button id="mybtn">Enroll</button>
</form>
</div>

Вот JavaScript.Как вы можете видеть, я хочу, чтобы он давал живую обратную связь, показывая либо X, либо галочку в зависимости от того, соответствуют ли входные данные проверяемым требованиям.Я должен признать, что часть электронной почты немного беспорядочная, но я не понимаю, почему пароли не выполняют то, что я от них хочу, а именно: они показывают крестик, когда он пуст, символ «-», когда что-то напечатано.но не достаточно долго, и отметьте, когда оно достаточно длинное, то же самое для второго, за исключением того, что когда оно достаточно длинное, оно все равно будет показывать минус, когда оно достаточно длинное, если это не тот же пароль, это все, что я хочу, но это не такделает это.

document.getElementById("fname").addEventListener("keyup", validateName);
function validateName() {
var name = document.getElementById("fname");
var check = document.getElementById("check1");
if (name.value !== "") {
check.style.display = "block";
check.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
} else {
if (name.value == "") {
check.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
}
}
}
document.getElementById("lname").addEventListener("keyup", validateSurname);
function validateSurname() {
var last = document.getElementById("lname");
var check1 = document.getElementById("check2");
if (last.value !== "") {
check1.style.display = "block";
check1.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
} else {
if (last.value == "") {
check1.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
}
}
}
document.getElementById("email").addEventListener("keyup", validateEmail);
function validateEmail() {
var mail = document.getElementById("email");
var check2 = document.getElementById("check3");
if (mail.includes("@") == false) {
check2.style.display = "block";
check2.src = "http://pngimg.com/uploads/minus/minus_PNG56.png";
} else {
if (mail.includes("@") == true) {
check2.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
} else {
if (mail == "") {
check2.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
}
}
}
}
document.getElementById("pword").addEventListener("keyup", 
validatePassword);
function validatePassword() {
var pass = document.getElementById("pword");
var check3 = document.getElementById("check4");
if (pass.value == "") {
check3.style.display = "block";
check3.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
} else {
if (pass.length < 8) {
check3.src = "http://pngimg.com/uploads/minus/minus_PNG55.png";
} else {
if (pass.length >= 8) {
check3.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
}
}
}
}
document.getElementById("pword2").addEventListener("keyup", 
confirmPassword);
function confirmPassword() {
var pass2 = document.getElementById("pword2");
var pass0 = document.getElementById("pword");
var check4 = document.getElementById("check5");
if (pass2.value == "") {
check4.style.display = "block";
check4.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
} else {
if (pass2.length < 8) {
check4.src = "http://pngimg.com/uploads/minus/minus_PNG55.png";
} else {
if (pass2.value != pass0.value) {
check.src = "http://pngimg.com/uploads/minus/minus_PNG55.png";
} else {
if (pass2.length >= 8 && pass2.value == pass.value) {
check4.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
}
}
}
}
}

Answer 1

Таким образом, для проверки электронной почты и прочего вам нужно будет использовать mail.value.includes..., а не просто mail.includes, поскольку почта сама по себе является просто элементом Element, а не строкой и, следовательно, не будет содержать метод .includes().Это похоже и на другие ваши проблемы.

Другая проблема, которую я обнаружил, заключалась в том, что в вашей логике возникли некоторые проблемы.Например, в электронном письме у вас было if (mail.includes("@") == false) ... else {if (mail.includes("@") == true).Один из них всегда будет возвращать true, и тогда вы никогда не сможете проверить else if(mail == ""), так как выполняется одно из ваших других условий.Чтобы это исправить, вы должны удалить else из 2-го условия, которое обеспечивает выполнение if(mail.value == '').

Также с подтверждением вашего пароля.Это действительно сбивает с толку.Я бы предложил лучший способ - проверить, совпадает ли он с первым паролем, выполнив простой if(pass2.value !== pass0.value){...} else {...}.Это значительно облегчает чтение и запуск.Кроме того, многие ваши условия не являются необходимыми.Например, выполнение if(last.value !== ""){...}else {if(last.value == ""){...} необязательно, так как если первое условие не возвращает true, вы можете просто использовать другое, и тогда вам не нужно проверять наличие if(last.value == ""), поскольку вы будете работать.Это делает код намного проще для чтения и обслуживания.

Я также проверил его в коде ниже и вставил фрагмент ниже (Обратите внимание, что я вставил немного CSS, чтобы он выглядел немного лучше во фрагменте):

document.getElementById("fname").addEventListener("keyup", validateName);

function validateName() {
	var name = document.getElementById("fname");
	var check = document.getElementById("check1");
	if (name.value !== "") {
		check.style.display = "block";
		check.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
	} else {
		if (name.value == "") {
			check.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
		}
	}
}
document.getElementById("lname").addEventListener("keyup", validateSurname);

function validateSurname() {
	var last = document.getElementById("lname");
	var check1 = document.getElementById("check2");
	if (last.value !== "") {
		check1.style.display = "block";
		check1.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
	} else {
		if (last.value == "") {
			check1.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
		}
	}
}
document.getElementById("email").addEventListener("keyup", validateEmail);

function validateEmail() {
	var mail = document.getElementById("email");
	var check2 = document.getElementById("check3");
	if (mail.value.includes("@") == false) {
		check2.style.display = "block";
		check2.src = "http://pngimg.com/uploads/minus/minus_PNG56.png";
	} else {
			check2.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
  }
			if ( (mail.value == "" || mail.value.length == 0 || mail.value == null)) {
				check2.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
			}
		}
document.getElementById("pword").addEventListener("keyup",
	validatePassword);

function validatePassword() {
	var pass = document.getElementById("pword");
	var check3 = document.getElementById("check4");
	if (pass.value == "") {
		check3.style.display = "block";
		check3.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
	} else {
		if (pass.value.length < 8) {
			check3.src = "http://pngimg.com/uploads/minus/minus_PNG55.png";
		} else {
			if (pass.value.length >= 8) {
				check3.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
			}
		}
	}
}
document.getElementById("pword2").addEventListener("keyup",
	confirmPassword);

function confirmPassword() {
	var pass2 = document.getElementById("pword2");
	var pass0 = document.getElementById("pword");
	var check4 = document.getElementById("check5");
  
	if (pass2.value !== pass0.value) {
		check4.style.display = "block";
		check4.src = "https://mbtskoudsalg.com/images/image-x-png-4.png";
	} else {
		check4.style.display = "block";
		check4.src = "http://cdn.onlinewebfonts.com/svg/img_306611.png";
	}
}

#myform{
  font-size:14px;
}

img{
  width:2%;
}

<div id="maindiv">
  <h2 id="signup">Free enrollments end in <img id="myimg" src="https://image.flaticon.com/icons/svg/69/69637.svg"> days!</h2>
<form id="myform">
<label class="labels" for="fname">Firstname</label><br/><input class="inputs" type="text" id="fname"><img id="check1" class="imgs" src=""><br/><br/>
<label class="labels" for="lname">Surname</label><br/><input class="inputs" type="text" id="lname"><img id="check2" class="imgs" src=""><br/><br/>
<label class="labels" for="email">Email</label><br/><input class="inputs" type="text" id="email"><img id="check3" class="imgs" src=""><br/><br/>
<label class="labels" for="pword">Create password</label><br/><input class="inputs" type="password" id="pword"><img id="check4" class="imgs" src=""><br/><br/>
<label class="labels" for="pword2">Confirm password</label><br/><input class="inputs" type="password" id="pword2"><img id="check5" class="imgs" src=""><br/><br/>
<button id="mybtn">Enroll</button>
</form>
</div>

Answer 2

В вашей функции confirmPassword Вы используете pass2 и pass0.За исключением последнего if, где вы используете pass2 и pass.Таким образом, вы никогда не получите изображение галочки.