在哪里添加Jquery Validation插件到Knockout组件

时间:2016-09-22 07:48:56

标签: jquery validation knockout.js

我写了一个Knockout组件,而ViewModel和模板是在单独的文件中,由RequireJs加载。

组件是一个包含很少输入字段的简单表单。现在我想在表单上添加Jquery Validation Plugins。我应该在哪些验证设置?在主html,或模板html,或ViewModel js?

的index.html

<order-ticket params="symbol:symbol,stockname:stockname,state:state,price:price,qty:qty"></order-ticket>

<script type="text/javascript">
ko.components.register('order-ticket', {
    viewModel: { require: 'files/component-order-ticket' },
    template: { require: 'text!files/component-order-ticket.html' }
});

function MyViewModel() {
    this.state = ko.observable('new');
    this.symbol = ko.observable('IBM');
    this.stockname = ko.observable('HSBC');
    this.price = ko.observable(100);
    this.qty = ko.observable(50);
}

ko.applyBindings(new MyViewModel());

</script>

/files/component-order-ticket.js

define(['knockout'], function (ko) {
    function OrderTicketViewModel(params) {
        this.symbol = (params && params.symbol || '');
        this.stockname = (params && params.stockname || '');
        this.price = (params && params.price || '');
        this.qty = (params && params.qty || '');
        this.state = (params && params.state || ko.observable('new'));
    }

    OrderTicketViewModel.prototype.emptySymbol = function () {
        this.symbol('');
    };
    OrderTicketViewModel.prototype.changeState = function (state) {
        this.state(state);
    };
    return OrderTicketViewModel;
})

/files/component-order-ticket.html

<form id="OrderTicketForm" method="post">
    <div>
        Symbol: <input type="text" name="symbol" data-bind="value: symbol"><br />
        Stock: <span data-bind="text: stockname"></span><br />
        Price: <input type="text" name="price" data-bind="value: price"><br />
        Qty: <input type="text" name="qty" data-bind="value: qty"><br />
        <input type="submit" />
    </div>
</form>

验证码:

$("#OrderTicketForm").validate({
    rules: {
        symbol: {required:true},
        stock: {
            required: true
        }
  });

1 个答案:

答案 0 :(得分:0)

如果您询问10位开发人员,您将得到11个不同的答案。我个人会把它放在.js文件中。