Question

我只使用普通的javascript进行了样本表单验证。一切都很好，直到我决定将两个函数存储在事件回调函数中。我这样做了所以我的javascript文件只能有较少的代码行。回调函数只能执行一个函数。

＆＃13;

var query = document.querySelector.bind(document);

function isBlank(element) {
  var isblank = (!element.value) ? true : false;

  element.setAttribute('data-error', isblank);

  return isblank;
}

function isInvalid(element, regex) {
  var invalidValue = (!element.value.match(regex)) ? true : false;

  element.setAttribute('data-error', invalidValue);

  return invalidValue;
}

function checkInput(e) {
  var $this = e.target;
  return [
    isBlank($this),
    isInvalid($this, /^[a-zA-Z ]*$/)
  ];
}

query('#name').addEventListener('blur', checkInput);

＆＃13;

form input[name] {
  border: 1px solid #ccc;
}

form input[data-error="true"] {
  border-color: red;
}

form input[data-error="false"] {
  border-color: #ccc;
}

＆＃13;

<form action="" method="post">
  <input type="text" name="name" id="name" placeholder="Name" data-error=""><span class="message"></span><br>
  <input type="submit" value="Submit">
</form>

＆＃13;

我也尝试了以下两个选项，但它没有工作：

function checkInput(e) {
  var $this = e.target;
  return {
    execute: [
      isBlank($this),
      isInvalid($this, /^[a-zA-Z ]*$/)
    ]
  };
}

function checkInput(e) {
  var $this = e.target;
  isBlank($this);
  isInvalid($this, /^[a-zA-Z ]*$/);
}

如何修复它但使代码更清晰，更有条理？

Answer 1

你试过这个吗？

var query = document.querySelector.bind(document);

function isBlank(element) {
  var isblank = (!element.value) ? true : false;

  return isblank;
}

function isInvalid(element, regex) {
  var invalidValue = (!element.value.match(regex)) ? true : false;

  return invalidValue;
}

function checkInput(e) {
  var $this = e.target;
  element.setAttribute('data-error', (isBlank($this) || isInvalid($this, /^[a-zA-Z ]*$/)));
}

query('#name').addEventListener('blur', checkInput);

它会设置数据错误＆＃39;如果至少有一个函数返回true（并且发现了错误），则为true

Answer 2

您的代码运行正常。我更改了属性名称以查看它们是否已添加。问题是您首先使用相同的数据错误属性和第二个函数覆盖。可能你应该添加和删除代表错误的类。你可能会遇到很多错误。

var query = document.querySelector.bind(document);

function isBlank(element) {
  var isblank = (!element.value) ? true : false;

  element.setAttribute('data-error1', isblank);

  return isblank;
}

function isInvalid(element, regex) {
  var invalidValue = (!element.value.match(regex)) ? true : false;

  element.setAttribute('data-error2', invalidValue);

  return invalidValue;
}

function checkInput(e) {
  var $this = e.target;
  return [
    isBlank($this),
    isInvalid($this, /^[a-zA-Z ]*$/)
  ];
}

query('#name').addEventListener('blur', checkInput);

form input[name] {
  border: 1px solid #ccc;
}

form input[data-error="true"] {
  border-color: red;
}

form input[data-error="false"] {
  border-color: #ccc;
}

<form action="" method="post">
  <input type="text" name="name" id="name" placeholder="Name" data-error=""><span class="message"></span><br>
  <input type="submit" value="Submit">
</form>

Answer 3

你可以这样解决它。

我建议在element.attribute和isBlank之外设置isInvalid。现在您可以在其他上下文中使用这些函数。

当你想要一个事件处理程序的source元素时，我会使用this而不是event.target。它解决了嵌套元素的一些问题。

＆＃13;

var query = document.querySelector.bind(document);

function isBlank(element) {
  return (!element.value) ? true : false;
}

function isInvalid(element, regex) {
  return (!element.value.match(regex)) ? true : false;
}

function checkInput(e) {
  var isValid = true;
  
  if(isBlank(this) || isInvalid(this, /^[a-zA-Z ]*$/)){
    isValid = false;
  }
  
  this.setAttribute('data-error', !isValid);
}

query('#name').addEventListener('blur', checkInput);

＆＃13;

form input[name] {
  border: 1px solid #ccc;
}

form input[data-error="true"] {
  border-color: red;
}

form input[data-error="false"] {
  border-color: #ccc;
}

＆＃13;

<form action="" method="post">
  <input type="text" name="name" id="name" placeholder="Name" data-error=""><span class="message"></span><br>
  <input type="submit" value="Submit">
</form>

＆＃13;

事件功能不能同时调用两个或多个其他功能

3 个答案: