Question

情况：

<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.使用挖空模型进行一些绑定。但我的解决方案是创建一些可观察的属性来检查输入值。这个我猜是不好的方式。
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传递给函数，我想这会起作用。

Answer 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/

Answer 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>

希望这有助于某人。

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

2 个答案: