如何在HTML表单字段之间添加约束条件？

Question

我在想是否已经有一个框架或jquery插件可以用来为表单字段添加约束。在这种情况下，“约束”并不意味着x字段是电子邮件字段，并且需要进行验证，而是我想定义表单字段之间的关系，例如：

• 如果复选框A中选择了某些内容--> 启用按钮B
• 如果列表A中至少选择了X个条目--> 启用表单字段B

等等。

我目前正在实现它，但我想确保我没有重复造轮子。

它可以是任何JavaScript框架（独立的或jquery插件）。

- Chris

---

你尝试过搜索吗？在GitHub上找到了这个：https://github.com/keyo/jQuery-Form-Dependency - Chris Andersson

显然，“依赖关系”比“约束条件”更好的搜索词。您能否把您的评论变成一个答案？ - Chris

Answer 1

为什么要使用插件？如果只使用jQuery，那么这个问题是相当简单的：

$('input.A:checkbox').change(function() {
    $('button.B').prop('disabled', !($(this).prop('checked'));
});
$('select.C').change(function() {
    $('button.D').prop('disabled', !($(this).find('option:selected').length >= 10));
});

我们只是为输入框的变化事件分配处理程序 - 我根据条件启用或禁用字段。

我认为这比使用插件要好，因为：

1. 您可以减少更多文件的HTTP请求
2. 通过不加载更多JS代码来提高性能
3. 这很简单，没有必要过于复杂化。

查看演示

- casraf

---

有关一些解释呢？ - Mohammad Areeb Siddiqui

你需要什么帮助？prop更改属性，在这种情况下是disabled，并且它会更改为我的条件的相反值（因为它是disabled而不是enabled），所以如果我选择了超过10个项目，则应该是false。 - casraf

从jQuery文档中可以得知，".prop()方法提供了一种明确检索属性值的方式，而.attr()则用于检索属性。" - casraf

谢谢，但我需要这个以一种“可配置”的方式而不是编程方式来实现，因为我创建的表单是动态生成的。我无法为每个表单编写约束条件。 - Chris

@RohanBüchner 我同意很多事情最好使用插件，但是限制的本质是即使最糟糕的限制也不会太复杂，所以为了不那么高效的东西而费尽周折并不值得。 - casraf

Answer 2

如果你使用类似knockout的东西，你就可以使用knockoutvalidation框架了。或者，我以前使用过jqbootstrapvalidation...后者显然也需要bootstrap。

两个网站上都有相当多的代码示例，两个框架都很容易使用。如果您需要更具体的帮助/建议，请随时在此帖子中发表评论。

仅供参考，请注意。如果您确实使用knockout，请选择knockoutvalidation，而不是bootstrap验证...否则，您将会为让这两个工具正常运行而煎熬不眠。

- Rohan Büchner

Answer 3

这里有一个你可以使用的jQuery插件： http://github.com/keyo/jQuery-Form-Dependency

- Chris Andersson