利用Knockoutjs對電話號碼進行驗證

問題來源

最近在項目中前端使用Knockoutjs，驗證模塊自然也是使用Knockoutjs來進行表單驗證了，比較頭痛，因為沒有使用過Knockoutjs，更加別說要去用它做表單驗證了，於是乎惡補了一下Knockoutjs相關的驗證用法，也好記錄一下！

驗證需求

這里只是抽出手機號碼驗證進行舉例一下，其他驗證類似！

1、手機號碼可以填，可以不填，但填了，必須是要正確格式才能提交

2、如果手機號碼錯誤，則給出相應提示，並聚焦當前文本框

 

例子演示

根據查閱資料，對於Knockoutjs本身來說，沒有提供驗證模塊，不過，有第三方的擴展，就像你為jquery庫作extensions一樣，knockout也有一個自己的驗證擴展knockout.validation.js，用它來實現對HTML標記的驗證！

首先要引入這兩個JS文件

 <script src="~/Scripts/knockout-3.2.0.js"></script>
 <script src="~/Scripts/knockout.validation.min.js"></script>

看前端js代碼

 

<script type="text/ecmascript">
    var UserInfo = function () {
        var self = this;

        self.Phone = ko.observable('').extend({
            validation: {
                validator: function (val, someOtherVal) {
                    var telReg = !!val.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
                    if (val == "") {//如果為空，直接通過
                        return true;
                    }

                        //如果手機號碼不能通過驗證
                    else if (telReg == false) {

                        return false;
                    }
                    else {
                        return true;
                    }

                },
                message: '請輸入正確格式的號碼',
                params: 11
            },
            required: false
        })

        self.Email = ko.observable().extend({
            required: {
                params: true,
                message: "請輸入你的郵箱"
            },
            email: {
                params: true,
                message: "郵箱格式不正確"
            }
        });



        self.SubmitMsg= function () {
            self.errors = ko.validation.group(self);
            if (self.isValid()) {
                alert('提交成功');
            } else {
                self.errors.showAllMessages();
            }
        };



    }
var viewModel = new UserInfo();
ko.applyBindings(viewModel);

</script>

 看看html部分

 

<fieldset>
    <legend>個人信息</legend>
    <div class="editor-label">
        <input data-bind='value: Phone' />
    </div>
    <div class="editor-field">
        <input data-bind='value: Email' />
    </div>
    <p>
        <input type="button" value="提交" data-bind="click:SubmitMsg" />
    </p>
</fieldset>

 

 至此驗證完成，先分析一下，分別對做了數據有效性的驗證，並且每個驗證中的參數都可以以JS對象或者屬性的形式存在，相信可以很清楚的看到，如果是JS對象的話，那么params表示參數的值，而message表示提示的信息，當然里面的驗證屬性，你可以自定義自己的提示來做。