表單驗證危機

JS新手入門！我覺得我已經理解了我的代碼正在做什麼，但它仍然行不通。表單驗證危機

該錯誤是（據說）與驗證的電話號碼形式，我有代碼，據我所知 - 應該工作（但不）。

請注意，我沒有驗證地址，郵政編碼和CC的代碼。我的想法是，我可以將您的解決方案應用到論文中，因爲它們與電話號碼相似。

另請注意我確實嘗試了isNaN，但它是「怪異的」。希望這不是太模糊，但我相信你們中的一些人會「知道」我在說什麼。

這裏，我們去（很抱歉，如果我的功能有點長，讓我知道，如果它的做法不好或什麼的。）

讓如果我們能夠從生硬的回答望而卻步？我想知道什麼是錯，所以我可以自己修復，走在我通過它，如果你有心靈耐心:)

JS和HTML：

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)) { 
 
     \t 
 
     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)) {  
 
     \t if(l_nameLength < 3) { 
 
       var i = "Last name not long enough" 
 
       document.getElementById("formTital").innerHTML=i; 
 

 
       } else { 
 

 
        if(a.test(document.getElementById("lName").value)) { 
 
        \t 
 
        \t if(cardNoLength === 4) { 
 
        \t \t 
 
        \t \t if(isNaN(cardNoLength)) { 
 
          var i = "Your card number must be numbers only"; 
 
          document.getElementById("formTital").innerHTML=i; 
 

 
         } else { 
 
          //---- End result ----// 
 
          toggleContent(); 
 
          //--------------------// 
 
         } 
 
         } else { 
 
       \t   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 { 
 
     \t  var i = "Please only use letters in your first name"; 
 
      document.getElementById("formTital").innerHTML=i; 
 
      } 
 

 
     } 
 
     } else { 
 
    \t var i = "Please use a post code with a length of four"; 
 
    \t document.getElementById("formTital").innerHTML = i; 
 
     } 
 
    } else { 
 
    var i = "only use numbers in your Phone number"; 
 
    document.getElementById("formTital").innerHTML=i; 
 
    } 
 
} 
 
} 
 
} 
 
}

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

來源

2016-08-27 Draxy

這是一個*很多嵌套'if's ... –

這是一件壞事？你會如何設定像這樣的條件？ – Draxy

不一定是壞事，但我個人認爲他們變得非常混亂，特別是取決於縮進。 –

當你想要驗證發生時（你包括一個函數，但不清楚你是否希望它是一個事件處理程序）。

你的正則表達式似乎很好。我包含一個精簡的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新手，最好先儘早學習最佳實踐，因爲它將在未來爲您節省大量頭痛和麪部手術。

如果我沒有正確理解你的問題，請告訴我。

來源

2016-08-27 10:35:59

我正在考慮重新編程這個功能 - 只是爲了避免混亂。但是有很多條件需要檢查！有關如何處理此問題的任何建議？單獨的功能可能嗎？ – Draxy

它不一定很複雜，如果你想重新創建這種類型的設計，只要決定你覺得什麼是適當的驗證順序就行了。我覺得好像自然的UX會讓最後一個輸入變得無效並且無效。閱讀表單驗證和UI/UX相關信息。 –

表單驗證危機

回答

相關問題