用javascript实现表单的最佳实践
我想知道用javascript编写复杂表单的最有效、安全和智能的方法 通常一个用户表单可能非常复杂,有很多不同的状态、复杂的检查等等,要做好这项工作,一个好的概念是绝对必要的 我真的相信最好的解决方案是一个状态机 下面的代码是我为使用RFID标签密钥进行用户注册所做的表单核心逻辑,用户可以使用不同的凭据(如电话、密钥RFID标签、邮件)进行注册,并在稍后阶段在同一论坛中完成注册。 只考虑高层次背后的逻辑。 对可能的转换进行迭代的主循环(按优先级顺序): 当按优先级顺序列出状态时,所有状态、它们的转换条件和它们的转换回调都在字典中定义:用javascript实现表单的最佳实践,javascript,forms,Javascript,Forms,我想知道用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() {}
}
}
}
实现复杂表单的最佳实践是什么
任何其他解决方案或方法都将受到欢迎。不幸的是,这个问题对于StackOverflow来说有点开放性-没有“正确”的答案,它实际上取决于意见(尽管有一些“错误”的答案)。“我真的相信最好的解决方案是一个状态机。”-所以坚持下去。当你说没有“正确”的答案时,你可能没什么问题,这实际上取决于观点,但我正在为更常见的情况寻找最佳实践。我的实现对我来说很好,修复可能的bug也很容易,但我想学习如何做得更好“最佳实践”只是一个流行语。“最佳”只能根据标准进行评估,以便您可以对各种选项进行排序。在一种情况下最好的可能在另一种情况下不是最好的。在我看来,您试图使验证逻辑过于复杂。想一想你想要达到的结果,然后想一想过程,想一想如何使它简单高效。