如何在表单提交时应用用于所有元素的相同事件监听器?
How can I apply the same event listener used for all elements on form submission?
这是我的 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)
})
})
每个元素的输入事件侦听器都非常适合它的功能。它在用户输入时提供实时错误消息。但是我希望该函数在用户提交表单时也做同样的事情(在附加到表单元素的提交事件上)?如何在我的代码中实现该功能?
将验证代码放在命名函数中,这样您就可以从两个事件侦听器中调用它。
function validate_input(el) {
const inputValue=el.value;
const validator=inputCheck(el)
if (validator) {
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));
});
稍微更改表单提交侦听器。调用从 createListener
返回的函数并传递一个假事件对象:{target: input}
.
myForm.addEventListener('submit', (e)=> {
e.preventDefault()
inputs.forEach(input=> {
createListener(input)({target: input});
})
});
这样您就不需要在 createListener
.
内更改任何内容
这是我的 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)
})
})
每个元素的输入事件侦听器都非常适合它的功能。它在用户输入时提供实时错误消息。但是我希望该函数在用户提交表单时也做同样的事情(在附加到表单元素的提交事件上)?如何在我的代码中实现该功能?
将验证代码放在命名函数中,这样您就可以从两个事件侦听器中调用它。
function validate_input(el) {
const inputValue=el.value;
const validator=inputCheck(el)
if (validator) {
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));
});
稍微更改表单提交侦听器。调用从 createListener
返回的函数并传递一个假事件对象:{target: input}
.
myForm.addEventListener('submit', (e)=> {
e.preventDefault()
inputs.forEach(input=> {
createListener(input)({target: input});
})
});
这样您就不需要在 createListener
.