Как можно упростить javascript проверку на валидность?

#javascript #инспекция_кода #валидация

Я новичок в javascript, и у меня есть вопрос. У меня есть код с проверкой на валидность
заполнение регистрационной формы. Я думал как ее можно упростить и пришел к выводу,
что нужно создать отдельный метод и туда передавать нужные мне параметры, но столкнулся
с проблемой, что не знаю с какого места их лучше передавать. Как это сделать лучше
и правильно?

var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,20}$");

document.getElementById("registration_form").addEventListener("submit", function(event) {
  var fName = document.getElementById("fName").value;
  var lName = document.getElementById("lName").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("pass").value;
  var confirmPassword = document.getElementById("confPass").value;
    document.getElementById("error_first_name").innerHTML = '';
    document.getElementById("error_last_name").innerHTML = '';
    document.getElementById("error_email").innerHTML = '';
    document.getElementById("error_password").innerHTML = '';
    document.getElementById("error_confirmPassword").innerHTML = '';

  if (!namePattern.test(fName)) {
    document.getElementById("error_first_name").innerHTML = 'Wrong first name! range:
[4-20] and not contain numbers';
    event.preventDefault();
  } if (!namePattern.test(lName)) {
    document.getElementById("error_last_name").innerHTML = 'Wrong last name! range:
[4-20] and not contain numbers';
    event.preventDefault();
  } if(!emailPattern.test(email)){
    document.getElementById("error_email").innerHTML = 'Wrong email! Your email should
contains this symbols: [-_A-z0-9]';
    event.preventDefault();
  } if(!passwordPattern.test(password)){
    document.getElementById("error_password").innerHTML = 'Wrong password! range:
[8-20], minimum one upper case letter: [A] and minimum one figure';
    event.preventDefault();
  } if(confirmPassword != password){
    document.getElementById("error_confirmPassword").innerHTML = 'Your passwords
do not match';
    event.preventDefault();
  }
})


Моя форма:


                    

                        

                        
First Name: 
                        

                    
                    

                        

                        
Last Name: 
                        

                    
                    

                        

                        
Email: 
                        

                    
                    

                        

                        
Password: 
                        

                    
                    

                        

                        
Re-enter Password:
                        

                    

                    
                    
By clicking this button, you agree to my modern
style Policy Terms and Conditions to Use
                


Я пытаюсь уменьшить свой код, для этого я создал функцию, в которой передаю все параметры,
которые мне нужны, но что я не делаю правильно. Теперь это выглядит так.

var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,20}$");

document.getElementById("registration_form").addEventListener("submit", function(event){
function getParam(value, pattern, error_value, error_message){
    error_value.innerHTML = '';
    if(!pattern.test(value)){
        error_value.innerHTML = error_message;
        event.preventDefault();
    }
}
})


Но то, что я делаю, неверно, как я могу улучшить его и правильно передать мои параметры?
Нужно ли передавать их с помощью html или как лучше будет это реализовать?
    

Ответы

Ответ 1

Все с комментариями.

Примечание: элементы ошибок должны начинатся с error_ и дальше должно быть написано
имя поля которое в errorInfo(first_name, last_name и т.д), то есть быть вот таким:
error_first_name, error_last_name и т.д



var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,20}$");

document.getElementById("registration_form").addEventListener("submit", function(event) {
  event.preventDefault(); // достаточно написать один раз
  
  var fName = document.getElementById("fName").value;
  var lName = document.getElementById("lName").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("pass").value;
  var confirmPassword = document.getElementById("confPass").value;
  
  // набор полей ошибок
  var errorInfo = {
    first_name: { // имя поля(потом находит элемент по нему document.getElementById('error_'
+ name)) 
      // валидное ли поле? если true то не будет ошибки
      validity: namePattern.test(fName), 
      // сообщение об ошибке
      text: 'Wrong first name! range: [4-20] and not contain numbers' 
    },
    last_name: { 
      validity: namePattern.test(lName),
      text: 'Wrong last name! range: [4-20] and not contain numbers'
    },
    email: {
      validity: emailPattern.test(email),
      text: 'Wrong email! Your email should contains this symbols: [-_A-z0-9]'
    },
    password: {
      validity: passwordPattern.test(password),
      text: 'Wrong password! range: [8-20], minimum one upper case letter: [A] and
minimum one figure'
    },
    confirmPassword: {
      validity: confirmPassword === password,
      text: 'Your passwords do not match'
    }
  }
  // перебирает errorInfo, name - имя поля(ключ объекта errorInfo)
  for (let name in errorInfo) {
    var errorMsg = ''; // текст ошиьки, изначально ставит ошибку как ее нет
    
    // если поле не валидное
    if (!errorInfo[name].validity)
      errorMsg = errorInfo[name].text; // ставит текст ошибки
      
    // ставит текст ошибки (innerHTML медленее textContent)
    document.getElementById('error_' + name).textContent = errorMsg;
  }
})

                    

                        

                        
First Name: 
                        

                    
                    

                        

                        
Last Name: 
                        

                    
                    

                        

                        
Email: 
                        

                    
                    

                        

                        
Password: 
                        

                    
                    

                        

                        
Re-enter Password:
                        

                    

                    
                    
By clicking this button, you agree to my modern
style Policy Terms and Conditions to Use
                


Ответ 2

Все маски можно ввести в data- атрибуты (о бессмысленности валидации e-mail регекспом
можно почитать, например здесь)
Тексты ошибок можно вписать на страницу заранее и просто показывать/прятать блок
Все инпуты можно перебрать в цикле как дочерние к элементу 





document.getElementById("registration_form").addEventListener("submit", function(event) {
  var blocks = this.querySelectorAll('ul');
  for (var i = 0; i < blocks.length; i++) {
    var input = blocks[i].querySelector('input');
    var msg = blocks[i].querySelector('.error');
    var pattern = input.getAttribute('data-pattern');
    var valid = false;
    if (pattern !== null) {
      var re = new RegExp(pattern);
      valid = re.test(input.value);
    } else
      valid = input.value == document.getElementById('pass').value;
    if (!valid) {
      msg.style.display = 'block';
      event.preventDefault();
    } else
      msg.style.display = 'none';
  }
})
.error {
  color: #ff0000;
  display: none;
}

  

    
Wrong first name! range: [4-20] and not contain numbers
    
First Name: 
    

      
    
  
  

    
Wrong last name! range: [4-20] and not contain numbers
    
Last Name: 
    

      
    
  
  

    
Wrong email! Your email should contains this symbols: [-_A-z0-9]
    
Email: 
    

      
    
  
  

    
Wrong password! range: [8-20], minimum one upper case letter:
[A] and minimum one figure
    
Password: 
    

      
    
  
  

    
Your passwords do not match
    
Re-enter Password:
    

      
    
  

  
  
By clicking this button, you agree to my modern style Policy
Terms and Conditions to Use