本文我们将介绍使用 Knockout.js 实现一些基本的数据验证。就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法。

  • 使用自定义方法,不需要任何插件
  • 最简单的方法是使用已有的插件

如果你刚刚接触 Knockout.js,强烈建议你阅读我之前的 文章,那篇文章中我分享了一些关于 Knockout.js 的基本知识。本文我们使用 Visual Studio 进行开发,希望你能喜欢。现在开始。

源码下载

第 1 段(可获 1.23 积分)

创建 HTML 页面

要使用 Knockout.js 首先需要一个页面。在此之前请先从 NuGet 上安装 Knockout.js 和 jQuery 。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>

现在创建一个 JavaScript 文件,并在页面中引入:

 <script src="Validations-Without-Plugin.js"></script> 

Knockout.js 数据验证之无插件版本

打开你的 JS 文件 (Validations-Without-Plugin.js),这是我们编写脚本的地方。首先,创建视图模型,并使用 tje applyBindings 函数进行绑定。

第 2 段(可获 1.09 积分)
$(function () {
function myViewModel(firstName, lastName, email) {
this.txtFirstName = ko.observable(firstName);
this.txtLastName = ko.observable(lastName);
this.txtEmail = ko.observable(email);
};
ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com"));
});

接下来创建视图:

<!DOCTYPE html>
<html>
<head>
<title>KnockOut JS Validations</title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/knockout-3.4.1.js"></script>
<script src="Scripts/Validations-Without-Plugin.js"></script> </head>
<body>
<table>
<caption>Knockout JS Validation</caption>
<tr>
<td>
First Name: <input type="text" id="txtFirstName" name="txtFirstName" data-bind='value: txtFirstName' />
</td>
</tr>
<tr>
<td>
Last Name: <input type="text" id="txtLastName" name="txtLastName" data-bind='value: txtLastName' />
</td>
</tr>
<tr>
<td>
Email: <input type="text" id="txtEmail" name="txtEmail" data-bind='value: txtEmail' />
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit" />
</td>
</tr>
</table>
</body>
</html>
第 3 段(可获 0.08 积分)

如果打开此页面就能看到视图上已经显示了我们之前在视图模型中定义的数据(你还记得使用 observable() 吗?)

到目前为止一切都很好。接下来需要更新视图模型并创建一些填充剂。

Knockout.js extenders (填充剂) 是最简单的用来给观察值提供额外功能的方式。可以是任何东西,在这里我们为观察值或者是控制器创建一些验证器 。

我们可以创建一个填充剂并使用如下代码来更新视图:

$(function () {
ko.extenders.isRequired = function (elm, customMessage) { //add some sub-observables to our observable
elm.hasError = ko.observable();
elm.message = ko.observable(); //This is the function to validate the value entered in the text boxes function validateValueEntered(valEntered) {
elm.hasError(valEntered ? false : true);
//If the custom message is not given, the default one is taken
elm.message(valEntered ? "" : customMessage || "I am required �� ");
} //Call the validation function for the initial validation
validateValueEntered(elm()); //Validate the value whenever there is a change in value
elm.subscribe(validateValueEntered); return elm;
}; ko.extenders.isEmail = function (elm, customMessage) { //add some sub-observables to our observable
elm.hasError = ko.observable();
elm.message = ko.observable(); //This is the function to validate the value entered in the text boxes function validateEmail(valEntered) {
var emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
//If the value entered is a valid mail id, return fals or return true
elm.hasError((emailPattern.test(valEntered) === false) ? true : false);
//If not a valid mail id, return custom message
elm.message((emailPattern.test(valEntered) === true) ? "" : customMessage);
} //Call the validation function for the initial validation
validateEmail(elm()); //Validate the value whenever there is a change in value
elm.subscribe(validateEmail); return elm;
}; function myViewModel(firstName, lastName, email) {
this.txtFirstName = ko.observable(firstName).extend({ isRequired: "You missed First Name" });
this.txtLastName = ko.observable(lastName).extend({ isRequired: "" });
this.txtEmail = ko.observable(email).extend({ isEmail: "Not a valid mail id" });
};
ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com"));
});
第 4 段(可获 1.16 积分)

这个代码 .extend({ isRequired: “You missed First Name” }); 用来调用我们刚创建的填充剂。第一个参数是我们创建的填充剂的名称,第二个参数是一个自定义消息。我在注释里对代码进行了解释,如果你有任何问题或者疑问可以直接在评论里发表。现在是更新视图的时候了。

<!DOCTYPE html>
<html>
<head>
<title>KnockOut JS Validations</title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/knockout-3.4.1.js"></script>
<script src="Scripts/Validations-Without-Plugin.js"></script>
<style>
.error {
color: #D8000C;
background-color: #FFBABA;
font-family: cursive;
}
table {
border: 1px solid #c71585;
padding: 20px;
}
td {
border: 1px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<table>
<caption>Knockout JS Validation</caption>
<tr>
<td>
First Name: <input type="text" id="txtFirstName" name="txtFirstName" data-bind='value: txtFirstName, valueUpdate: "afterkeydown"' />
<span class="error" data-bind='visible: txtFirstName.hasError, text: txtFirstName.message'></span>
</td>
</tr>
<tr>
<td>
Last Name: <input type="text" id="txtLastName" name="txtLastName" data-bind='value: txtLastName, valueUpdate: "afterkeydown"' />
<span class="error" data-bind='visible: txtLastName.hasError, text: txtLastName.message'></span>
</td>
</tr>
<tr>
<td>
Email: <input type="text" id="txtEmail" name="txtEmail" data-bind='value: txtEmail, valueUpdate: "afterkeydown"' />
<span class="error" data-bind='visible: txtEmail.hasError, text: txtEmail.message'></span>
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit" />
</td>
</tr>
</table>
</body>
</html>
第 5 段(可获 0.73 积分)

每个可观测值有其独立的 hasError 和消息属性。你是否注意到了我们在每个控件的 data-bind 事件中用了 valueUpdate: “afterkeydown” ?这是用于初始的数据验证。接下来我们运行程序并查看结果是否正确。

使用插件实现 Knockout.js 验证

因为要用到插件,我们必须先从 NuGet 上安装这些插件。你可以从 这里 获得所需插件。

现在创建视图模型

$(function () {
function myViewModel(firstName, lastName, email) {
this.txtFirstName = ko.observable(firstName).extend({ required: true });
this.txtLastName = ko.observable(lastName).extend({ required: false });
this.txtEmail = ko.observable(email).extend({ email: true });
};
ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com"));
});
第 6 段(可获 1.06 积分)

你可以看到,有其他我们创建的文件相比较,这里只有简单数行代码。现在创建视图:

<!DOCTYPE html>
<html>
<head>
<title>KnockOut JS Validations</title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/knockout-3.4.1.js"></script>
<script src="Scripts/knockout.validation.js"></script>
<script src="Scripts/Validations-Plugin.js"></script>
<style>
table {
border: 1px solid #c71585;
padding: 20px;
}
td {
border: 1px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<table>
<caption>Knockout JS Validation</caption>
<tr>
<td>
First Name: <input type="text" id="txtFirstName" name="txtFirstName" data-bind='value: txtFirstName' />
</td>
</tr>
<tr>
<td>
Last Name: <input type="text" id="txtLastName" name="txtLastName" data-bind='value: txtLastName' />
</td>
</tr>
<tr>
<td>
Email: <input type="text" id="txtEmail" name="txtEmail" data-bind='value: txtEmail' />
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit" />
</td>
</tr>
</table>
</body>
</html>
第 7 段(可获 0.33 积分)

别忘了在页面中引入 knockout.validation.js 脚本文件。如果一切准备就绪,就可以运行程序并查看输出结果。

今天就讲这么多。你可以下载本文源码。

参考资料

另请参阅

Knockout.js 数据验证之插件版和无插件版的更多相关文章

  1. jQuery鼠标移入移出(冒泡版和无冒泡版)

    带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件 没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件

  2. jquery数据验证插件(自制,简单,练手)

    一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults = { bugColor: '#FFCCCC', ...

  3. jquery数据验证插件

    jquery数据验证插件(自制,简单,练手)   一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults ...

  4. 7.Knockout.Js(Mapping插件)

    前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...

  5. 【转】基于jquery,bootstrap数据验证插件bootstrapValidator 教程

    bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. 需要引用css: bootstrap.min.c ...

  6. 基于jquery,bootstrap数据验证插件bootstrapValidator 教程

    bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. 需要引用css: bootstrap.min.c ...

  7. 基于jquery,bootstrap数据验证插件bootstrapValidator

    bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. 需要引用css: bootstrap.min.c ...

  8. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  9. knockout更新列表中的某条数据,knockout.js绑定数组时更新其中一条数据

    knockout是一款前端实现MVVM的JS框架,仅knockout.js一个47kb的文件,相当实用,做前端无刷新页面,快速实现JS与HTML数据交互. knockout目前最新版:knockout ...

随机推荐

  1. HTTP协议中 POST和GET的区别

    http://blog.csdn.net/whuslei/article/details/6667095 权威点的说明请参考:http://www.cs.tut.fi/~jkorpela/forms/ ...

  2. winform datagridview 打印

    转载:http://www.cnblogs.com/Irving/archive/2012/10/12/2721666.html c#实现打印功能 http://www.cnblogs.com/zhc ...

  3. java基础学习总结——数组

    一.数组的基本概念 数组可以看成是多个相同类型数据组合,对这些数据的统一管理. 数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 数组的元素可以是任何数据类型,包括基 ...

  4. [MSDN] Windows Server 2012 R2 简/繁/英下载

    Windows Server 2012 R2 Chinese-Simplified ISO SHA1-------------------------------------------------- ...

  5. 【转】教你用C#读写、删除、更新excel表格记录

    文章出处:http://blog.csdn.net/kuangshazi515/article/details/6585118 如下图所示,编一个程序,鼠标单击窗体视图区(右边)时,获取一对坐标(X, ...

  6. SQL 条件 判断 select case as

    " then "返回的数据1" " then "返回的数据2" else "返回的其他数据" end as 新的列名 f ...

  7. C# 输入法 z

    C# 输入法 虽说输入法不是什么新事物,各种语言版本都有,不过在C#不常见:这就会给人一种误会:C#不能做!其实C#能不能做呢,答案是肯定的——三种方式都行:IMM.TSF以及外挂式.IMM这种就是调 ...

  8. CMMI5级——原因分析及解决方案(Causal Analysis and Resolution)

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010825142/article/details/15338085 聪明的人在出现问题的时候,除了 ...

  9. java中ant包中的org.apache.tools.zip实现压缩和解压缩

    其实apache中的ant包(请自行GOOGLE之ant.jar)中有一个更好的类,已经支持中文了,我们就不重复制造轮子了,拿来用吧,这里最主要的功能是实现了 可以指定多个文件 到同一个压缩包的功能 ...

  10. 通过http请求传递xml流和接收xml流的代码示例

    通过http请求传递xml流和接收xml流的代码示例 //1.在servlet中post一个xml流:import java.io.OutputStreamWriter;import org.jdom ...