JavaScript验证两个文本框

Question

下面的代码验证两个名称服务器文本框。 如您所见，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

可能是这样的：

    <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 2

好吧，这是另一种方法：

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 3

在工作中看到了这个。 在家玩。 这是一个工作的jsFiddle 。 是的，它过于复杂，但是我讨厌alert('annoying pop-up'); 。

我评论了来源，所以您会更好地理解为什么我这样写。

sg522 ：它可能不会复制/粘贴到您的代码中并可以正常工作，但是我不知道其余的代码是什么。 我们都不是在这里为您编写代码。 我们在这里帮助您学习并成为更有经验的程序员。

如果您有任何疑问，请告诉我们。

编码愉快！

更新：修改了jsFiddle以与Opera和Firefox 10一起使用cloneNode或Firefox显然都不允许现在不带参数地调用cloneNode 。 Opera显然也不允许链接变量声明。

Answer 4

将要验证的元素的id作为函数的参数。

// 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 5

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