各位前輩好
小女子目前正在製作一贊助流程

Codepen網址
https://codepen.io/Okaybeok/pen/KKwMrgq

這個流程畫面有限制
1.所有資訊框都是放在一個Form裡面
切換下一步之類的只是拿來顯示隱藏表格

2.不能額外跳出其他視窗或Alert等等
一切都在這個畫面內完成......

遇到幾個問題
懇請各位前輩協助指導了....

=============問題1===================
( 在 5------------第三步-贊助留言-------------- )
在填寫入贊助數字時候
我想要限制最低金額為60、最高為150000，想要設置範圍
卻發現直接用HTML5的 input type="number"
<input type="number" min="5" max="30">
還是可以寫出範圍外的數字，而且可以輸入中文
所以我找了一個限制輸入框只能輸入數字的function

 (function ($) {
        $.fn.inputFilter = function (inputFilter) {
            return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function () {
                if (inputFilter(this.value)) {
                    this.oldValue = this.value;
                    this.oldSelectionStart = this.selectionStart;
                    this.oldSelectionEnd = this.selectionEnd;
                } else if (this.hasOwnProperty("oldValue")) {
                    this.value = this.oldValue;
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                } else {
                    this.value = "";
                }
            });
        };
    }(jQuery));


    //贊助金額需小於150000
    $(".l_m_cost").inputFilter(function (value) {
        return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 150000);
    });

這段
但我還是想不到最低金額該怎麼設定
後來找到說

   //如果輸入數字小於60會自動把數值變成60，如果輸入數字大於150000會自動把數值變成150000，
    $('.l_m_cost').change(function () {
        var n = $('.l_m_cost').val();
        if (n < 60 || n === "") {
            $('.l_m_cost').val(60);
            $(".min_donate").show();
        } else {
            $(".min_donate").hide();
        }
    });

強制他寫小於60時候就跳出提視窗跟把框內數字更改為60

但我發現這樣不太OK
因為如果他輸入的數字小於60
但她直接按下一步
他並沒有注意到數字被更改了，還是會跳到下一個畫面

a.
請問有方法讓他如果數字不對的話按下一步無效，然後輸入正確以後才又可以繼續下一步嗎?
(覺得這樣才能是正確的阻擋使用者錯誤操作)
b.
關於提示訊息的部分
我是用onChange，但是發現你需要輸入完，點到旁邊讓input失焦才會有動作，所以當下他也無法注意到自己沒有填寫我們需要的值就繼續下一步，
我希望他輸入完可以立刻有提示(如果錯的話)

我試過用keyup，結果只要在輸入當下都會立刻把我的數字變成60，想往前刪也刪不掉...囧
如下圖

請問該怎麼做才對呢?
有可能做到輸入完不用點擊旁邊就可以有訊息嗎?

===============問題2============
(在14-------------第九步-手機條碼載具------------
和
15--------------第九步-自然人憑證載具---------- )

手機條碼輸入格式、和自然人憑證格式要求為

手機條碼
由Code39組成，總長度為8碼字元
第一碼必為『/』
其餘七碼則由數字【0-9】、大寫英文【A-Z】與特殊符號【.】【-】【+】組成

自然人憑證條碼
總長度為16碼字元
前兩碼為大寫英文【A-Z】
後14碼為數字【0-9】

因為要檢驗所以我去查了正規表示法

    //手機條碼輸入格式
    $("#Phone_barcode").blur(function () {
        var PBReGex =  /^\/[0-9A-Z+-.]{7}$/;
        if (!PBReGex.test($("#Phone_barcode").val())) {
            $(".error1").text("手機條碼格式錯誤");
            return false;
        } else {
            $(".error1").hide();
            return true;
        }
    });



    //自然人憑證輸入格式 
    $("#NPC_barcode").blur(function () {
       
        var NPC_barcode_reg = /^[A-Z]{2}\d{14}/;
        if (!NPC_barcode_reg.test($("#NPC_barcode").val())) {
            $(".error2").text("自然人憑證格式錯誤");
            return false;
        } else {
            $(".error2").hide();
            return true;
        }
    });
   

    //強制自然人憑證和手機條碼輸入的英文變大寫
    $("#Phone_barcode,#NPC_barcode").keyup(function(e){
        var str=$(this).val();
        str=str.toUpperCase();
        $(this).val(str);
    });

請問我的正則表示是對的嗎?
因為我在手機條碼的部分上，第一次輸入錯誤時候的確會產生提示訊息
但我發現我輸入正確後再次輸入錯誤
他的提示就不會出現了
如圖

若不是正規表示法的問題，請問這該怎麼解呢?

這部分也跟上面問題一一樣

a.請問有方法讓他如果輸入格式不對的話按下一步無效，然後輸入正確以後才又可以繼續下一步嗎?

b.有可能做到輸入完不用點擊旁邊就可以有訊息嗎?
我這邊是用blur()，但一樣是你需要輸入完，點到旁邊讓input失焦才會有動作Q_Q

以上是我目前遇到的問題

煩請各位前輩指教

謝謝