返回 function 作为带闭包的参数

Question

Here is a link to my JS fiddle: https://jsfiddle.net/apasric4/v1qkmgyu/1/

function inputCheck(input) {
  if (input.name==="email") {
    console.log("email")
    return isValidEmail
  } else if (input.name==="password") {
    return isValidPassword
    console.log("pass")
  } else if (input.name==="userName") {
    return isValidUserName
    console.log("user")
  }
}


function isValidEmail (email) {
  return /^[^@]+[@][^@.]+\.[a-z]+$/.test(email)
}

function isValidPassword(pass) {
  return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(pass)
}

function isValidUserName(user) {
  return /^[a-zA-Z0-9]+([_ -]?[a-zA-Z0-9])*$/.test(user)
}


function validation(e) {
  e.preventDefault()
  inputs.forEach(input=> createListener(inputCheck(input)))
}



function createListener(validator) {
  return (e)=> {
    const inputValue=e.target.value;
    const valid=validator(inputValue)
    console.log(valid)
  }
}

I'm trying to create form validation using closures. I am trying to make my code as efficient as possible.

I want to loop over each input element (without selecting each individually), and apply an event listener to each one. The inputCheck function would return a validator function depending on the name attribute of each input, and the createListener function takes the value returned by inputCheck, which would be a specific type of validator, and then for testing purposes, console.log true or false.

So far, the only if branch that works in the inputCheck function is the first one associated with name attribute email. The other if branches won't work if I type values into other input elements and submit the form.

Can anyone tell me where I'm going wrong and how to improve my code?

I'm new to closures so I understand that this issue might seem relatively simple to most of you.

Answer 1

I can observe two things:

First, just like @VLAZ pointed out, two console.log in inputCheck are actually not executed since they are placed after return.

Second, createListener and validation are not quite right. createListener returns a function with one argument. validation forEach doesn't log anything because createListener returns a function, no function execution here.

There is another problem with the argument e of createListener . It seems like you treat it as an event, but based on your implementation, there is only one event, that is form submit event. So, I'd suggest to modify these two functions a little bit:

function validation(e) {
  e.preventDefault()
  inputs.forEach(input=> createListener(inputCheck(input))(input))
}



function createListener(validator) {
  return (e)=> {
    const inputValue=e.value;
    const valid=validator(inputValue)
    console.log(valid)
  }
}

Then, the console prints out true or false based on the input value of each input field. Please check whether the output is your intension or not https://jsfiddle.net/jqgbefhw/