Knockout.js 数据验证之插件版和无插件版
2017-06-07 23:34
405 查看
本文我们将介绍使用 Knockout.js 实现一些基本的数据验证。就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法。
使用自定义方法,不需要任何插件
最简单的方法是使用已有的插件
如果你刚刚接触 Knockout.js,强烈建议你阅读我之前的 文章,那篇文章中我分享了一些关于 Knockout.js 的基本知识。本文我们使用 Visual Studio 进行开发,希望你能喜欢。现在开始。
第 1 段(可获 1.23 积分)
0
CY24周前
现在创建一个 JavaScript 文件,并在页面中引入:
第 2 段(可获 1.09 积分)
0
CY24周前
接下来创建视图:
第 3 段(可获 0.08 积分)
0
CY24周前
如果打开此页面就能看到视图上已经显示了我们之前在视图模型中定义的数据(你还记得使用
到目前为止一切都很好。接下来需要更新视图模型并创建一些填充剂。
Knockout.js extenders (填充剂) 是最简单的用来给观察值提供额外功能的方式。可以是任何东西,在这里我们为观察值或者是控制器创建一些验证器 。
我们可以创建一个填充剂并使用如下代码来更新视图:
第 4 段(可获 1.16 积分)
0
CY24周前
这个代码
第 5 段(可获 0.73 积分)
0
CY24周前
每个可观测值有其独立的
现在创建视图模型
第 6 段(可获 1.06 积分)
0
CY24周前
你可以看到,有其他我们创建的文件相比较,这里只有简单数行代码。现在创建视图:
第 7 段(可获 0.33 积分)
0
CY24周前
别忘了在页面中引入 knockout.validation.js 脚本文件。如果一切准备就绪,就可以运行程序并查看输出结果。
今天就讲这么多。你可以下载本文源码。
Knockout-Validation Plugin
使用自定义方法,不需要任何插件
最简单的方法是使用已有的插件
如果你刚刚接触 Knockout.js,强烈建议你阅读我之前的 文章,那篇文章中我分享了一些关于 Knockout.js 的基本知识。本文我们使用 Visual Studio 进行开发,希望你能喜欢。现在开始。
源码下载
Knockout.js Validations第 1 段(可获 1.23 积分)
0
CY24周前
创建 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 积分)
0
CY24周前
$(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 积分)
0
CY24周前
如果打开此页面就能看到视图上已经显示了我们之前在视图模型中定义的数据(你还记得使用
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 积分)
0
CY24周前
这个代码
.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 积分)
0
CY24周前
每个可观测值有其独立的
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 积分)
0
CY24周前
你可以看到,有其他我们创建的文件相比较,这里只有简单数行代码。现在创建视图:
<!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 积分)
0
CY24周前
别忘了在页面中引入 knockout.validation.js 脚本文件。如果一切准备就绪,就可以运行程序并查看输出结果。
今天就讲这么多。你可以下载本文源码。
参考资料
Knockout JSKnockout-Validation Plugin
另请参阅
Articles related to Knockout.js相关文章推荐
- 数据验证插件的使用validator.js
- 一个JS密码强度验证插件
- (转载)ASP.NET MVC结合jQuery插件进行数据验证
- 常用的js数据格式验证
- js 验证数据
- javascript合法验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等
- JS验证(网页设计中表单数据的验证)
- 自由表单设计器,字段数据输入js验证发布说明
- js表单验证插件
- 前端 验证数据的js
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- ASP.NET MVC结合jQuery插件进行数据验证
- JS通用数据类型验证
- 服务端数据校验及客户端js脚本验证集成处理初探(附源码)
- jquery.validate.js remote 数据远程验证
- Js验证GridView数据
- jquery表单验证插件 jquery.form.js
- js数据验证、js email验证、js url验证、js长度验证、js数字验证等
- jQuery验证插件 ---jquery.validate.js
- jquery表单验证插件 jquery.form.js