亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在表單提交時應用用于所有元素的相同事件偵聽器?

如何在表單提交時應用用于所有元素的相同事件偵聽器?

海綿寶寶撒 2021-11-12 18:36:14
這是我的 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)  })})每個元素上的輸入事件偵聽器非常適合它的功能。它在用戶輸入時提供實時錯誤消息。但是我希望該函數在用戶提交表單時也做同樣的事情(在附加到表單元素的提交事件上)?如何在我的代碼中實現該功能?
查看完整描述

2 回答

?
鳳凰求蠱

TA貢獻1825條經驗 獲得超4個贊

將驗證代碼放在一個命名函數中,這樣您就可以從兩個事件偵聽器中調用它。


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));

});


查看完整回答
反對 回復 2021-11-12
?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

稍微更改表單提交偵聽器。調用從返回的函數createListener并傳遞一個假事件對象:{target: input}。


myForm.addEventListener('submit', (e)=> {

  e.preventDefault()

  inputs.forEach(input=> {

    createListener(input)({target: input});

  })

});

這樣你就不需要在createListener.


查看完整回答
反對 回復 2021-11-12
  • 2 回答
  • 0 關注
  • 327 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號