利用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表示提示的信息，当然里面的验证属性，你可以自定义自己的提示来做。