JavaScript - 简单数据验证中的错误逻辑



我对编码超级陌生,并且很难理解某些逻辑。昨晚我问了另一个问题,社区真的很有帮助(谢谢!(,所以我想我会再试一次。`

我正在尝试制作一个收集用户电子邮件和名字的程序。我想检查表单上的每个框中是否输入了内容,为了确保他们正确输入了电子邮件地址,该电子邮件地址 1 与电子邮件地址 2 相同。

我已经定义了一个"var errorMessage = ";",如果任何时候出现错误,它会根据用户在表单上犯的错误重新定义一个新的错误消息。

我认为问题出在第二个if-else语句上。我认为如果"错误消息=";"仍然会提交表单。但是,无论它执行什么 else 语句,我都会收到空错误消息的警报。

为什么,如果 errorMessage = ",它运行 else 语句并跳过使用 errorMessage = " 作为条件的 if 语句?

"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var joinList = function() {
var emailAddress1 = $("email_address1").value;
var emailAddress2 = $("email_address2").value;	
var firstName = $("first_name").value;
var errorMessage = "";
// validate the entries
if (emailAddress1 == "") {
	errorMessage = "First email address entry required";
$("email_address1").focus();
} else if (emailAddress2 == "") {
	errorMessage = "Second email address entry required";
	$("email_address2").focus();
} else if (emailAddress2 != emailAddress1) {
	errorMessage = "Email address entries must match";
	$("email_address2").focus();
} else if (firstName == "") {
	errorMessage = "First name entry required";
	$("first_name").focus();
}
// submit the form if all entries are valid
// otherwise, display an error message
if (errorMessage = "") {
$("email_form").submit(); 
} else {
	alert(errorMessage);
}
};
window.onload = function() {
$("join_list").onclick = joinList;
$("email_address1").focus();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">	
<title> Join Email List</title>
<link rel="stylesheet" href="email_list.css">
<script src="email_list.js"></script>
</head>
<body>
<main>
<h1>Please join our email list</h1>
<form id="email_form" name="email_form" action="join.html" method="get">
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1" name="email_address1"><br>
<label for="email_address2">Re-enter Email Address:</label>
<input type="text" id="email_address2" name="email_address2"><br>
<label for="first_name">First Name</label>
<input type="text" id="first_name" name="first_name"><br>
<label>&nbsp;</label>
<input type="button" id="join_list" value="Join our List">
</form>
</main>
</body>
</html>

**

所以你的代码中有一个拼写错误,你没有比较,你正在将变量设置为一个空字符串。空字符串是假值

所以你的代码基本上是这样的

errorMessage = "";
if (errorMessage) {
} else {
}

使用像jshint,jslint,eslint等工具内置到你的IDE中,可以帮助你抓住这些拼写错误。因此,请更改代码以进行正确的比较。

if (errorMessage === "") {

我不确定您是否可以通过这种方式从输入中提取值。email_address1是元素 ID,因此您必须在开头使用主题标签来引用它。 在jQuery中执行此操作的正确方法$("#email_address1"(.val((

=== 和===之间的区别非常重要。

let testVariable = 123; // only assigns value to a variable

===之间的区别非常明显。在 == 和===之间稍微复杂一点。

== 运算符仅比较值,不识别数据类型,但===识别它们。这对你意味着什么?

假设你有变量testNumber分配值 123 作为数字和变量textText分配值"123">(注意引号(。

如果将它们与== 表达式进行比较,则返回 true,但如果将它们与===表达式进行比较,则返回 false。

let testNumber = 123;
let testText = "123";

如您所见,变量testText在双引号中,这意味着它的数据类型是字符串。字符串只是普通文本。但是testNumber变量的数据类型为整数。整数只是普通数字。这两个变量的内容没有区别,但数据类型有区别。

testNumber == testText //true - same content, different datatype we ignore that
testNumber === testTExt // false - same content, different datatype but now we consider it

我希望我至少对你有所帮助。 :)

编辑:我还建议您在chrome中打开开发人员工具(F12(并检查控制台。你可以看到那里的错误。它对你有很大帮助。

最新更新