Возвращая функцию как параметр с замыканиями

Question

Вот ссылка на мою скрипту JS: 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)
  }
}

Я пытаюсь создать проверку формы с использованием замыканий. Я пытаюсь сделать свой код максимально эффективным.

Я хочу перебрать каждый элемент ввода (не выбирая каждый по отдельности) и применить прослушиватель событий к каждому из них. Функция inputCheck будет возвращать функцию валидатора в зависимости от атрибута name каждого входа, а функция createListener принимает значение, возвращаемое inputCheck, которое будет определенным типом валидатора, а затем для целей тестирования console.log true или false.

Пока что единственная ветвь if, которая работает в функции inputCheck, является первой, связанной с атрибутом name email. Другой, если ветви не будут работать, если я введу значения в другие элементы ввода и отправлю форму.

Может кто-нибудь сказать мне, где я ошибаюсь и как улучшить мой код?

Я новичок в замыканиях, поэтому понимаю, что большинству из вас эта проблема может показаться относительно простой.

Answer 1

Я могу наблюдать две вещи:

Во-первых, точно так же, как указал @VLAZ, два console.log в inputCheck фактически не выполняются, поскольку они помещаются после return.

Во-вторых, createListener и validation не совсем правы. createListener возвращает функцию с одним аргументом. validation forEach ничего не регистрирует, потому что createListener возвращает функцию, здесь нет выполнения функции.

Есть еще одна проблема с аргументом e из createListener. Похоже, вы рассматриваете это как событие, но, исходя из вашей реализации, есть только одно событие - событие отправки формы. Итак, я бы посоветовал немного изменить эти две функции:

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

Затем консоль выведет значение true или false на основе значения ввода каждого поля ввода. Пожалуйста, проверьте, является ли вывод вашей намерением или нет https://jsfiddle.net/jqgbefhw/