如何避免密码验证中的重复代码(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();