0

我正在构建一个独立的 jquery ui 组件，我想给使用该组件的任何人大量的控制权。例如，表单是我的组件的重要组成部分，我的组件有一些内置的表单验证，但我为用户提供了禁用内置验证的选项。我希望他们能够在此基础上进行自己的表单验证。

因此，当单击表单提交按钮时，我会触发一个自定义事件并检查一个布尔值。

this.element.trigger('customEvent');
if(canContinue) { ...

布尔值默认为真，但我的想法是用户可以听我的customEvent然后进行验证，如果验证失败，将布尔值切换为假，这样表单就不会提交。

这行得通。

然而，它感觉被黑客攻击在一起，我不确定我是否以标准或可接受的方式这样做。Javascript 或 JQuery 中是否有一些我可以更好地用来运行这种逻辑的东西？

4

2 回答 2

2

是的，这很容易使用 triggerHandler 方法：

var handlerResult = this.element.triggerHandler("customEvent");
if (handlerResult || typeof handlerResult == "undefined") {
    alert("Success!");                           
}

用户只需返回 false 即可取消。

示例：http: //jsfiddle.net/7B2Kw/1/

于 2013-08-09T19:47:33.803 回答
0

You can implement Strategy design pattern, implement your validation as default strategy and let the user to implement custom strategies. User may configure your component with other validation strategy (e.g. pass it as one of the configuration properties or by setting relevant property of the component after it was instantiated). Below you can find an example:

$(function() {
    $.widget( "custom.mycomponent", {
        options: {
            validate: null
        },
        _validate: function() {
            return true;
        },
        _create: function() {
            this.options.validate = this.options.validate || this._validate;
            var that = this;
            this.element.on('keypress', function() {
                if(that.option('validate')()) {
                    this.style.backgroundColor = 'green';
                } else {                                        
                    this.style.backgroundColor = 'red';
                }
            });
        },
        _setOptions: function() {
            this._superApply( arguments );
        },
        _setOption: function(key, value) {
            switch(key) {
                case 'validate': 
                    if(typeof value !== 'function') return;
            }
            this._super( key, value );
        }
    });

    // Instantiate with default options
    $('#my-component1').mycomponent();

    // Pass another validation strategy
    $('#my-component2').mycomponent({validate: function() {return false;}});

});

Working example in action http://jsbin.com/inavur/4/edit

于 2013-08-09T19:54:11.783 回答