lu2/theme/peak/js/common/comp/Form.js

Simple and flexible UI component library based on native HTML and JavaScript

/**
 * @Form.js
 * @author xinxuzhang
 * @version
 * Created: 16-03-01
 */

(function (global, factory) {
    if (typeof define === 'function' && (define.amd || define.cmd)) {
        define(factory);
    } else {
        global.Form = factory();
    }
}(this, function (require) {
    // require
    if (typeof require == 'function') {
        // 轻tips
        require('common/ui/LightTip');
        // 加载
        require('common/ui/Loading');
        // 验证
        var Validate = require('common/ui/Validate');

        // 一些表单UI控件
        require('common/ui/Select');
        require('common/ui/Radio');
        require('common/ui/Checkbox');
        require('common/ui/Placeholder');
    } else if (!$().validate) {
        if (window.console) {
            window.console.error('need Validate.js');
        }

        return {};
    } else if (!$.lightTip) {
        if (window.console) {
            window.console.error('need LightTip.js');
        }

        return {};
    } else if (!$().loading) {
        if (window.console) {
            window.console.error('need Loading.js');
        }

        return {};
    }

    Validate = Validate || window.Validate;

    /**
     * 项目表格组件
     * @使用示例
     *  new Form($('#form'), {}, {});
     */
    var DISABLED = 'disabled';

    // 表单
    var Form = function(elForm, optionCallback, optionValidate) {
        if (!elForm || !elForm.length) return this;
        // optionCallback可以是对象也可以直接是成功回调
        /*
            optionCallback = {
                avoidSend: $.noop,    // 验证成功之后，请求发送前的条件约束
                success: $.noop,
                error: $.noop,
                complete: $.noop
            };
        */
        optionCallback = optionCallback || $.noop;
        if ($.isFunction(optionCallback)) {
            optionCallback = {
                success: optionCallback
            };
        }

        optionValidate = optionValidate || {};

        var self = this;
        // 表单元素
        var form = elForm;
        // 通过submit按钮找到找到关联的我们肉眼所见的提交按钮
        var btnSubmitReal = form.find('[type=submit]');
        // 我们肉眼所见的按钮，进行一些状态控制
        var btnSubmit = $('label[for=' + btnSubmitReal.attr('id') + ']');


        // 占位符
        if ($().placeholder) {
            form.find('[placeholder]').placeholder();
        }
        // 下拉框
        form.find('select').each(function() {
            // 做个判断，防止重复绑定
            if (!$(this).data('select')) {
                $(this).selectMatch();
            }
        });

        // 暴露的元素
        this.el = {
            form: elForm,
            submit: btnSubmitReal,
            button: btnSubmit
        };

        this.option = {
            callback: optionCallback,
            validate: optionValidate
        };

        // 绑定表单验证
        this.validate = new Validate(form, function() {
            // 验证成功之后
            if (!optionCallback.avoidSend || !optionCallback.avoidSend()) {
                self.ajax();
            }
        }, optionValidate);

        return this;
    };

    Form.prototype.ajax = function() {
        // 回调
        var optionCallback = this.option.callback;
        // 元素
        var form = this.el.form;
        var button = this.el.button;
        var submit = this.el.submit;

        // 提交数据
        // 1. 菊花转起来
        button.loading();
        // 2. 提交按钮禁用
        submit.attr(DISABLED, DISABLED);
        // 3. 请求走起来
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            type: form.attr('method'),
            dataType: 'json',
            success: function(json) {
                if (json.code == 0 || json.error == 0) {
                    // 下一步
                    optionCallback.success.call(form, json);
                } else {
                    $.lightTip.error(json.msg || '您的操作没有成功，你可以稍后重试。');
                    // 回调
                    if ($.isFunction(optionCallback.error)) {
                        optionCallback.error.apply(form, json);
                    }
                }
            },
            error: function() {
                $.lightTip.error('网络异常，刚才的操作没有成功，您可以稍后重试。');
                // 回调
                if ($.isFunction(optionCallback.error)) {
                    optionCallback.error.apply(form, arguments);
                }
            },
            complete: function() {
                // 菊花关闭
                button.unloading();
                // 表单恢复提交
                submit.removeAttr(DISABLED);
                // 回调
                if ($.isFunction(optionCallback.complete)) {
                    optionCallback.complete.apply(form, arguments);
                }
            }
        });
    };

    Form.prototype.submit = function() {
        this.el.form.trigger('submit');

        return this;
    };

    return Form;
}));