如何在同一页面上验证多个 div 中的电子邮件 onEqual答案

【问题标题】：How to validate emails onEqual in several divs with them on the same page如何在同一页面上验证多个 div 中的电子邮件 onEqual
【发布时间】：2014-12-09 14:30:35
【问题描述】：

情况：

<body>
    <div id="1">
      <input type="text" name="email_1"/>
      <input type="text" name="email_2"/>
    </div>
    <div id="2">
      <input type="text" name="email_3"/>
      <input type="text" name="email_4"/>
    </div>
    <!--and so on...-->
</body>

而且我需要验证每个 div 内这 2 个输入内的输入是否相等（仅在 div 内）。也许主要的问题是所有的 div 都是动态生成的，我们并不确切知道它们的数量以提供淘汰赛支持。怎么做？什么是最优雅的解决方案？

更新 1

我试过了：
1.使用knockout模型进行一些绑定。但我对此的解决方案是创建一些可观察的属性来检查输入值。这我猜这是不好的方式。
2.为此使用jquery。试图通过验证类验证字段输入（http://jqueryvalidation.org/jQuery.validator.addClassRules/）

更新 2

我的解决方案是这样的：

<div id="1">
   <input type="text" name="email_1"/>
   <input type="text" name="email_2"/>
   <label data-bind="visible: checkEmailsEquality(email_1,email_2)">Emails must be equal</label>
</div>

但是这个解决方案不行，因为这个绑定只能工作一次——在页面加载时，什么不好。我需要将此检查绑定到这些输入中的文本更新，但我不知道如何。

更新 3

我的建议是这样处理：

在第一封电子邮件中输入此绑定http://knockoutjs.com/documentation/textinput-binding.html
与 Wayne Ellery 所写的淘汰赛模型中的类似函数绑定。
如果值不相等，则显示错误标签。
主要条件是将适当的输入 ID 传递给函数，我想这会起作用。

【问题讨论】：

我认为您误解了弗林的评论。向我们展示您需要帮助修复的相关代码。不要指望我们会为您编写所有内容。
好的，很抱歉。我会告诉你我的淘汰赛尝试。所以，这个想法是传递给淘汰赛的模型函数输入 id 并检查它们的值。（请参阅我更新的问题）

标签： javascript jquery validation knockout.js

【解决方案1】：

最简单的方法是使用计算来比较两封电子邮件。

在下面的 ViewModel 中，我使用 jQuery $.map 方法将所有项目映射到一个 Item 对象数组。

var ViewModel = function (model) {
    var self = this;

    self.items = $.map(model.items, function(item) { return new Item(item) });
};

这里我使用 Item 中的计算方法来比较 email1 和 email2。

var Item = function (item) {
    var self = this;

    self.email1 = ko.observable(item.email1);
    self.email2 = ko.observable(item.email2);

    self.areEmailsSame = ko.computed(function() {
        return self.email1() === self.email2();
    });
};

http://jsfiddle.net/pxar0587/1/

【讨论】：

您的解决方案很好，但 div 元素的数量未知。由于特定条件，页面上会生成 Div。一旦我们有 1 个 div，另一次我们有 10 个 div。
好的。这在问题中并不清楚。我会将我的解决方案更新为动态

【解决方案2】：

我发现可能是最优雅的解决方案，它是关于使用 equalTo 属性，例如：

<div id="1">
  <input type="text" id="1" name="email_1" equalTo="#2"/>
  <input type="text" id="2" name="email_2" equalTo="#1"/>
</div>

希望这对某人有所帮助。

【讨论】：

这个equalTo属性是什么？我找不到任何有关它的信息