Question

JS家伙的新手！我觉得我已经理解了我的代码在做什么，但它仍然无法工作。

这个错误（据说）是对电话号码表格的验证，我的代码是 - 据我所知 - 应该工作（但不是）。

请注意，我没有验证地址，邮政编码和CC的代码。我的想法是，我可以将您的解决方案应用于论文，因为它们与电话号码类似。

另请注意，我确实尝试过isNaN，但它很奇怪＆＃34;。希望这不是太模糊，但我相信你们中的一些人会知道＆＃34;我在说什么。

我们走了（对不起，如果我的功能有点长，请告诉我它的不良做法或其他什么。）

如果可以的话，让我们远离直言不讳的答案？我想知道什么是错的，所以我可以自己修理它，如果你有耐心的话，请引导我完成它:)

JS和HTML：

＆＃13;

function detailCheck() {
  var phNoLength = document.getElementById('phNo').value.length;  //get value for phone number from form for checking
  var cardNoLength = document.getElementById('cardNo').value.length; //get value for card number length for checking 
  var postCodeLength = document.getElementById("postCode").value.length //get value for post code length
  var a = /^[A-Za-z]+$/; 
  var b = /^[-+]?[0-9]+$/; 
 for (var i = 0; i < 5; i++) {
   details = document.getElementById("myForm")[i].value;
   if (details === "") {
     var i = ("Please enter ALL your details."); 
     document.getElementById("formTital").innerHTML=i;
    return;
    } else {
    
     if(phNoLength != 7) {

      var i = "Please use a phone number with a length of 7"; 
      document.getElementById("formTital").innerHTML = i;    
     } else {
      if(b.test(document.getElementById("phNo").value)) {   
      	
       if(postCodeLength === 4){   
         
        var f_nameLength = document.getElementById('fName').value.length; 
        var l_nameLength = document.getElementById('lName').value.length; 

        if(f_nameLength < 3) {   
         var i = "First name not long enough"
         document.getElementById("formTital").innerHTML=i;

        } else {

          if(a.test(document.getElementById("fName").value)) {    
        	if(l_nameLength < 3) {
               var i = "Last name not long enough"
               document.getElementById("formTital").innerHTML=i;

                } else {

                  if(a.test(document.getElementById("lName").value)) {
                  	
                  	 if(cardNoLength === 4) {
                  	 	 
                  	 	if(isNaN(cardNoLength)) {
                           var i = "Your card number must be numbers only";
                          document.getElementById("formTital").innerHTML=i;

                        } else {
                          //---- End result ----//
                             toggleContent();
                          //--------------------//
                        }
                      } else {
               	        var i = "Your card number must have four numbers";
                       document.getElementById("formTital").innerHTML = i;
                      }
                  } else {    
                    var i = "Please only use letters in your last name";
                    document.getElementById("formTital").innerHTML=i;
                  }
                }
            } else {
      	     var i = "Please only use letters in your first name";
             document.getElementById("formTital").innerHTML=i;
            }

        }  
       } else {
    	var i = "Please use a post code with a length of four";
    	document.getElementById("formTital").innerHTML = i;
       }
   } else {
     var i = "only use numbers in your Phone number";
     document.getElementById("formTital").innerHTML=i;
   }
}
}
}
}

＆＃13;

 <form id="myForm" action="form_action.asp">
    First name: <br> <input class="formInput" type="text" id="fName" name="fName"><br>
    Last name: <br> <input class="formInput" type="text" id="lName" name="lName"><br>
    Phone Number: <br> <input class="formInput" type="number" id="phNo" name="phNo" maxlength="7"><br>
    Credit Card Number: <br> <input class="formInput" type="password" id="cardNo" name="cardNo" maxlength="4"><br>
    Address: <br> <input class="formInput" type="text" id="address" name="address"><br>
    Post code: <br> <input class="formInput" type="number" id="postCode" name="postCode" maxlength="4"><br>
   </form>

＆＃13;

Answer 1

当您想要进行验证时，这一点并不明显（您包含了一个函数，但不清楚您是否希望它成为事件处理程序）。

你的正则表达式看起来很好。我包含一个精简的JSFiddle和一个input，我为keyup添加了一个事件处理程序，并为你的正则表达式显示.test()的结果。

See it here

关于你的代码，它相当混乱。在表单验证方面。我假设您打算为用户显示单个状态消息，因此您希望首先确定验证的优先级。一个更清洁的选择是使用具有有序return的函数，例如使用此伪代码：

function getErrorMessage(){
  // if name is invalid
  //            return 'Your name is invalid.';
  // if phone is invalid
  //            return 'Your phone is invalid.';
  // ...
  // return '';
}

嵌套这么多条件语句会导致非常混乱，非常难以维护的意大利面条代码。如果您是Javascript的新手，最好尽早学习最佳实践，因为它将在未来为您节省大量的麻烦和面子。

如果我没有正确理解你的问题，请告诉我。

形式验证困境

1 个答案: