我如何应用用于表单提交中所有元素的相同事件侦听器？

Question

这是我的JSfiddle：https://jsfiddle.net/apasric4/p61wjf8a/

这是我的示例JS代码：

function createListener(input) {
  return (e)=> {
    const el=e.target;
    const inputValue=e.target.value;
    const validator=inputCheck(input)
    const valid=validator(inputValue);
    borderHighlight(valid, el)
  }
}

inputs.forEach(input=> {
  input.addEventListener("input", createListener(input))
})


function borderHighlight(valid, el) {
  (valid)? el.style.border='2px solid green':el.style.border='2px solid red'
}

myForm.addEventListener('submit', (e)=> {
  e.preventDefault()
  inputs.forEach(input=> {
    createListener(input)
  })
})

每个元素上的输入事件侦听器都是完美的。它在用户输入时提供实时错误消息。但是我希望用户在提交表单时（在附加到form元素的Submit事件上）该功能也做同样的事情吗？如何在我的代码中实现该功能？

Answer 1

将验证代码放入命名函数中，因此您可以从两个事件侦听器中调用它。

function validate_input(el) {
    const inputValue=el.value;
    const validator=inputCheck(el)
    const valid=validator(inputValue);
    borderHighlight(valid, el);
}

function createListener(input) {
    return e => validate_input(input);
}

inputs.forEach(input=> {
  input.addEventListener("input", createListener(input))
})


function borderHighlight(valid, el) {
  (valid)? el.style.border='2px solid green':el.style.border='2px solid red'
}

myform.addEventListener('submit', (e) => {
  e.preventDefault();
  inputs.forEach(input => validate_input(input));
});

Answer 2

稍微更改表单提交侦听器。调用从createListener返回的返回函数，并传递假事件对象：{target: input}。

myForm.addEventListener('submit', (e)=> {
  e.preventDefault()
  inputs.forEach(input=> {
    createListener(input)({target: input});
  })
});

这样，您无需在createListener内进行任何更改。