我目前使用Jquery Validation和Qtip来处理实际验证并使用验证错误的错误工具提示样式通知使用验证选项的errorPlacement组件向屏幕显示信息.
目前每个viewModel都有自己的自定义方法来设置和启动验证和回调,但是我试图找到一种更好的方法来做到这一点,无论是添加自定义绑定来通过数据绑定设置我的验证规则还是另一种方法,但仍然产生相同的结果(即,当发生验证错误时触发errorPlacement并告诉Qtip显示给定元素的错误).
在我开始自己制作之前,我刚刚在线查看并找到了Knockout Validation,我最初认为这是一个好主意,我可以将我的验证逻辑直接应用于我的viewModel中的数据,然后找到一些回调来获得Qtip启动,但似乎没有回复,我可以找到记录.图书馆似乎做了我想要的所有事情的验证方面,而不是显示方面的事情.我查看了源代码和示例但看不到除ko.validation.group(viewModel)以外的任何内容,它会给我一个包含错误的observable,但我不确定是否可以像我一样使用它期待.
以下是我当前验证如何发生的示例:
/*globals $ ko */
function SomeViewModel() {
this.SetupValidation = function () {
var formValidationOptions = {
submitHandler: self.DoSomethingWhenValid,
success: $.noop,
errorPlacement: function (error, element) {
if (!error.is(':empty'))
{ qtip.DoSomethingToDisplayValidationErrorForElement(element, error); }
else
{ qtip.DoSomethingToHideValidationErrorForElement(element); }
}
};
$(someForm).validate(formValidationOptions);
this.SetupValidationRules();
};
this.SetupValidationRules = function() {
$(someFormElement1).rules("add", { required: true, minlength: 6, maxlength: 20, alphaNumeric: true });
$(someFormElement2).rules("add", { required: true, minlength: 6, maxlength: 20 });
$(someFormElement3).rules("add", { required: true, email: true, });
}; …我使用Knockout.js作为富客户端应用程序,它将包含大量的knockout.js ViewModels.在开发过程中,我注意到了两种创建knockout.js ViewModels的方法.第一种方式.
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");}
第二种方式.
var appViewModel = {
this.firstName = ko.observable("Bert"),
this.lastName = ko.observable("Bertington")};
这两种声明ViewModels的方法有什么特别的区别吗？在knockout.js官方页面示例中,他们使用了第一种方式.但在第三方框架中,如Knockout-validations.js已采用第二种方式.我应该使用哪种方式？使用它有什么特别的优势吗？
我发现如果我使用第一种方式,那么我不能使用Knockout-validations.js框架.我真的很困惑这个问题.任何评论表示赞赏.
谢谢.
我正在尝试试验,看看是否有任何聪明的解决方案来创建自定义验证器,可以抽象出来以获得整洁和重用.
在下面的jsfiddle中,我只是将一个简单的父模型放在一起,存储和测量数组(只是一个值和一个日期).在这个例子中,我提出了两个要求.
在父数组中必须至少有一个有效(满足先前条件)测量.
理想情况下,我想要确定有效的验证逻辑,存储在Measurement对象中,如下所述.但是,我非常讨厌的是我必须在父模型中执行的"动手"验证atLeastOne().
Knockout验证将自动验证各个字段的数字和日期但是我必须介入并对阵列规则执行验证.
问题:是否允许我设置KO验证的任何方法检查数组是否满足所需条件,同时仍然将HasValues方法仍存在于测量模型中??? 即我想将搜索"至少一个"的概念抽象为某种可以为我处理工作的自定义验证器,然后告诉这个验证器"嘿,这是我希望你用来验证的函数数组中的每个项目."
提前致谢!
function Model(data)
{
var self = this;
self.Measurements = ko.observableArray();
for(var i = 0; i < data.length; i++)
self.Measurements.push(new Measurement(data[i]));
function hasAtLeastOne(){
var atLeastOne = false;
$.each(self.Measurements(), function(i, item) {
if (item.HasValues()) {
atLeastOne = true;
return;
}
});
return atLeastOne;
}
self.Save = function() {
if (self.canSave() && atLeastOne())
alert('save');
else
alert('arg!');
};
self.errors = ko.validation.group(self);
self.canSave = ko.computed(function() {
return self.errors().length == 0;
}); …我将在require js中定义我的模型,我需要在我的模块和jquery中使用knockout和knockout验证插件.
define(["knockout","jquery","knockout.validation"], function (ko,$,validation) {
// knockout model here with some knockout validation
return function SignUpViewModel() {
var self = this;
self.name = ko.observable();
self.email = ko.observable().extend({ required: true });
self.password = ko.observable().extend({
required: true,
minLength: 6
});
self.confirmPassword = ko.observable().extend({ mustEqual: self.password() });
self.company = ko.observable();
self.availableCountries = ko.observableArray(['Pakistan', 'USA', 'Egypt', 'UAE']);
self.selectedCountry = ko.observable();
self.errors = ko.validation.group(self);
}
});
但是当我运行这个时,我得到了以下错误.
Uncaught ReferenceError: ko is not defined
我也尝试调试,发现所有其他库knockout,jquery正在加载完美.
这是我的配置部分
require.config({ …我有一个由两部分组成的淘汰表.当第一部分被填写时,第二部分被隐藏.完成第一部分并单击"继续"后,将隐藏第一部分,并显示第二部分.我希望能够验证第一组输入,如果没有错误,则继续下一部分.
我在官方的github页面上找到了这个,我正在尝试这样做.
当我这样做时,没有检测到错误.它继续到第二部分
function ReserveViewModel(){
self.firstName = ko.observable("").extend({ required: true });
self.continue = function(){
var errors = ko.validation.group([ReserveViewModel.firstName]);
if (errors.length == 0) {
//display second div
}
else{
self.errors.showAllMessages();
}
}
}
但是,如果我这样做它可以工作,但试图验证一切.由于第二组输入是空的,它只是挂在那里.
self.continue = function(){
self.errors = ko.validation.group(self);
if (self.errors().length == 0) {
}
else{
self.errors.showAllMessages();
}
}
两者都用于在viewmodel上应用挖空验证配置.这两个陈述有什么不同？
谢谢
我创建了一个JSFiddle来帮助演示我的问题:http://jsfiddle.net/jeffreyrswenson/CrYWn/5/
这是我想看到的:
前四个工作正如我所料.最后一项是否可能,如果是,我需要更改哪些才能启用该行为？
HTML:
<label>First name:
<input data-bind='value: firstName' />
</label>
<br/>
<label>Last name:
<input data-bind='value: lastName' />
</label>
<br/>
<button type="button" data-bind='click: submit'>Submit</button>
<br/>
<span data-bind='text: errors().length'></span> errors
视图模型:
var viewModel = function () {
ko.validation.configure({
decorateElement: true,
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null
});
this.firstName = ko.observable().extend({
required: true
});
this.lastName = ko.observable().extend({
required: true,
pattern: {
message: 'Hey this doesnt match my pattern',
params: '^[A-Z0-9]+$'
} …我正在使用此处的areSame规则:
ko.validation.rules['areSame'] = {
getValue: function (o) {
return (typeof o === 'function' ? o() : o);
},
validator: function (val, otherField) {
return val === this.getValue(otherField);
},
message: 'The fields must have the same value'
};
并像这样应用它:
this.confirm = ko.observable().extend({
areSame: {
params:this.password
}
});
但它甚至从未触发过.我把调试器放到validator规则定义的函数中:validator:function(val,otherField){debugger return val === this.getValue(otherField); 然而,流程从未访问过这一点.可能有什么不对？
编辑:
通过调用解决了不触发验证的问题ko.validation.registerExtenders();,但规则不能按预期工作.问题是otherField传递给的变量validator是对象
{params:*observable here*},getValue正如您从源代码中看到的那样,方法不期望这样.所以要么源代码错了,要么我以错误的方式为规则定义了参数.那么哪一个？
我正在使用Knockoutmvc进行我的项目.以下是代码.
@using PerpetuumSoft.Knockout
@model OpManWeb.ViewModel.Customer.AddressVM
@{
var ko = Html.CreateKnockoutContext();
}
@{
ViewBag.Title = "Add/Edit Address";
}
@Scripts.Render("~/jqueryval")
@using (ko.Html.Form("SaveContact", "Customer"))
{
@Html.ValidationSummary(true)
@ko.Html.TextBox(m => m.BlockNo, new { @class = "form-control fieldtextinput input-sm" })
@Html.ValidationMessageFor(model => model.BlockNo)
<button type="submit" class="btn btn-sm btn-primary" style="margin-top:15px" />
}
@ko.apply(Model)
我已经检查过它正在使用MVC的Normal Html Helpers.但是使用knockoutmvc它不起作用.如果有人遇到这样的问题,请帮忙......
这可能是最简单的问题,但我无法解决这个问题.我页面上的验证无效.每次我提交页面时,所有输入字段都空白,会生成一条警告,说"失败".如果我输入所有具有某些值的字段,则数据已成功提交.
这是我的HTML:
@{
ViewBag.Title = "Exercise10";
}
<html>
<head>
<script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.2.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="../../Scripts/json2.js" type="text/javascript"></script>
<link href="../../Content/ExerciseStyle.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/Popup.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery- ui.css" />
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="../../Scripts/DatePicker.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.validation.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-validator.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-validator-extensions.js" type="text/javascript"></script>
<link href="../../Scripts/extensions.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="" method="post">
<div id="MainArea">
<table id="tbllist" align="center" style="margin-left: 15px; width: 96%; margin- right: 15px;">
<tr>
<th colspan="3" align="left">
<div id="title_p">
Enter Following Entries</div>
</th> …knockout.js ×7
javascript ×3
jquery ×2
asp.net ×1
asp.net-mvc ×1
c# ×1
knockout-mvc ×1
mvvm ×1
qtip ×1
requirejs ×1
validation ×1
viewmodel ×1