Question

我想在将对象添加到observable之前验证用户输入。例如，如果我有两个字段，比如数量和价格，在将对象添加到observable之前我想验证用户输入。我怎样才能实现这种行为？

到目前为止我的代码：

self.productPriceAdd = function () {
    var newPrice = {
        Quantity: self.newProductPriceEntry.Quantity(),
        Price: self.newProductPriceEntry.Price(),
        ProductBarcode: self.productPrices().Barcode
    }
    self.productPrices().ProductSalePrices().push(newPrice);
    self.productPrices().ProductSalePrices(self.productPrices().ProductSalePrices());
    self.newProductPriceEntry.Quantity(null);
    self.newProductPriceEntry.Price(null);
}

用户界面看起来像这样：

因此，在用户单击“添加”按钮后，应显示两条错误消息，每个空字段对应一条消息。

我的HTML代码：

<!-- ko if: productPrices() -->
<div class="col-md-4">
<div class="panel panel-default">
    <div class="panel-heading">
        <h2 class="panel-title"><b data-bind="text: productPrices().Name"></b></h2>
    </div>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayName("Quantity")
            </th>
            <th>
                @Html.DisplayName("Price")
            </th>
            <th></th>
        </tr>

        <tbody data-bind="foreach: productPrices().ProductSalePrices()">
            <tr>
                <td>
                    <b data-bind="text: Quantity"></b>
                </td>
                <td>
                    <b data-bind="text: Price"></b>
                </td>
                <td>
                    <a href="#" data-bind="click: $parent.productPriceRemove" class="btn btn-defaul">Remove</a>
                </td>
            </tr>
        </tbody>

        <tbody data-bind="with: newProductPriceEntry">
            <tr>
                <td>
                    <input type="number" class="form-control" data-bind="value: Quantity " placeholder="Quantity">
                </td>
                <td>
                    <input type="number" step="0.01" class="form-control" data-bind="value: Price " placeholder="Price">
                </td>
                <td>
                    <a href="#" data-bind="click: $parent.productPriceAdd" class="btn btn-defaul">Add</a>
                </td>
            </tr>
        </tbody>

    </table>
</div>
<a href="#" data-bind="click: productPriceSave" class="btn btn-defaul">Save</a>

Answer 1

看看Knockout-Validation。它是一个Knockout插件，可以简化验证过程。

https://github.com/Knockout-Contrib/Knockout-Validation

Answer 2

因此，我找到的解决方案是检查数量和价格字段的错误值。被评估为false以下类型：false，“”，undefined和null。所以，完整的工作代码：

self.productPrices = ko.observable();
self.newProductPriceEntry = {
    Quantity: ko.observable("").extend({ required: true }),
    Price: ko.observable("").extend({ required: true })
}

self.productPriceAdd = function () {
    var newPrice = {
        Quantity: self.newProductPriceEntry.Quantity(),
        Price: self.newProductPriceEntry.Price(),
        ProductBarcode: self.productPrices().Barcode
    }

    if (newPrice.Price && newPrice.Quantity) {
        self.productPrices().ProductSalePrices().push(newPrice);
        self.productPrices().ProductSalePrices(self.productPrices().ProductSalePrices());
    }
    self.newProductPriceEntry.Quantity(null);
    self.newProductPriceEntry.Price(null);
}

所以我正在做的是只有在条件为真时才将对象推入observable。然后将observable设置为null以清除字段。

对于数字部分验证，我使用数字 HTML5属性。

输入验证后将对象添加到KnockoutJS

2 个答案: