代码细分

Question

我目前是webdevlopment部门的初学者（也是针对糟糕的问题格式提前使用stackoverflow ..srry）。基本上，我遇到了onsubmit事件的问题，该事件没有从函数中获取返回值被叫......功能是：

  function checkUnique1() {
var ok = true;
socket.emit('eCheck', {email: document.getElementsByName("email")[0].value});
socket.on('eValidateMessage', function(obj) {
  if(obj.message == false)
  {

    document.getElementsByName("email")[0].style.borderColor = "#E34234";
    document.getElementById("emailExist").innerHTML = "Email has not been registered";
    document.getElementById("emailExist").style.color = "#E34234";
    ok = false;
  }
});


return ok;}

我正在使用此函数来检查数据库中是否存在电子邮件。如果它存在，则函数应该返回true，而onsubmit应该触发，否则它将返回false并且onsubmit不会触发，并且表单不会被提交..我的表格是：

<form class="form-horizontal" action="/forgotPass" onsubmit="return checkUnique1()"  method="post" id="formid">
<div class="form-group">
  <label class="control-label col-sm-4"><h1>Creators Space</h1></label>
  <div class="col-sm-8">
  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2"></label>
  <div class="col-sm-10">
      <label class="control-label">Please enter the email registered with Creators Space</label>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2" for="email">Email:</label>
  <div class="col-sm-6">
    <input type="email" class="form-control" name="email" onclick="emailRSet()" onkeypress="emailRSet()" placeholder="Enter email" required title="email (format: xx@xx.xx/xx@xx.xx.xx)" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
    <span id="emailExist"></span>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-primary" value="submit">Submit</button>
  </div>
</div>

现在，当所有上述代码都在html文件中时，这种方法很有效，但是当我在手柄模板中执行相同的操作时，函数似乎没有返回任何值，因此在两种情况下都提交了表单。 如何在车把模板中做同样的事情???可能是什么问题？

如果您需要更多信息，请与我们联系

Answer 1

socket.on(function)上的函数可能是异步执行的（也就是说，不是马上，但将来的某个时间），所以当return ok执行时，socket.on(function)上的函数没有已执行，因此ok仍具有true的价值。

也许下面的内容可行：

function checkUnique1() {
    // make sure only the submit button of that form matches this selector
    var submitButton = document.querySelector("form.form-horizontal button[value='submit']");
    var typedEmail = document.getElementsByName("email")[0].value;

    // disable the submit button upon click to prevent multiple submits
    submitButton.disabled = true;

    if (window.validatedEmail === typedEmail) {
       // email has been validated, submit form
       return true;
    } else {
      // email has not been validated, request validation
      socket.emit('eCheck', {email: document.getElementsByName("email")[0].value});
      socket.on('eValidateMessage', function(obj) {
        if(obj.message == false)
        {
          document.getElementsByName("email")[0].style.borderColor = "#E34234";
          document.getElementById("emailExist").innerHTML = "Email has not been registered";
          document.getElementById("emailExist").style.color = "#E34234";

          // re-enables the submit button, since the email was not validated
          submitButton.disabled = false;
          // clears validatedEmail (since validation failed, no email has been validated)
          window.validatedEmail = null;
        }
        else {
          // 'marks' the typed e-mail as validated
          window.validatedEmail = typedEmail;

          // make sure only that form matches this selector
          document.querySelector("form.form-horizontal").submit();
        }
      });
      return false;
    }
}

上面的代码创建了一个全局变量window.validatedEmail，其中包含最后一封已经过验证的电子邮件。

链接一个演示小提琴进行调试： https://jsfiddle.net/acdcjunior/3v52u69u/2/ （它的答案有一些变化，因为我无法访问您的websocket，我使用了另一个，所以我不得不做一些调整。）

代码细分

每条评论：

if (window.validatedEmail === typedEmail) part..like window.validatedEmail做什么，为什么要检查它是否等于typedEmail？

当表单提交时，代码会检查是否存在（全局）变量window.validatedEmail，如果存在，则检查是否等于键入的电子邮件（typedEmail）。

首次提交表单时，if将为false，因为没有window.validatedEmail。现在，当if为false时，我们会转到else部分。 else部分只对websocket（socket.emit）发出验证请求，并注册一个在验证响应时将执行的侦听器函数（socket.on('eValidateMessage', function(obj) { ... }）。

当验证响应并执行function(obj) { ... }时，它会执行以下操作：如果验证消息告诉我们电子邮件未经过验证（即obj.message == false），则会添加错误消息并启用提交按钮，以便用户在更改电子邮件后再次按下该按钮。

现在，另一方面，如果验证消息告诉我们电子邮件已经过验证（else if部分内function(obj) { ... } }），然后我们在全局变量typedEmail中保存window.validatedEmail（我们知道刚刚验证过）并重新提交表单。

这一次，当表单重新提交时，它会像往常一样首先检查全局变量window.validatedEmail是否存在以及它是否等于typedEmail。现在的不同之处在于window.validatedEmail会存在 - 因为我们已将其保存在else的{{1}}部分。

由于它存在且等于function(obj) { ... }，因此我们只需typedEmail，即可提交表单。

表单：onsubmit不从函数

1 个答案:

代码细分