Блог

1. Я не знаю, как исправлять каждый раз, когда у меня возникает ошибка, даже после того, как исправленное не устраняется. Я создаю функцию, но она не работает. Функцию, которая не работает, я попытался вызвать в окне.войдите в систему, но безрезультатно взломал код, не подтвердив мое имя пользователя и пароль.
2. Есть ли возможность показать пароль, а также показать пароль повторного ввода?

Я создал функцию, которая показывает пароль при установке галочки, но не показывает пароль повторного ввода. Есть ли какая-нибудь возможность показать пароль, а также показать пароль повторного ввода?

3. Я включил часть своего html(извините, забыл сделать это раньше. Заранее спасибо

 <form id="registerdetails" action="fma_t3confirm.html">
                <div>
                    <label for="username">* Userame:</label>
                    <input type="text" id="username">
                    <span id="usernameErrorMsg"></span>
                </div>
                <div>
                    <label for="password">* Password (Must be 8 characters and include one uppercase, one lowercase and one numeric):</label>
                    <input type="password" id="password">
                    <span id="passwordErrorMsg"></span>
                    <input type="checkbox" id="showpasswords" onclick="ShowPass()">
                    <label id="showpasswordslabel" for="showpasswords">Show passwords</label>
                </div>
                <div>
                    <label for="retypedpassword">* Retype your password:</label>
                    <input type="password" id="retypedpassword">
                    <span id="retypepasswordErrorMsg"></span>
                    <span id="passwordmatcherror"></span>
                </div>
                <div>
                    <button type="submit" id="registerButton">Register</button>
 

 function checkPasswordMatch (registerForm) { 
    
     let username = document.getElementById('username');
     let password = document.getElementById('password');
     let retypedpassword = document.getElementById('retypedpassword');
     let userNameValidation = /^w ([.-]?w )*@w ([.-]?w )*[A-Z]).{8,}$/;
     let passwordValidation = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
    
    if (!(userNameValidation.test(username.value))) {
    let usernameError = document.getElementById('usernameErrorMsg');
    usernameError.setAttribute("class", "error");
    usernameError.innerHTML = "Please enter a valid email format.";
    return false
    }
    if (!(passwordValidation.test(password.value))) {
    let passwordError = document.getElementById('passwordErrorMsg');
    passwordError.setAttribute("class", "error");
    passwordError.innerHTML ="Please enter a valid password type.";
    return false
    }
    if (!(passwordValidation.test(retypedpassword.value))) {
    let retypepasswordError = document.getElementById('retypepasswordErrorMsg');
    retypepasswordError.setAttribute("class", "error");
    retypepasswordError.innerHTML = "Please Enter a valid password type";
    return false
    }
    
    if (password.value != retypedpassword.value) {
    let passwordMatchError = document.getElementById("passwordmatcherror"); 
    passwordMatchError.setAttribute("class", "error");
    passwordMatchError.innerHTML = "Passwords do not match. Please retype";
    return false
    }
    return true;
    }

     function cleanUpErrors(){
        let errors = document.getElementsByClassName("error");
        for (let i = 0; i < errors.length; i  ) {
            errors[i].style.display = "none"; 
        }
     }
 
    function ShowPass(){
        let pass = document.getElementById("password");
        if(pass.type === "password"){
            pass.type="text";
        }else{
            pass.type = "password";
        }
    }
  
    
    window.onload = () => {
        let registerForm = document.getElementById("registerdetails");
        registerForm.addEventListener("submit", 
        (event) => {
            if (!checkPasswordMatch(registerForm)) {
                event.preventDefault();
        }, false);
    }
 

В вашем коде было несколько опечаток. Вот ваш исправленный код. Также добавлена функция отображения/скрытия обоих полей пароля.

 function checkPasswordMatch(registerForm) {

  let username = document.getElementById('username');
  let password = document.getElementById('password');
  let retypedpassword = document.getElementById('retypedpassword');
  let userNameValidation = /^w ([.-]?w )*@w ([.-]?w )*([A-Z]).{8,}$/;
  let passwordValidation = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

  if (!(userNameValidation.test(username.value))) {
    let usernameError = document.getElementById('usernameErrorMsg');
    usernameError.setAttribute("class", "error");
    usernameError.innerHTML = "Please enter a valid email format.";
    return false
  }
  if (!(passwordValidation.test(password.value))) {
    let passwordError = document.getElementById('passwordErrorMsg');
    passwordError.setAttribute("class", "error");
    passwordError.innerHTML = "Please enter a valid password type.";
    return false
  }
  if (!(passwordValidation.test(retypedpassword.value))) {
    let retypepasswordError = document.getElementById('retypepasswordErrorMsg');
    retypepasswordError.setAttribute("class", "error");
    retypepasswordError.innerHTML = "Please Enter a valid password type";
    return false
  }

  if (password.value != retypedpassword.value) {
    let passwordMatchError = document.getElementById("passwordmatcherror");
    passwordMatchError.setAttribute("class", "error");
    passwordMatchError.innerHTML = "Passwords do not match. Please retype";
    return false
  }
  return true;
}

function cleanUpErrors() {
  let errors = document.getElementsByClassName("error");
  for (let i = 0; i < errors.length; i  ) {
    errors[i].style.display = "none";
  }
}

function ShowPass() {
  let pass = document.getElementById("password");
  let retypedpass = document.getElementById("retypedpassword");
  if (pass.type === "password") {
    pass.type = "text";
    retypedpass.type = "text";
  } else {
    pass.type = "password";
    retypedpass.type = "password";
  }
}

window.onload = () => {
  let registerForm = document.getElementById("registerdetails");
  registerForm.addEventListener("submit", (event) => {
    if (!checkPasswordMatch(registerForm)) {
      event.preventDefault();
    }
  }, false);
} 

 <form id="registerdetails" action="fma_t3confirm.html">
    <label for="username">* Username:</label>
    <input type="text" id="username">
    <span id="usernameErrorMsg"></span>

    <label for="password">* Password (Must be 8 characters and include one uppercase, one lowercase and one numeric):</label>
    <input type="password" id="password">
    <span id="passwordErrorMsg"></span>
    <input type="checkbox" id="showpasswords" onclick="ShowPass()">
    <label id="showpasswordslabel" for="showpasswords">Show passwords</label>

    <label for="retypedpassword">* Retype your password:</label>
    <input type="password" id="retypedpassword">
    <span id="retypepasswordErrorMsg"></span>
    <span id="passwordmatcherror"></span>

    <button type="submit" id="registerButton">Register</button>
</form>