如何像使用名字和姓氏一样验证电子邮件和密码？

Question

这里是 codepen 链接：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 或勾号来提供实时反馈，具体取决于输入是否满足要验证的要求。我必须承认电子邮件部分有点乱，但我不明白为什么密码不符合我的要求，即在为空时显示叉号，在输入内容时显示“-” in 但不够长，当它足够长时打勾，第二个相同，除非它足够长，它仍然会显示一个减号，当它足够长时，除非它是相同的密码，这就是我想要它做的，但它不是这样做。

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

在您的函数confirmPassword 中，您使用pass2 和pass0。除了最后一个if 使用pass2 和pass。所以你永远不会得到刻度图像。

Answer 2

因此，对于您的电子邮件验证和其他内容，您需要使用mail.value.includes... 而不仅仅是mail.includes，因为邮件本身只是一个元素对象而不是字符串，因此不会包含.includes() 方法。这也与您的其他问题类似。

我发现的另一个问题是你的逻辑有点问题。例如，在电子邮件中，您有 if (mail.includes("@") == false)...else {if (mail.includes("@") == true)。其中之一将始终返回 true，然后您将永远无法检查 else if(mail == "")，因为您的其他条件之一已经运行。要解决此问题，您必须从第二个条件中删除else，以确保if(mail.value == '') 将运行。

还有您的密码验证。这真的很令人困惑。我建议最好的方法是通过简单的if(pass2.value !== pass0.value){...} else {...} 检查它是否与第一个密码匹配。这使得它更易于阅读和运行。除此之外，您的许多条件都不是必需的。例如，没有必要执行if(last.value !== ""){...}else {if(last.value == ""){...}，因为如果第一个条件不返回true，您可以只使用else，然后您不需要检查if(last.value == "")，因为您将运行。这使得代码更易于阅读和维护。

我还在下面的 codepen 中对其进行了测试，并在下面插入了一个 sn-p（请注意，我插入了一些 css 只是为了使它在 sn-p 中看起来更好一点）：

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>