JS 實作 #7 | 輸入欄位轉換型態與驗証;parseFloat()、isNaN()

這一節相對簡單,由於輸入的欄位預設型態是 string,所以要做些型態轉換,另外也要驗証是否欄位有正確的輸入值。

開始實作

1. 先調整一下處理的順序,新增一個 updateBudget() 方法,來避免 DRY (Don’t Repeat Yourself) 原則。

// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var setupEventListeners = function() {
        var DOM = UICtrl.getDOMstrings();
        document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);
        document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {
                ctrlAddItem();
            }
        });
    };
    **var updateBudget = function() {
        // 5-1. Calcuate the budget
        // 5-2. Return the budget
        // 5-3  Display the budget on the UI
    };**

    var ctrlAddItem = function() {

        var input,newItem;

        // 1. Get the field input data
        input = UICtrl.getInput();

        // 2. add the item to the budget controller
        newItem = budgetController.addItem(input.type, input.description, input.value);

        // 3. add the item to the UI
        UICtrl.addListItem(newItem, input.type);

        // 4. clear the fields;
        UICtrl.clearFields();
        
        **// 5. calcaulate & update the budget on the UI
        updateBudget();**
    }
    
    return {
        init: function() {
            console.log('Application has started.');
            setupEventListeners();
        }
    }
})(budgetController, UIController);

controller.init();

2. 接著使用 parseFloat() 將欄位的值轉換為數字 Number

// UI CONTROLLER
var UIController = (function() {

    ...

    return {
        getInput: function() {
            return {
                type: document.querySelector(DOMstrings.inputType).value, // inc or exp
                description : document.querySelector(DOMstrings.inputDescription).value,
                value : **parseFloat(document.querySelector(DOMstrings.inputValue).value)**
            }
        },
        getDOMstrings: function() {
            ...
        },
        addListItem: function(obj, type) {
			...
        },
        clearFields: function () {
            ...
        }
    };

})();

3. 最後驗証欄位內容是否為空或符合數字才進行操作 !=""isNaN()

// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var setupEventListeners = function() {
        var DOM = UICtrl.getDOMstrings();
        document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);
        document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {
                ctrlAddItem();
            }
        });
    };
    var updateBudget = function() {
        // 5-1. Calcuate the budget
        // 5-2. Return the budget
        // 5-3  Display the budget on the UI
    };

    var ctrlAddItem = function() {

        var input,newItem;

        // 1. Get the field input data
        input = UICtrl.getInput();

        **if (input.description != "" && !isNan(input.value) && input.value > 0)** {
            // 2. add the item to the budget controller
            newItem = budgetController.addItem(input.type, input.description, input.value);

            // 3. add the item to the UI
            UICtrl.addListItem(newItem, input.type);

            // 4. clear the fields;
            UICtrl.clearFields();

            // 5. calcaulate & update the budget on the UI
            updateBudget();
        }
        
    }
    
    return {
        init: function() {
            console.log('Application has started.');
            setupEventListeners();
        }
    }
})(budgetController, UIController);

controller.init();

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.