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

【问题标题】：JavaScript - Faulty logic in simple data validationJavaScript - 简单数据验证中的错误逻辑
【发布时间】：2018-09-07 14:32:06
【问题描述】：

我对编码非常陌生，并且在某些逻辑方面遇到了困难。昨晚我问了另一个问题，社区真的很有帮助（谢谢！），所以我想我会再试一次。 `

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

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

我认为问题在于第二个 if-else 语句。我以为如果“errorMessage =”“;”不过，它会提交表单。但是，无论它执行什么 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>

【问题讨论】：

你知道=和==和===的区别吗
将if (errorMessage = "") 更改为if (errorMessage == "")
=== 用于比较，= 用于分配。通过使用if (errorMessage = "") 而不是if (errorMessage === "")，您正在为errorMessage 分配一个新值，而不是比较errorMessage 的值，这将始终触发else 子句。
@shilly 感谢您的回复！我觉得自己很愚蠢！

标签： javascript logic

【解决方案1】：

所以你的代码中有一个错字，你没有比较，你将变量设置为一个空字符串。一个空字符串是falsy value

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

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

在您的 IDE 中使用 jshint、jslint、eslint 等工具将帮助您发现这些错别字。因此，请更改您的代码以进行正确的比较。

if (errorMessage === "") {

【讨论】：

@MysterX 非常感谢您的回复！这是我以前从未犯过的错误，并且由于某种原因，无论我阅读多少次代码都看不到。我将研究像 jshint 这样的工具来帮助我捕捉这些错别字，因为我花了太长时间盯着它。再次感谢。我不会再这样做了！

【解决方案2】：

我不确定您是否可以通过这种方式从输入中提取值。 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 用双引号括起来，这意味着它的数据类型是 String。字符串只是普通文本。但 testNumber 变量的数据类型为 Integer。整数只是普通数字。这两个变量的内容没有区别，但数据类型有区别。

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

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

编辑：另外我建议你在 chrome 中打开开发者工具（F12）并检查控制台。你可以在那里看到错误。对你有很大帮助。

【讨论】：

谢谢@Jakub 这真的很有帮助。我刚刚熟悉 Chrome 的开发者工具。今天我会和他们一起玩。
很高兴为您提供帮助。 :)