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

我有一个简单的密码验证。两个带有图标的输入字段，用户可以在其中查看输入的密码。 代码运行良好。但是我为两个相似的输入写了两个相似的重复代码。并且无法设法缩短代码，使事件可以添加一次，并可用于两个输入（但不能同时）。 下面是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();

---

你可以这样做：

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

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

---

你可以这样做：

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

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

---

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

const password=document.getElementById（'pass'）；
const repeatPass=document.getElementById（'repeat_pass'）；
功能单击显示隐藏（passwd、iconElem）{
if（passwd.getAttribute（'type'）='password'）{
setAttribute（'type'，'text'）；
iconElem.classList.add（'fa-eye-slash'）；
iconElem.classList.remove（'fa-eye'）；
}否则{
iconElem.classList.remove（'fa-eye-slash'）；
iconElem.classList.add（'fa-eye'）；
setAttribute（'type'，'password'）；
}
}
函数validatePassword（）{
const icon=document.getElementById（'icon1'）；
const icon2=document.getElementById（'icon2'）；
icon.addEventListener（'click'，（）=>clickShowHide（密码，图标））；
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.innerText='密码不匹配'；
errorText.style.color='红色'；
}否则{
password.value=“”；
repeatPass.value=“”；
警惕（“不客气”）；
}
}
);
}
验证密码（）；

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

const password=document.getElementById（'pass'）；
const repeatPass=document.getElementById（'repeat_pass'）；
功能单击显示隐藏（passwd、iconElem）{
if（passwd.getAttribute（'type'）='password'）{
setAttribute（'type'，'text'）；
iconElem.classList.add（'fa-eye-slash'）；
iconElem.classList.remove（'fa-eye'）；
}否则{
iconElem.classList.remove（'fa-eye-slash'）；
iconElem.classList.add（'fa-eye'）；
setAttribute（'type'，'password'）；
}
}
函数validatePassword（）{
const icon=document.getElementById（'icon1'）；
const icon2=document.getElementById（'icon2'）；
icon.addEventListener（'click'，（）=>clickShowHide（密码，图标））；
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.innerText='密码不匹配'；
errorText.style.color='红色'；
}否则{
password.value=“”；
repeatPass.value=“”；
警惕（“不客气”）；
}
}
);
}
验证密码（）；

您可以使用js闭包以功能性的方式重构它

完整代码如下所示：

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

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

---

您可以使用js闭包以功能性的方式重构它

完整代码如下所示：

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

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

---

将事件处理程序放入包含重复代码的函数中。为什么不简单地将验证逻辑放入一个额外的函数中？将事件处理程序放入包含重复代码的函数中。为什么不简单地将验证逻辑放入一个额外的函数中？它们有两个不同的图标，每个密码对应一个。在

myFunction

中，两个密码都引用了相同的图标。尽管如此，这是正确的总体思路。通过将icon元素作为第二个参数进行更新。看起来不错。请注意，第一个图标的变量是

icon

，而不是

icon1

。它们有两个不同的图标，每个密码对应一个。在

myFunction

中，两个密码都引用了相同的图标。尽管如此，这是正确的总体思路。通过将icon元素作为第二个参数进行更新。看起来不错。请注意，第一个图标的变量是

icon

，而不是

icon1

。您在

icon2

周围放置了

'

：p您在

icon2

周围放置了

'

：p谢谢，这同样有效