gpt4 book ai didi

knockout.js - 带有验证的 Knockout-JS 多步骤表单

转载 作者:行者123 更新时间:2023-12-04 02:50:55 25 4
gpt4 key购买 nike

在这里寻找健全性检查。我最近开始学习 knockout ,并被指示转换现有的多步表格。

基本思想是在允许用户继续之前验证每个步骤。还设置了某些限制(未显示),确定是继续前进还是使用所有当前数据提交(例如:如果他们不符合条件)。

这是一个简化版本的 fiddle (实际表单包含大约 40 个字段,超过 4 个步骤)

http://jsfiddle.net/dyngomite/BZcNg/

HTML:

<form id="register">
<fieldset>
<h2>About You</h2>
<ul>
<li>
<label for="firstName">First Name:</label>
<input type="text" data-bind="value: firstName" required="required" />
</li>
<li>
<label for="lastName">Last Name</label>
<input type="text" data-bind="value: lastName" required="required" />
</li>
</ul>
</fieldset>
<fieldset>
<h2>Your Business</h2>

<ul>
<li>
<label for="businessName">Business Name:</label>
<input type="text" data-bind="value: businessName" required="required" />
</li>
<li>
<label for="currentCustomer">Were you referred by someone?</label>
<input type="checkbox" data-bind="checked: referred" />
</li>
</ul>
</fieldset>
<fieldset>
<h2>User Info</h2>

<ul>
<li>
<label for="userName">Referrer's First Name:</label>
<input type="text" data-bind="value: referralFirst" required="required" />
</li>
<li>
<label for="password">Referrer's Last Name:</label>
<input type="password" data-bind="value: referralLast" required="required" />
</li>
</ul>
</fieldset>
</form>
<div class="nav-buttons"> <a href="#" data-bind='click: stepForward'>Continue</a>
<a href="#" data-bind='click: stepBack'>Back</a>
<a href="#" data-bind='click: resetAll'>Cancel</a>
</div>

JS:
 $("#register").children().hide().first().show();

ko.validation.init({
parseInputAttributes: true,
decorateElement: true,
writeInputAttributes: true,
errorElementClass: "error"
});

function myViewModel() {

var self = this;

//observable init
self.firstName = ko.observable();
self.lastName = ko.observable();
self.businessName = ko.observable();
self.referred = ko.observable();
self.referralFirst = ko.observable();
self.referralLast = ko.observable();

//validaiton observable init
self.step1 = ko.validatedObservable({
firstName: self.firstName,
lastName: self.lastName
});

self.step2 = ko.validatedObservable({
businessName: self.businessName,
referred: self.referred
});

self.step3 = ko.validatedObservable({
referralFirst: self.referralFirst,
referralLast: self.referralLast
});

//navigation init
self.currentStep = ko.observable(1);

self.stepForward = function () {
if(self.currentStep()<4){
self.changeSection(self.currentStep() + 1);
}
}

self.stepBack = function () {
if (self.currentStep() > 1) {
self.changeSection(self.currentStep() - 1);
}
}

self.changeSection = function(destIdx){
var validationObservable = "step" + self.currentStep();
if(self[validationObservable]().isValid()){
self.currentStep(destIdx);
$("#register").children().hide().eq(self.currentStep() - 1).show();
return true;
}else{
self[validationObservable]().errors.showAllMessages();
}
return false;
}

self.resetAll = function(){
//TODO
return false;
}

}

ko.applyBindings(new myViewModel());

我的问题:
  • 最初将所有字段声明为 observables 然后将它们聚集到一起验证 Observables() 是否有意义?
  • 如果最后我想提交整个表单,是否有比使用 ko.toJSON(self.step1()) 连接每个步骤更聪明的方法来完成此操作。我需要创建一个包含所有输入可观察对象的“完整形式”可观察对象吗?换句话说,序列化完整表单的最佳方式是什么?
    我想使用 ko.toJSON(self) 吗?
  • 将表单重置为初始配置的最佳方法是什么?有没有办法重新申请 ko.applyBindings(new myViewModel()) ?

  • 我这样做对吗?

    感谢您的任何澄清。

    最佳答案

    这是一个好的开始。我建议您使用 knockout 管理可见性,只有在没有其他选择时才使用 jQuery。我的意思是管理字段集的可见性:

    <fieldset data-bind="visible: currentStep() === 1">
  • 是的,最初将所有字段都作为可观察对象确实有意义。好的策略是从服务器获取 JSON 格式的数据,并使用映射插件将所有内容转换为 observables。如果您更喜欢手动编写所有代码,那没关系。
  • 最后只需提交整个 View 模型:ko.toJSON(self) 将完成将其序列化为 JSON 的工作。您可能希望将其转换为 JS 对象:ko.toJS,然后清理您不想提交的数据(例如查找数据等),然后使用 JSON.stringify 转换为 JSON。
  • 使用验证插件很难重置验证状态。要重置表单,只需从 DOM 中删除现有表单并在新 HTML 上应用绑定(bind)。将 HTML 保存在页面上方便的位置:

  • 要重置表单,请执行以下操作:
    <script type="text/html" id="ko-template">
    <form id="register">
    ...
    </form>
    </script>

    <div id="context"></div>

    JavaScript:
    var template = $('#ko-template').html();

    $('#context').empty().html(template);

    ko.applyBindings(new myViewModel(), document.getElementById('context'));

    在这种情况下,表单标签不是必需的,因为您使用 JS 对象管理所有内容。

    关于knockout.js - 带有验证的 Knockout-JS 多步骤表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16722098/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com