Knockout Validation

转自：https://blog.csdn.net/afandaafandaafanda/article/details/48245611

Knockout 将View与Data进行双向绑定,在View上的数据改变能够自动反映到View所绑定的数据源上，同理，数据源的改变也能够立即反映到相关的View上。我们在使用Knockout的时候，还需要做的一个事情就是数据校验，在这方面，Knockout提供了很好的校验机制。

1.下载安装

下载之后我们的工程的javascript目录下面就有了knockout.js及knockout.validation.js文件了！

2.示例

引入相关文件：

@{
ViewBag.Title = "Home Page";
}

<style type="text/css">
.validationMessage {
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var Person = function() {
var self = this;
self.name = ko.observable().extend({
required:{ params: true, message: "please input name."} ,
maxLength: 6
});
self.age = ko.observable().extend({
required: true,
number: {
params: true,
message: "必须是数字",
},
max:100
});
self.email = ko.observable().extend({
required: {
params: true,
message: "请填写Email"
},
email: {
params: true,
message: "Email格式不正确"
}
});
self.birthday = ko.observable().extend({
required: true,
date: {
params: true,
message: "日期格式不正确"
}
});
self.score = ko.observable().extend({
required: true,
pattern: {
params: /^\d+[\.]?\d{0,2}$/g,
message: "必须是数字，并且最多两位小数！"
}
});
self.submit = function() {
if (person.isValid().length == 0) {
alert('ok');
} else {
alert("error");
}
};
};
var person = new Person();
ko.applyBindings(person);
person.isValid = ko.validation.group(person);
});
</script>
<br />
<fieldset>
<legend>Add Person</legend>
<div>Name:</div>
<div>
<input data-bind="value: name" />
</div>
<div>
Age:
</div>
<div>
<input data-bind="value: age" />
</div>
<div>
Email:
</div>
<div>
<input data-bind="value: email" />
</div>
<div>
Score:
</div>
<div>
<input data-bind="value: score" /><br /><br />
</div>
<div>
<button id="btn" data-bind="click:submit">submit</button>
</div>
</fieldset>
效果如下：

3.总结

knockout自动捕获了控件的鼠标移开事件，自动进行校验。在提交的时候，通过isValidate来决定是否提交表单.
---------------------
作者：feng1456
来源：CSDN
原文：https://blog.csdn.net/afandaafandaafanda/article/details/48245611
版权声明：本文为博主原创文章，转载请附上博文链接！

猜你喜欢