如何避免密码验证（JS）中的重复代码

Question

我有一个简单的密码验证。两个带有图标的输入字段，用户可以在其中看到输入的密码。 代码运行良好。但是我为两个相似的输入写了两个相似的重复代码。并且无法设法缩短代码以便可以添加一次事件，并适用于两个输入（但不能同时）。 这是JS代码。

const password = document.getElementById('pass');
const repeatPass = document.getElementById('repeat_pass');

function validatePassword() {
    const icon = document.getElementById('icon1');
    const icon2 = document.getElementById('icon2');
    icon.addEventListener('click', () => {
        if (password.getAttribute('type') === 'password') {
            password.setAttribute('type', 'text');
            icon.classList.add('fa-eye-slash');
            icon.classList.remove('fa-eye');
        } else {
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
            password.setAttribute('type', 'password');
        }
    });

    icon2.addEventListener('click', () => {
        if (repeatPass.getAttribute('type') === 'password') {
            repeatPass.setAttribute('type', 'text');
            icon2.classList.add('fa-eye-slash');
            icon2.classList.remove('fa-eye');
        } else {
            icon2.classList.remove('fa-eye-slash');
            icon2.classList.add('fa-eye');
            repeatPass.setAttribute('type', 'password');
        }
    });

    const submit = document.querySelector('.password-form')
    const errorText = document.createElement('span');
    submit.addEventListener('submit', () => {
            if (password.value !== repeatPass.value) {
                repeatPass.after(errorText);
                errorText.innerText = 'Password does not match.';
                errorText.style.color = 'red';
            } else {
                password.value = "";
                repeatPass.value = "";
                alert('You are welcome');
            }
        }
    );
}

validatePassword();

Answer 1

你可以这样做：

function myFunction(target, icon) { // create a function that accepts arguments
  const element = document.getElementById(target) // query whatever element you pass to it.
  if (element.getAttribute('type') === 'password') {
    element.setAttribute('type', 'text');
    icon.classList.add('fa-eye-slash');
    icon.classList.remove('fa-eye');
  } else {
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
    element.setAttribute('type', 'password');
  }
}

icon.addEventListener('click', () => myFunction('pass', icon)); // add the event listeners wrapped in anonymous function so it's not called immediately
icon2.addEventListener('click', () => myFunction('repeat_pass', icon2));

Answer 2

您可以创建一个接受不同位作为参数的函数。 例如：

const password = document.getElementById('pass');
const repeatPass = document.getElementById('repeat_pass');

function clickShowHide(passwd, iconElem) {
    if (passwd.getAttribute('type') === 'password') {
        passwd.setAttribute('type', 'text');
        iconElem.classList.add('fa-eye-slash');
        iconElem.classList.remove('fa-eye');
    } else {
        iconElem.classList.remove('fa-eye-slash');
        iconElem.classList.add('fa-eye');
        passwd.setAttribute('type', 'password');
    }
}
function validatePassword() {
    const icon = document.getElementById('icon1');
    const icon2 = document.getElementById('icon2');
    
    icon.addEventListener('click', () => clickShowHide(password, icon));

    icon2.addEventListener('click', () => clickShowHide(repeatPass, icon2));

    const submit = document.querySelector('.password-form')
    const errorText = document.createElement('span');
    submit.addEventListener('submit', () => {
            if (password.value !== repeatPass.value) {
                repeatPass.after(errorText);
                errorText.innerText = 'Password does not match.';
                errorText.style.color = 'red';
            } else {
                password.value = "";
                repeatPass.value = "";
                alert('You are welcome');
            }
        }
    );
}

validatePassword();

Answer 3

你可以用函数式的方式重构它，使用 js 闭包

完整的代码如下：

const password = document.getElementById('pass');
const repeatPass = document.getElementById('repeat_pass');

const togglePassword = (passwordId) => (iconId) => () => {
  const password = document.getElementById(passwordId);
  const icon = document.getElementById(iconId);

  if (password.getAttribute('type') === 'password') {
    password.setAttribute('type', 'text');
    icon.classList.add('fa-eye-slash');
    icon.classList.remove('fa-eye');
  } else {
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
    password.setAttribute('type', 'password');
  }
}

function validatePassword() {
    const icon = document.getElementById('icon1');
    const icon2 = document.getElementById('icon2');

    icon.addEventListener('click', togglePassword('pass')('icon1'));
    icon2.addEventListener('click', togglePassword('repeat_pass')('icon2'));


    const submit = document.querySelector('.password-form')
    const errorText = document.createElement('span');
    submit.addEventListener('submit', () => {
            if (password.value !== repeatPass.value) {
                repeatPass.after(errorText);
                errorText.innerText = 'Password does not match.';
                errorText.style.color = 'red';
            } else {
                password.value = "";
                repeatPass.value = "";
                alert('You are welcome');
            }
        }
    );
}

validatePassword();