Question

我试图在离开文本框后调用该函数，但该函数仍在工作，但不是该函数只是在名字文本框中检查字母，而是会调用整个函数，并且我认为这是导致我的代码出现的原因触发两行代码时，我不确定如何创建它，以便调用为输入框指定的代码部分而不是整个代码。我认为通过指定元素名称，它只会专注于特定的文本框，但事实并非如此。同样，在浏览器中，它只会触发两次，而不是像此代码片段运行器中那样触发四次。

function validateData() {
  var letters = /^[A-Za-z]+$/;

  var firstName = document.getElementsByName("firstname")[0];
  if (firstName.value.match(letters)) {
    alert("Yes")
  } else {
    alert("No")
  }

  var lastName = document.getElementsByName("lastname")[0];
  if (lastName.value.match(letters)) {
    alert("Yes2")
  } else {
    alert("No2")
  }
}
document.getElementsByName("firstname")[0].addEventListener('blur', validateData);
document.getElementsByName("lastname")[0].addEventListener('blur', validateData);

#prompt {
  color: #fff;
  font-weight: 400;
  margin-left: 30px;
}

#prompt2 {
  color: #fff;
  font-weight: 400;
  margin-left: 30px;
}

.input:focus+#prompt {
  color: #000;
}

.input:focus+#prompt2 {
  color: #000;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript" src="js/process.js"></script>
  <title>Info</title>
</head>

<body>
  <form>
    <fieldset>
      <legend> Personal Information</legend>

      First Name: <br>
      <input type="text" name="firstname" class="input" onfocusout="validateData()">
      <span id="prompt">Please enter first name</span>
      <br> Last Name: <br>
      <input type="text" name="lastname" class="input" onfocusout="validateData()">
      <span id="prompt2">Please enter last name</span>
    </fieldset>
  </form>

</body>

</html>

Answer 1

尽管您基本上在此代码上放置了两个事件侦听器。

更多，因此，您有两个ifs，这意味着在运行第一个if-else语句之后，它应该提前运行另一个if-else。

根据您的代码，为什么不尝试以下操作：

function validateData(content, validationType) {
  var letters = /^[A-Za-z]+$/;
  if(validationType === 'firstname') {
   if (content.match(letters)) {
    alert("Yes")
   } else {
    alert("No")
   }
  }
  else if(validationType === 'lastname') {
   if (content.match(letters)) {
    alert("Yes2")
   } else {
    alert("No2")
   }
  }
 }

document.getElementsByName("firstname")[0].addEventListener('blur', () =>  validateData(this.value, "firstname"));
document.getElementsByName("lastname")[0].addEventListener('blur', () =>  validateData(this.value, "lastname"));

Eventlistener触发两次

1 个答案: