我试图使用Knockout-Validation为我的一个observable添加一个简单的正则表达式验证.
我有以下内容:
self.ContactPhone = ko.observable().extend({
required: true,
pattern: {
message: 'Invalid phone number.',
params: '^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$'
}
});
但是,无论我输入什么,它都会返回"无效的电话号码"消息.我需要以某种方式格式化表达式吗？我使用纯JavaScript测试它,它工作正常.
我想单元测试我的函数,它基本上从一组参数(TypeScript代码)构建一个observable数组:
private BuildObservables(parameters: Parameter[]) {
var observables = {};
for (var parameterName in parameters) {
var p = parameters[parameterName];
// Build observable
observables[parameterName] = ko.observable(p.Value);
// Attach validation
if (p.IsRequired) {
observables[parameterName].extend({ required: true });
}
}
return observables;
}
我的测试看起来像这样:
var parameters = [];
// new Parameter(int value, bool isRequired)
parameters["Param1"] = new Parameter("123", true);
parameters["Param2"] = new Parameter("456", false);
var viewModel = BuildObservables(parameters);
ok(viewModel["Param1"] != null);
ok(viewModel["Param2"] != null);
如果第一个参数isRequired设置为true,如何检查是否应用了扩展(验证)(BuildObservables中的"附加验证"部分)？
编辑:
在另一个功能我附加订阅者,我不知道如何测试他们是否正确附加.
我有一种情况需要验证视图模型中字段的最大数量.但是,最大数量必须是可变的,并根据在此模型外部选择的UI项目计算.我试图在我的自定义验证器中包含observable作为参数,但是当值发生更改时,它似乎不会更新.
我有一种感觉,一旦第一次执行验证代码,它就会保留参数.
没有使用Knockout的列表的HTML
<select id="ContentsReplacementAmount">
<option value="25000">£25000</option>
<option value="50000">£50000</option>
<option value="75000">£75000</option>
</select>
这是我正在使用的代码的笨拙版本.
var SpecifiedValuablesViewModel = function (maxSpecifiedItemAmount) {
var self = this;
self.maxSpecifiedItemAmount = ko.observable(maxSpecifiedItemAmount);
self.amountToAdd = ko.observable().extend({
validation: {
validator: function (val, max) {
return val <= max;
},
message: 'The amount must be a maximum of £{0}',
params: self.maxSpecifiedItemAmount()
}
});
};
var specifiedValuablesViewModel = new SpecifiedValuablesViewModel($('#ContentsReplacementAmount').val());
ko.applyBindings(ko.validatedObservable(specifiedValuablesViewModel), document.getElementById('SpecifiedValuables'));
maxSpecifiedAmount之外的事件
$('#ContentsReplacementAmount').on('change', function () {
specifiedValuablesViewModel.maxSpecifiedItemAmount(parseInt($(this).val()));
});
我的问题是,我怎样才能做到这一点？
考虑以下代码 -
var MyObjectModel = function(myObject){
var self = this;
self.myNumber1 = ko.observable(myObject.number1).trimmed();
self.myNumber2 = ko.observable(myObject.number2).trimmed();
我想扩展myNumber1和myNumber2,添加敲除验证,如果两者都为空则抛出错误,如果有值,则保持正常.
知道如何实现这个目标吗？
我有一个表单的viewmodel,我正在尝试使用knockout-validation添加验证.
fromDate: ko.observable(
moment().subtract('days', 1).startOf('day').format(dateFormat)
),
toDate: ko.observable(
moment().startOf('day').format(dateFormat)
),
我需要确保起始日期小于到目前为止.我似乎无法获得任何形式的自定义验证器来获取对第二个observable的引用.我需要的东西是:
toDate: ko.observable(moment().startOf('day').format(dateFormat)).extend({
validation: {
validator: function (val, someOtherVal) {
return moment(val) >= moment(someOtherVal);
},
message: 'Must be greater or equal to From Date',
params: viewModel.fromDate()
}
}),
有任何想法吗？
更新
我确定我已经尝试过这个,但是将扩展方法移动到onload函数是有效的.
$(function () {
ko.validation.configure({ decorateElement: true });
viewModel.toDate.extend({
validation: {
validator: function (val, someOtherVal) {
return moment(val) >= moment(viewModel.fromDate());
},
message: 'To date must be greater than from date',
}
});
ko.applyBindings(viewModel);
});
我正在使用Knockout Validation,当我用它来验证单选按钮组时,每个单选按钮旁边都会显示验证错误消息.我希望它只显示在一个位置.据推测,我将不得不"关闭"单选按钮组的验证消息的自动显示,然后在特定位置手动显示验证消息.但是......我还没有找到办法做到这一点.
这是一个演示我正在谈论的内容的小提琴:http: //jsfiddle.net/jbeall/tD4nU/2/
我希望其他输入类型(例如,文本输入)保留自动向右显示消息的行为.
我怎么设置它？
谢谢!
ps对于后代,jsfiddle代码如下:
// HTML
<div>
<div>First name: <input type='text' data-bind='value: firstname'/></div>
<div>Last name: <input type='text' data-bind='value: lastname'/></div>
</div>
<div>
Question Type:
<div>
<label>
<input type='radio' value='sales' name='questionType' data-bind="checked: questionType"/>
Sales
</label>
</div>
<div>
<label>
<input type='radio' value='support' name='questionType' data-bind="checked: questionType"/>
Support
</label>
</div>
<div>
<label>
<input type='radio' value='other' name='questionType' data-bind="checked: questionType"/>
Other
</label>
</div>
</div>
<div>
<input type='button' data-bind='click: triggerGroupValidation' value='Trigger validation via group() function'/>
</div>
<div data-bind='text: ko.toJSON(questionType)'></div>
<div>
Click button …我设置了一个带有敲除验证插件的页面,用于验证用户输入.我有两个因素:一个是正规的select,另一种是select用multiple集.我们的想法是使两个元素都是必需的.
验证调用正在触发,但问题是选择倍的错误消息未显示.
这是我的js代码:
ko.validation.init();
function isNotUndefined(val) {
return (typeof val != "undefined");
}
function isArrayNotEmpty(val) {
return (val.length > 0);
}
var viewModel = function () {
var self = this;
self.memberType = ko.observable().extend({
validation: {validator: isNotUndefined, message:'Please select gender'}
});
self.seekingTypes = ko.observableArray().extend({
validation: {validator: isArrayNotEmpty, message:'At least one option is required'}
});
self.memberTypeSource = [
{ id: 1, text: 'Man' },
{ id: 2, text: 'Woman' }
];
self.errors = ko.validation.group(self);
self.doValidation …将值绑定到下拉列表并使用敲除验证时,即使我的敲除验证设置说明,也会始终显示错误消息messagesOnModified: true.
HTML
<input type="text" data-bind="value: Name" />
<br />
<select data-bind="value: State">
<option value="">Select a state...</option>
<option value="NY">New York</option>
<option value="NJ">New Jersey</option>
</select>
JS
var ViewModel = function () {
var self = this;
self.Name = ko.observable().extend({
required: { message: "You must enter a name." }
});
self.State = ko.observable().extend({
required: { message: "You must select a state." }
});
self.Errors = ko.validation.group(self);
}
ko.validation.configure({
messagesOnModified: true,
insertMessages: true
});
ko.applyBindings(new ViewModel(), document.body);
并且jsfiddle显示文本框和下拉列表之间的区别:http://jsfiddle.net/f7v4m/ …
我正在尝试本地化KnockoutJS验证插件,但我需要能够在运行中切换语言.这个插件有一个问题,但它已经超过2年了(并且仍然开放).
我只是想做的是在加载所有内容后切换验证消息的语言.这是一个例子(可以在小提琴上看到:http://jsfiddle.net/Kikketer/S6j2q/)
<input data-bind='value: phone' />
<div data-bind="text: phone"></div>
<button type='button' data-bind="click: v">Validate</button>
<button type='button' data-bind='click: switchLanguage'>Switch Language</button>
使用以下JS:
ko.validation.configure({
registerExtenders: true
});
// If I localize right away, things work
ko.validation.localize({required: '**Required'});
var InterviewTwo = function() {
// Standard "required" validator
this.phone = ko.observable().extend({required: true});
// Group all of the validators
this.errors = ko.validation.group(this);
// Validation function
this.v = function() {
this.errors.showAllMessages();
};
// Switching languages after or before the validation …检查这个小提琴:
我试图做两件事:
第一:当字段为空时不要验证.我知道有一个onlyif选项..但是有更容易的东西吗？
第二:当我点击提交时我需要运行验证的东西(如果你测试我的小提琴,错误消息会弹出,但不会应用errorClass css)
感谢:D
CSS:
input.error {
color: red;
border-color: red;
}
JS:
ko.validation.configure({
insertMessages: false,
decorateElement: true,
errorElementClass: 'error',
messagesOnModified: false
});
function SignInViewModel() {
var self = this;
self.userName = ko.observable().extend({
required: true
});
self.password = ko.observable().extend({
required: true
});
self.errors = ko.validation.group(self);
self.login = function (e) {
if (self.errors().length == 0) {
alert('No errors');
} else {
this.errors().forEach(function(data) {
alert(data);
});
//self.errors.showAllMessages(true);
}
}
}
$(function () {
ko.applyBindings(new SignInViewModel());
});
HTML:
<form>
<fieldset> …