Question

我想知道在javascript中编写复杂表单的最有效，最安全和最智能的方法。

用户表单通常非常复杂，有很多不同的状态，复杂的检查等等，并且要做好一个好的概念是绝对必要的。

我真的相信最好的解决方案是状态机。

以下代码是用于使用RFID标签密钥进行用户注册的表单核心逻辑，用户可以使用不同凭证作为电话，密钥RFID标签，邮件进行自我注册，并在稍后阶段完成注册论坛。在高层次上考虑它背后的逻辑。

主循环迭代可能的转换（按优先级顺序）：

/* Evaluate the actual form state (status) and check if it's possible to change
 * to another status with a greater priority.
 * If the state transition conditions are verified the transition callback is executed
 * which, in case the state doesn't, is an empty function.
 */
setNextFormStatus: function(field) {

    var sts,
    that =  this;

    function conditionsAreValid(sts) {
        var context = that.statusToConditionsMap[sts];

        return ( sts == 'new_account' || that[context.field].state == context.state );
    }

    for (sts in this.statusToConditionsMap[this.status.actual].changes) {
        var transition = this.statusToConditionsMap[this.status.actual].changes[sts];

        if (transition && conditionsAreValid(sts)) {
            if (sts != this.status.actual) {
                this.status.previous = this.status.actual;
                this.status.actual = sts;
                this._resetForm(); // simple reset function
                transition.apply(this);
            }
            break;
        }
    }
}

当状态按优先级顺序列出时，所有状态，转换条件及其转换回调都在字典中定义：

/* 
 * This is the dictionary which defines form status states machine
 * 
 * For each status are defined the following attributes:
 *     · state & field: define the condition to enter this status. The field must have that state (i.e. field.state == state)
 *     · changes (optional): the list of possible next status from this one, ordered by priority. Each status has an handle to call
 */
this.statusToConditionsMap = {
    'registered_key':{
        state: 'registered',
        field: 'key'
    },
    'processed_key_with_username':{
        state: 'unlinked',
        field: 'key',
        changes: {
            'processed_key_with_username': function() {}, // empty cause callback is unnecessary 
            'new_account': this._checkNotEmptyFields
        }
    },
    'phone_already_present_confirmed':{
        state: 'already_present_confirmed',
        field: 'phone',
        changes: {
            'phone_already_present_confirmed': function() {},
            'phone_already_present_unconfirmed': this.phone_already_present_unconf_data_filler,
            'new_account': this._checkNotEmptyFields
        }
    },
    'phone_already_present_unconfirmed':{
        state: 'already_present_unconfirmed',
        field: 'phone',
        changes: {
            'phone_already_present_confirmed': this.phone_already_present_data_filler,
            'phone_already_present_unconfirmed': function() {},
            'new_account': this._checkNotEmptyFields
        }
    },
    'email_already_present':{
        state: 'email_already_present',
        field: 'email',
        changes: {
            'phone_already_present_confirmed': this.phone_already_present_data_filler,
            'phone_already_present_unconfirmed': this.phone_already_present_unconf_data_filler,
            'email_already_present': function() {},
            'new_account': this._checkNotEmptyFields
        }
    },
    'new_account':{
        state:'',
        field: '',
        changes: {
            'registered_key': this.registered_key_data_filler,
            'processed_key_with_username': this.processed_desikey_data_filler,
            'phone_already_present_confirmed': this.phone_already_present_data_filler,
            'phone_already_present_unconfirmed': this.phone_already_present_unconf_data_filler,
            'email_already_present': function() {this.showMailCheckbox(); this.runCheck('phone');},
            'new_account': function() {}
        }
    }
}

实施复杂表格可能是最佳做法吗？

任何其他解决方案或方法将不胜感激。

在javascript中实现表单的最佳实践

0 个答案: