1、引入<script src="~/Scripts/knockout.validation.js"></script>
2、在Scripts文件夹下创建zh-CN.js,用来汉化。
ko.validation.localize({
required: '必填字段',
min: '输入值必须大于等于 {0}',
max: '输入值必须小于等于 {0}',
minLength: '至少输入 {0} 个字符',
maxLength: '输入的字符数不能超过 {0} 个',
pattern: '请检查此值',
step: '每次步进值是 {0}',
email: 'email地址格式不正确',
date: '日期格式不正确',
dateISO: '日期格式不正确',
number: '请输入一个数字',
digit: '请输入一个数字',
phoneUS: '请输入一个合法的手机号(US)',
equal: '输入值不一样',
notEqual: '请选择另一个值',
unique: '此值应该是唯一的'
});
3、Knockout.Validation的基本验证
正则验证:
self.MobileNumber = ko.observable().extend({ pattern: { params: /^(?:04\d{2}|\({1}04\d{2}\){1})\s{0,1}(\d{3}(\s{0,1})\d{3})$/, message: "Invalid mobile number."} });
□ 必填
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
.validationMessage {
color: red;
}
</style>
<input data-bind="value: name, valueUpdate: 'afterkeydown'"/>
@section scripts
{
<script src="~/Scripts/knockout-2.2.0.js"></script>
<script src="~/Scripts/knockout.validation.js"></script>
<script src="~/Scripts/zh-CN.js"></script>
<script type="text/javascript">
//使用构造函数创建一个View Model
var User = function() {
this.name = ko.observable("darren").extend({required:true});
};
ko.applyBindings(new User());
</script>
}
□ 最小值
this.name = ko.observable("darren").extend({ min: 2 });
□ 最大值
this.name = ko.observable("darren").extend({ max: 99 });
□ 最小长度
this.name = ko.observable("darren").extend({ minLength: 3 });
□ 最大长度
this.name = ko.observable("darren").extend({ maxLength: 12 });
□ 邮件
this.name = ko.observable("darren").extend({ email: true });
□ 正则表达式
this.name = ko.observable("darren").extend({ pattern: '^[a-z0-9].$' });
□ 相等
var otherObj = ko.observable();
var myObj = ko.observable().extend({ equal: otherObj });
var myObj = ko.observable().extend({ equal: 2 });
□ 不等
var otherObj = ko.observable();
var myObj = ko.observable().extend({ notEqual: otherObj });
var myObj = ko.observable().extend({ notEqual: 2 });
□ 日期
this.name = ko.observable("").extend({ date: true });
□ 数字,包括小数点
this.name = ko.observable("").extend({ number: true });
□ 整型
this.name = ko.observable("").extend({ digit: true });
□ 同时多个验证规则
this.name = ko.observable().extend({
required: true,
maxLength: 3
});
4、自定义验证规则
@ :ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集合类型,key就是自定义验证规则的名称,value是一个json对象。
例:
<script type="text/javascript">
//自定义验证规则
ko.validation.rules["myCustomValidation"] = {
validator: function(val, otherVal) {
return val == otherVal;
},
message: '输入值必须和{0}相等'
};
//注册自定义规则
ko.validation.registerExtenders();
//使用构造函数创建一个View Model
var User = function() {
this.name = ko.observable().extend({
myCustomValidation: 3
});
};
//创建实例
var user =new User();
//绑定
ko.applyBindings(user);
$(function() {
});
</script>
@ :把自定义规则以匿名函数的形式放在extend方法之内,还可以同时注册多个自定义验证规则。
例:
<script type="text/javascript">
//使用构造函数创建一个View Model
var User = function () {
this.name = ko.observable().extend({
validation: [{
validator: function (val, someOtherVal) {
return val == someOtherVal;
},
message: '必须是 5',
params: 5
}]
});
};
//创建实例
var user =new User();
//绑定
ko.applyBindings(user);
$(function () {
});
</script>
Ajax的验证:
Model.oldPassword.extend({validation: {
async: true,
validator: function (val, params, callback) {
var options = {
url:‘’,
type: 'GET',
success: callback}
};
$.ajax(options);
},
message: '原密码输入错误,请重新输入!'
}
手机号码验证:
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 })
参考资料:
https://github.com/Knockout-Contrib/Knockout-Validation/wiki