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

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，因为邮件本身只是一个Element对象而不是字符串，因此将不包含{{ 1}}方法。这也与您的其他问题类似。

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

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

我也在下面的Codepen中对其进行了测试，并在下面插入了一个代码段（请注意，我插入了一些CSS只是为了使其在代码段中看起来更好一点）：

if(last.value == "")

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%;
}

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

2 个答案: