Javascript проверяет два текстовых поля

Question

Код ниже проверяет наличие двух текстовых полей nameserver. Как вы видите, в javascript-коде есть избыточность. // validate textbox 1 и // validate textbox 2. В любом случае я могу просто использовать один скрипт. Вы знаете, что я просто хочу использовать 1 функцию проверки для проверки двух текстовых полей. Прошу прощения за мой английский. Надеюсь, вы все меня поймете. Спасибо.

<script type="text/javascript"> 

// validate textbox 1 
    function validate_domain(){ 
     var nameserver1 = document.getElementById('nameserver1').value; 
     var domain_array = nameserver1.split('.'); 

     var domain = domain_array[0]; 
    //This is reguler expresion for domain validation 
     var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/; 

    if(domain == ''){ 
     alert("Please enter the domain name"); 
     document.getElementsById('nameserver1').focus(); 
     return false; 
    } 

    if(reg.test(domain) == false){ 
     alert("Invalid character in domain. Only letters, numbers or hyphens are allowed."); 
     document.getElementsById('nameserver1').focus(); 
     return false; 
    } 

    } 



    // validate textbox 2 
    function validate_domain(){ 
     var nameserver1 = document.getElementById('nameserver1').value; 
     var domain_array = nameserver2.split('.'); 

     var domain = domain_array[0]; 
    //This is reguler expresion for domain validation 
     var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/; 

    if(domain == ''){ 
     alert("Please enter the domain name"); 
     document.getElementsById('nameserver2').focus(); 
     return false; 
    } 

    if(reg.test(domain) == false){ 
     alert("Invalid character in domain. Only letters, numbers or hyphens are allowed."); 
     document.getElementsById('nameserver2').focus(); 
     return false; 
    } 

    } 
    </script> 

<fieldset class="inlineLabels"> 

      <label for="name">Nameserver 1</label> 
      <input type="text" class="textInput" maxlength="255" size="30" value="" id="nameserver1" name="nameserver1"> 

      <label for="data">Nameserver 2</label> 
      <input type="text" class="textInput" maxlength="255" size="30" value="" id="data" name="nameserver2"> 

     </fieldset> 

      <button onclick="validate_domain(); submitForm('page1','directpage.php');" value="Validate" name="btn_validate" type="button" class="positive iconstxt icoPositive"><span>Save</span></button> 

Answer 1

Ну вот другой подход:

function ValidateDomain(){ 
    function CheckForBlank(domain, textBox){ 
     if(domain == ''){ 
      alert("Please enter the domain name"); 
      document.getElementsById('nameserver1').focus(); 
      return false; 
     } 
    } 
    function CheckForFormat(domain, textBox){ 
     if(reg.test(domain) == false){ 
      alert("Invalid character in domain. Only letters, numbers or hyphens are allowed."); 
      document.getElementsById('nameserver1').focus(); 
      return false; 
     } 
    } 
    function GetDomainName(inputId){ 
     var serverName = document.getElementById(inputId).value, 
      domain_array = serverName.split('.'); 

     return domain_array[0]; 
    } 
    var nameserver1 = GetDomainName('nameserver1'), 
     nameserver2 = GetDomainName('nameserver2'), 
     nameServerInput1 = document.getElementsById('nameserver1'); 
     nameServerInput2 = document.getElementsById('nameserver2'); 

    if (CheckForFormat(nameserver1,nameServerInput1) && CheckForBlank(nameserver1,nameServerInput1) 
     && CheckForFormat(nameserver2,nameServerInput2) && CheckForBlank(nameserver2,nameServerInput2)){ 
     //This means you are valid 
     return { 
      name1:nameserver1, 
      name2:nameserver2 
     } 
    } 
    return false; 
} 

Answer 2

Может быть, как это:

<script type="text/javascript"> 

function validate_domain(){ 

      validateTextBox('nameserver1'); 
      validateTextBox('nameserver2'); 
} 

     function validateTextBox(tbName){ 

       var nameserver1 = document.getElementById(tbName).value; 
       var domain_array = nameserver1.split('.'); 

       var domain = domain_array[0]; 
      //This is reguler expresion for domain validation 
       var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/; 

      if(domain == ''){ 
       alert("Please enter the domain name"); 
       document.getElementsById(tbName).focus(); 
       return false; 
      } 

      if(reg.test(domain) == false){ 
       alert("Invalid character in domain. Only letters, numbers or hyphens are allowed."); 
       document.getElementsById(tbName).focus(); 
       return false; 
      } 

      } 

     } 
      </script> 

Answer 3

Возьмите идентификатор элемента, который вы хотите проверить как параметр вашей функции.

// validate textbox 
function validate_domain(serverName){ 
    var server = document.getElementById(serverName).value; 
    var domain_array = server.split('.'); 

    var domain = domain_array[0]; 
//This is reguler expresion for domain validation 
    var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/; 

if(domain == ''){ 
    alert("Please enter the domain name"); 
    document.getElementsById(serverName).focus(); 
    return false; 
} 

if(reg.test(domain) == false){ 
    alert("Invalid character in domain. Only letters, numbers or hyphens are allowed."); 
    document.getElementsById(serverName).focus(); 
    return false; 
} 

} 

Answer 4

<script type="text/javascript"> 

// validate textbox 
    function validate_domain(ele){ 
     var nameserver = ele.value; 
     var domain_array = nameserver.split('.'); 

     var domain = domain_array[0]; 
    //This is reguler expresion for domain validation 
     var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/; 

    if(domain == ''){ 
     alert("Please enter the domain name"); 
     ele.focus(); 
     return false; 
    } 

    if(reg.test(domain) == false){ 
     alert("Invalid character in domain. Only letters, numbers or hyphens are allowed."); 
     ele.focus(); 
     return false; 
    } 

    } 
    </script> 

<fieldset class="inlineLabels"> 

      <label for="name">Nameserver 1</label> 
      <input type="text" class="textInput" maxlength="255" size="30" value="" id="nameserver1" name="nameserver1"> 

      <label for="data">Nameserver 2</label> 
      <input type="text" class="textInput" maxlength="255" size="30" value="" id="data" name="nameserver2"> 

     </fieldset> 

      <button onclick="validate_domain(document.getElementById('nameserver1')); validate_domain(document.getElementById('nameserver2')); submitForm('page1','directpage.php');" value="Validate" name="btn_validate" type="button" class="positive iconstxt icoPositive"><span>Save</span></button> 

Answer 5

Видел этот на работе. Играли с ним дома. Вот работающий jsFiddle. Да, это слишком сложно, но я ненавижу alert('annoying pop-up');.

Я прокомментировал источник, поэтому вы бы лучше поняли, почему я написал его так.

sg522: Он не может копировать/вставлять в ваш код и, но я не знаю, что представляет собой остальная часть вашего кода. Мы также не здесь, чтобы написать ваш код для вас. Мы здесь, чтобы помочь вам учиться и стать более опытным программистом.

Пожалуйста, сообщите нам, если у вас есть вопросы.

Счастливое кодирование!

ОБНОВЛЕНИЕ: Модифицированный jsFiddle для работы с Opera и Firefox 10. Ни Opera, ни Firefox, по-видимому, не разрешают cloneNode без параметров. Опера также, по-видимому, не разрешает цепные объявления переменных.