在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
2024-08-24 21:45:21
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证。
自定义验证规则
ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集合类型,key就是自定义验证规则的名称,value是一个json对象。
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<style type="text/css">.validationMessage {color: red;}</style><input data-bind="value: name, valueUpdate: 'afterkeydown'"/><br/>@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">//自定义验证规则ko.validation.rules["myCustomValidation"] = {validator: function(val, otherVal) {return val == otherVal;},message: '输入值必须和{0}相等'};//注册自定义规则ko.validation.registerExtenders();//使用构造函数创建一个View Modelvar User = function() {this.name = ko.observable().extend({myCustomValidation: 3});};//创建实例var user = new User();//绑定ko.applyBindings(user);$(function() {});</script>}
还可以把自定义规则以匿名函数的形式放在extend方法之内,还可以同时注册多个自定义验证规则。
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<style type="text/css">.validationMessage {color: red;}</style><input data-bind="value: name, valueUpdate: 'afterkeydown'"/><br/>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script src="~/Scripts/knockout.validation.js"></script><script src="~/Scripts/zh-CN.js"></script><script type="text/javascript">//使用构造函数创建一个View Modelvar 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>}
自定义异步验证规则
假设,现在需要根据前台输入的Product的Id来判断是否存在。
在HomeController中提供一个根据id判断是否存在的Action方法,返回json格式。
static readonly IProductRepository repository = new ProductRepository();......[HttpPost]public JsonResult JudgeProduct(int id){//获取所有记录var allProducts = repository.GetAll();//获取所有的idsIEnumerable<int> ids = from p in allProductsselect p.Id;if (ids.Contains(id)){return Json(new {msg = true});}else{return Json(new { msg = false });}}
前台需要给View Model实例注册异步验证规则。
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<style type="text/css">.validationMessage {color: red;}</style><input data-bind="value: id, valueUpdate: 'afterkeydown'"/><br/>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script src="~/Scripts/knockout.validation.js"></script><script src="~/Scripts/zh-CN.js"></script><script type="text/javascript">//使用构造函数创建一个View Modelvar Product = function () {this.id = ko.observable();this.isExist = ko.validatedObservable(true);};//创建实例var product = new Product();//给实例成员注册自定义验证逻辑product.id.subscribe(function () {$.post('@Url.Action("JudgeProduct","Home")', { id: product.id() }, function (data) {product.isExist(data.msg);});});//给实例成员实施验证product.id.extend({validation: {validator: function (val, param) {return product.isExist();},message: "数据库中没有此款产品"}});//绑定ko.applyBindings(product);$(function () {});</script>}
以上,通过subscribe方法,给Product的实例字段id注册了一个自定义验证规则,向服务端发送POST请求,把返回的结果赋值给Prouct的实例字段isExist。再给Product的实例字段id扩展自定义验证规则,返回Product实例字段isExist的值,如果为true,表示验证通过,反之,验证不通过。
最新文章
- 三言两语之js面向对象初探1
- AC日记——画矩形 1.5 42
- hdu 4389 数位dp
- 使用Android应用调用Web Service
- 安卓开发_浅谈ContextMenu(上下文菜单)
- 送给和我一样曾经浮躁过的PHP程序猿
- ctrl+z暂停任务
- mysql 数据库自增id 的总结
- oracle登录错误(ORA-01033:ORACLE initialization or shutdown in progress
- 修改MySQL默认最大连接数
- BZOJ 3211 弗洛拉前往国家 树阵+并检查集合
- Ubuntu12.04编译Android4.0.1源码全过程-----附wubi安装ubuntu编译android源码硬盘空间不够的问题解决
- 洛谷P3321 序列统计
- string赋值和操作
- 关于 LD_LIBRARY_PATH 这个环境变量
- pytest.3.Assert
- windows的cmd下面格式化某个盘符
- [BUG]自己的bug自己解,记一次在变量使用过程引发的bug
- 网页设计简史看设计&;代码“隔膜”
- Codis+redis 集群测试