iT邦幫忙

0

即時顯示錯誤訊息以及限制接下來動作

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

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

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

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

遇到幾個問題
懇請各位前輩協助指導了..../images/emoticon/emoticon46.gif


=============問題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

以上是我目前遇到的問題

/images/emoticon/emoticon06.gif

煩請各位前輩指教

謝謝/images/emoticon/emoticon02.gif

2 個回答

0
froce
iT邦大師 2 級 ‧ 2019-12-13 16:34:46

問題1
a.

$('.l_m_cost').change(function () {
        var n = $('.l_m_cost').val();
        if (n < 60 || n === "") {
            $('.l_m_cost').val(60);
            $(".min_donate").show();
            return
        } else {
            $(".min_donate").hide();
        }
    });

可以的話加個alert更好。

b.
這種狀況不適合用keyup或onchange檢查。

問題2
a.
懶得看。XD

b.這種不用改值可以連續檢查的你就可以用keyup,如果不想太煩你可以先檢查keyup時的字數。

0
listennn08
iT邦新手 1 級 ‧ 2019-12-13 16:43:21

1.a 寫在下一步的 function 裡面
1.b 可以用 blur + 下一步的function檢查
2.a 可以 在下一步在用正則過濾一次
2.b 可以用 vue

你的下一步都是同一個 click 我覺得你可以寫一個function 執行下一步 帶入流程去呼叫別的 function 來做檢查
這樣程式碼看起來比較簡單吧

const nextStep = (step) => {
    switch (step){
        case '1':
            function () ...
        case '2':
            function () ...
        default:
            function () ...
    }
    nextStep
}

我要發表回答

立即登入回答