基于条件所需的表单元素(Happy.js)

Question

我正在尝试使用Happy.js验证表单客户端。

基本的验证工作正常，但我有一个稍微复杂的部分，我需要验证它是有点复杂。本质上，有一个yes/no单选框，如果是，则显示更多的输入标记。只有在单选按钮为yes时才需要这些标记，否则不需要。

有人对如何做到这一点有什么建议吗？我正在考虑将它们设置为非必需的，然后创建一个愉快的函数，如果输入为空并且单选按钮设置为Yes，该函数将返回false。

如下所示：

"#input":{
    required: false,
    message: "required",
    test: happy.needed(parameter)
}

谢谢。

Answer 1

正如文档所说，您可以将'sometimes'传递给required，这将使Happy始终运行测试函数。

对于测试函数，我们只返回jQuery/Zepto is的值。

"#input":{
    required: "sometimes",
    message: "Custom message",
    test: function(input){ 
      return $(input).val() !== '' && $('#radioButton').is(':checked');
    }
}

如果你不确定发生了什么，他们给happy.email的例子可能会让你感到困惑。JavaScript中的函数是第一类的，这意味着您可以像传递变量一样传递它们。

因此，如果我们要写：

var isRadioButtonChecked = function(input) {
  return $(input).val() !== '' && $('#radioButton').is(':checked');
}

然后在我们的验证规则中，我们可以这样写：

"#input":{
    required: "sometimes",
    message: "Custom message",
    test: isRadioButtonChecked
}

这可能会更简洁一些。