javascript - 单击按钮时调用 knockout 验证扩展器

Question

我读过很多问题，询问如何在按钮单击事件上调用 knockout 验证扩展程序。但所有接近回答问题的答案都涉及使用 knockout 验证库的解决方法。我没有使用 knockout 验证库。我想做的就是使用 knockout 扩展器中定义的验证规则来验证按钮单击事件上的输入字段。

为了简单起见，我将使用 knockout documentation 中所需的扩展器并将其应用到一个简单的用例中。此用例接受输入，并在按钮单击事件上对用户输入的值执行某些操作。或者如果未输入值，则更新 View 以显示验证消息。

knockout 码:

ko.extenders.required = function (target, overrideMessage) {
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();

    function validate(value) {
        target.hasError(value ? false : true);
        target.validationMessage(value ? "" : overrideMessage || 'Value required');
    }

    return target;
};

function MyViewModel() {
    self = this;
    self.userInput = ko.observable().extend({ required: 'Please enter a value' });

    /**
     * Event handler for the button click event
     */
    self.processInput = function () {
        //Validate input field
        //How to call the validate function in the required extender?

        //If passes validation, do something with the input value
        doSomething(self.userInput());
    };
}

标记:

<input type="text" data-bind="value: userInput, valueUpdate: 'afterkeydown'" />
<span data-bind="visible: userInput .hasError, text: userInput .validationMessage" class="text-red"></span>
<button data-bind="click: processInput ">Do Something</button>

如何触发按钮点击事件的验证并在未通过验证时显示验证消息？

Answer 1

我相信您正在查看此处的示例 - http://knockoutjs.com/documentation/extenders.html

您不能直接调用验证，但订阅会监视值并在更改时运行验证函数并更新您可以检查的可观察值 - hasError。

ko.extenders.required = function (target, overrideMessage) {
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();

    function validate(value) {
        target.hasError(value ? false : true);
        target.validationMessage(value ? "" : overrideMessage || 'Value required');
    }
    
    //initial validation
    validate(target());
 
    //validate whenever the value changes
    target.subscribe(validate);
 
    //return the original observable
    return target;
};

function MyViewModel() {
    self = this;
    self.userInput = ko.observable().extend({ required: 'Please enter a value' });

    /**
     * Event handler for the button click event
     */
    self.processInput = function () {
        if(self.userInput.hasError()){
          console.log('has error');
        }else{
          console.log('no error');
        }
    };
}

// Activates knockout.js
ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: userInput, valueUpdate: 'afterkeydown'" />
<span data-bind="visible: userInput .hasError, text: userInput .validationMessage" class="text-red"></span>
<button data-bind="click: processInput ">Do Something</button>