areSame或mustMatch示例的Knockoutjs验证 [英] Knockoutjs Validation for areSame or mustMatch examples

问题描述

我正在尝试使用来自GitHub的Knockoutjs验证插件.它的大多数似乎都可以正常工作，但是当我尝试使用扩展验证mustEqual(password/confirm password)时，它似乎无能为力.我想念什么?

I am trying to use the Knockoutjs Validation add on from GitHub. Most of it seems to work just fine but when I try to use the extended validation mustEqual(password/confirm password) it does not seem to do anything. What am I missing?

我非常想学习这种扩展技术，以备将来使用.

I would very much like to learn this extender technique for future use.

(整个html和javascript也通过AJAX调用加载到页面上.如果这与它有任何关系.)

(also this whole html and javascript get loaded to the page via AJAX call. if that has anything to do with it.)

我的JavaScript

My javascript

    function UserAccount(data) {
        var self = this;
        self.Password = ko.observable(data.Password).extend({ required: true, minlength: 6, message: "Password is required", maxLength: 12 });

        self.Firstname = ko.observable(data.Firstname).extend({ required: true, minlength: 6, message: "Firstname is required", maxLength: 40 });
        self.Lastname = ko.observable(data.Lastname).extend({ required: true, minlength: 6, message: "Lastname is required", maxLength: 40 });
        self.Email = ko.observable(data.Email).extend({ required: true, minlength: 6, message: "Email is required", email: true, maxLength: 90 });
        self.ConfirmPassword = ko.observable().extend({ mustEqual: self.Password()});
        ...........................Other Code............
        }

    ko.validation.rules['mustEqual'] = {
        validator: function (val, otherVal) {
            alert("Hello");
            return val === otherVal;
        },
        message: 'The field must equal {0}'
    };
    $(document).ready(function () {


        ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0));
        ko.validation.registerExtenders();

    });

推荐答案

您的自定义验证程序代码是可以的.但是您没有正确调用ko.validation.registerExtenders();方法.

Your custom validator code is OK. But you are not calling correctly the ko.validation.registerExtenders(); method.

尽管没有明确说明，但您需要先呼叫ko.validation.registerExtenders(); ，然后再致电 .

Although it is not explicitly stated but you need to call ko.validation.registerExtenders(); before you are calling ko.applyBindings.

因此，要修复您的代码，您只需编写:

So to fix your code you just need to write:

$(document).ready(function () {
    ko.validation.registerExtenders();
    ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0));
});

但是您将面临另一个问题:mustEqual验证器用于与静态值进行比较，因此，如果您想将密码和确认密码这两个属性进行比较，则该验证器将不起作用.

But you will face another problem: the mustEqual validator is for comparing to static values so it won't work if you want to compare two properties like password with confirm password.

您需要的是类似用户贡献的"Are Same"验证器:

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'
};

您可以使用的方式如下:

What you can use like:

self.Password = ko.observable(data.Password).extend({
    required: true,
    minlength: 6,
    message: "Password is required",
    maxLength: 12
});
self.ConfirmPassword = ko.observable().extend({
    areSame: self.Password
});

演示 JSFiddle .

这篇关于areSame或mustMatch示例的Knockoutjs验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！