问题来源
最近在项目中前端使用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(/^(||)?([-]|[]|[]|[-]|[])[-]{}$/);
if (val == "") {//如果为空，直接通过
return true;
} //如果手机号码不能通过验证
else if (telReg == false) { return false;
}
else {
return true;
} },
message: '请输入正确格式的号码',
params:
},
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表示提示的信息，当然里面的验证属性，你可以自定义自己的提示来做。