Question

在此,我对《联合材料法典》进行了抽样调查。

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

每项内容的投入活动聆听者是完美的。它提供实在错误的信息,作为用户的投入。但我想,当用户提出形式时(关于形式要素所附的提交活动),这一功能也一样? 我如何在守则中落实这一功能?

Answer 1

在指定职能中确定验证法,以便你能够从两个活动聆听者那里打电话。

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

Answer 2

Change the form submit listener a bit. Call the function returned from createListener and pass a fake event object: {target: input}.

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

这样,你就不必在<条码>中改动任何内容。

友情链接