<Input> Textfield.val（）無法通過條件檢查

Question

功能：

用戶將使用掃描儀掃描其ID，其ID的值將顯示在文本字段中。 掃描ID時有兩個檢查條件，它們是：

1.）檢查ID值的第一個字符，如果該字符等於第一個字符，將執行第二個條件檢查，否則，將顯示錯誤頁面

2.）檢查ID值的長度，如果ID值的長度等於指定的長度，它將導航到下一頁，否則將顯示錯誤頁面。

問題：

我能夠滿足第一個條件檢查，在這里它可以檢查ID輸入的第一個字符。

但是，我遇到了一個問題，即它將始終失敗第二個條件（無論它通過了第一個條件還是失敗了第一個條件）。 我遇到的行為是：

->當我輸入通過第一個條件的第一個字符時（檢查第一個字符是否符合規定的第一個字符進行檢查），或者即使第一個字符與第一個條件不匹配，也總是會失敗第二個條件（是不等於規定的ID長度）。 因此，它不會在完成長度檢查之前等待ID的完整長度和最終長度完成。

因此，我需要問的是，僅在整個ID值已被掃描之后才可能檢查第二條件，而不是甚至在ID值被完全掃描之前也不能檢查第二條件。

碼：

 /*================= SCAN:Citizen OR PR ID BARCODE===================================================================================================*/ $("#NRICCodeField").on("input", function(e) { /*===Slice and Grab the First Character of the ID captured===*/ var ID_First_Character = $("#NRICCodeField").val().slice(0, 1); console.log("ID_First_Character:" + ID_First_Character); console.log("NRICCodeField:" + NRICCodeField); /*==============Check for First character if it is Citizen ==> S/T or FIN ==> F/G: if is citizen ID: accept and check for duplicate: else if it is FIN ID: splice and accept first 9 characters and check for duplicates============================*/ if ((ID_First_Character == 'S') || (ID_First_Character == 'T')) { /*========Check for 9 characters in ID card, if it is 9 characters: accept and perform other checks, else reject=======================================*/ if ($("#NRICCodeField").val().length == 9) { console.log("Local NRICCodeField equal to 9 characters"); alert("Your Citizen ID is valid"); } else if ($("#NRICCodeField").val().length != 9) { console.log("Local NRICCodeField is not equal to 9 characters"); $('#Scan_Page').fadeOut(); $('#Invalid_ID').fadeIn(); setTimeout(function() { $('#Invalid_ID').fadeOut(); $('#Scan_Page').fadeIn(); //Reset Field to empty $("#NRICCodeField").val(""); $("#NRICCodeField").focus(); }, 6000); } } else if ((ID_First_Character == 'G') || (ID_First_Character == 'F')) { //If Detect Scanned ID is FIN, Slice first 9 characters and accept and check for Duplicate var WorkerPermitID = $("#NRICCodeField").val().slice(0, 9); if (WorkerPermitID.length == 9) { alert("Your FIN ID is valid"); } } else { $('#Scan_Page').fadeOut(); $('#Invalid_ID').fadeIn(); setTimeout(function() { $('#Invalid_ID').fadeOut(); $('#Scan_Page').fadeIn(); //Reset Field to empty $("#NRICCodeField").val(""); $("#NRICCodeField").focus(); }, 6000); } }); 

 <div id="Scan_Page" align=" center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;"> <input type="password" id="NRICCodeField" style="position:absolute; top:545px; left:690px; height:68px; width:545px; outline: 0; border: 0; font-size:70px; font-color:#765725; font-family:'Gothic'; background: transparent; z-index:100;" autofocus src="lib/image/transparent.png"> </div> <div id="Invalid_ID" align=" center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=2; top:0px; left:1921px;"> <img id="Invalid_ID_msg" src="lib/image/InvalidScan.png" style="position:absolute; top:0px; left:0px; margin:auto;" /> </div> 

JSFIddle中的代碼： https ://jsfiddle.net/agtf35ks/2/

Plunker中的代碼： https ://plnkr.co/edit/HWgTjWDDLePFovLZSyS4 ? p = catalogue

Answer 1

這樣的事情怎么樣。 直到有9個字符，它才會處理輸入。 基本上，我將關閉驗證並停止任何事情，直到有9個字符為止。

    $("#NRICCodeField").on("input", function(e) {
        if(this.value.length == 9){
            validateInput();
            return;
        }
        e.stopPropagation();
        return false;

    });

    function validateInput() {}
           /*===Slice and Grab the First Character of the ID captured===*/
        var ID_First_Character = $("#NRICCodeField").val().slice(0, 1);


    /// and so on for the reast of your validation